05 - 20 검은사막 메인 페이지 마크업 (1)

카테고리 없음

05 - 20 검은사막 메인 페이지 마크업 (1) - 헤더

Wonseein 2022. 5. 20. 16:28

초반 마크업 시작 문제점 발생 : 이미지 svg를 불러오면 이미지가 하얗게 되고 이미지가 로드가 안됨. ( 펄어비스, 검은사막 로고 )

svg가 기본 하얀색이라 color:black을 줘도 로고가 안나오는 현상.

color:black은 안먹히고 일단 헤더탑에 백그라운드를 주니 로고는 정상적으로 나옴 ( 아직 아래 검은사막 로고는 안나옴 )

logo_bod

logo_bdo 이름 오류였음. ( 멍청 )

svg는 color로 색상 줘도 안먹히는 것 같음 ( 구글링해봄 )

svg 쓰는 이유 -> 얘는 크기를 확대해도 이미지가 깨지질 않음. 근데 또 파일 크기는 작음 ( 최적화 효과 )

아이콘이나 UI디자인용으로 많이 쓰이는 이유이기도함.

대신 이제 호버줄 때 이미지가 2개가 필요하고 웹 컬러톤 바꾸려면 이미지를 전부 교체해야되는 번거로움이 있음

svg는 style로 변경못하고 svg를 텍스트편집기에서 연결해서 값을 좀 수정해야줘야됨. ( 어쨋든 수정 가능하긴함 )

그래서 스타일줘도 그대로 계속 하얀색이었던 것 같음

css로 스타일 주고 싶다? 그러면 이미지에 .svg 이런 식으로 붙이지 말고 svg를 " 파일 " 로 붙여줘야함.

* 어떻게함?

-> 일단 일러스트에서 해당 파일 불러내고 따로 svg 파일로 저장해줘서 주소를 복사해서 html로 옮겨주면됨.

viewBox="0 0 463.5 54.3" style="enable-background:new 0 0 463.5 54.3;" xml:space="preserve">

.st0{fill:#FFFFFF;}

</style>

<g>

<path class="st0" d="M0,0.8h11.7c7.6,0,11.4,5,11.4,15c0,4-0.7,7.1-2,9.4c-1.3,2.3-3,3.7-5,4.3c-2,0.6-5,0.9-8.9,1v23.2H0V0.8z

M7.1,25c3,0,5.2-0.6,6.5-1.8c1.3-1.2,2-3.7,2-7.3c0-3.7-0.6-6.2-1.7-7.6s-3.4-2-6.7-2C7.1,6.3,7.1,25,7.1,25z"/>

<path class="st0" d="M120,53.7h-6.9l-1.9-10.5H100l-2,10.5h-6.8l11.4-52.9h5.9L120,53.7z M110.2,37.9l-4.6-25.1h-0.2L101,37.9

H110.2z"/>

<path class="st0" d="M168.7,53.7h-7.4L153,28.9h-0.6v24.8h-7.1V0.8h9.9c8.1,0,12.1,4.5,12.1,13.5c0,4.1-0.6,7.2-1.8,9.3

s-3.1,3.6-5.8,4.7L168.7,53.7z M152.4,24c2.8-0.1,4.8-0.7,6-2c1.2-1.3,1.8-3.5,1.8-6.9c0-3.2-0.6-5.5-1.7-6.8c-1.1-1.4-3-2-5.7-2

h-0.4L152.4,24L152.4,24z"/>

<path class="st0" d="M277.7,53.7h-6.9l-1.9-10.5h-11.2l-2,10.5h-6.8l11.4-52.9h5.9L277.7,53.7z M267.9,37.9l-4.6-25.1h-0.2

l-4.4,25.1H267.9z"/>

<path class="st0" d="M303.1,0.8h8.3c4.5,0,7.9,1.1,10,3.3c2.2,2.2,3.2,5.7,3.2,10.4c0,6.7-2.6,10.9-7.7,12.7

c5.6,1.1,8.3,5.5,8.3,13.2c0,4.2-1,7.5-3,9.7c-2,2.3-4.9,3.4-8.6,3.4h-10.6V0.8z M310.2,6.3v18.4c2.7-0.1,4.7-0.8,5.9-2.1

c1.2-1.3,1.8-3.6,1.8-6.9c0-3.6-0.5-6-1.6-7.3C315.2,6.9,313.2,6.3,310.2,6.3z M310.2,29.9v18.4c2.8-0.1,4.8-0.7,6-1.8

c1.2-1.2,1.8-3.5,1.8-6.9c0-3.7-0.6-6.2-1.8-7.6C315,30.7,312.9,30,310.2,29.9z"/>

<path class="st0" d="M417.1,7.6c-2.3-1.2-4.4-1.9-6.3-1.9s-3.4,0.7-4.8,2c-1.3,1.3-2,2.9-2,4.8c0,1.3,0.4,2.7,1.2,4.3

c0.8,1.5,2.5,3.9,5.3,7.2s4.8,6.2,6.3,8.6c1.5,2.4,2.2,5.2,2.2,8.4c0,3.9-1.2,7.1-3.5,9.6c-2.4,2.5-5.5,3.7-9.3,3.7

c-2.1,0-4.7-0.6-7.7-1.9v-6.3c0.1,0,0.2,0.1,0.2,0.1c0.4,0.3,1.3,0.8,2.6,1.4c1.3,0.6,2.6,0.9,3.9,0.9c2.1,0,3.8-0.7,5.1-2.1

c1.3-1.4,2-3.2,2-5.3c0-1.5-0.3-2.9-1-4.2s-1.9-3-3.7-5.2l-4.8-5.9c-1.9-2.3-3.2-4.4-4.1-6.2c-0.9-1.9-1.3-4.1-1.3-6.7

c0-3.8,1.1-7,3.4-9.4c2.2-2.4,5.1-3.6,8.7-3.6c2.5,0,5,0.6,7.6,1.9L417.1,7.6L417.1,7.6z"/>

<path class="st0" d="M461.6,7.6c-2.3-1.2-4.4-1.9-6.3-1.9s-3.4,0.7-4.8,2c-1.3,1.3-2,2.9-2,4.8c0,1.3,0.4,2.7,1.2,4.3

c0.8,1.5,2.5,3.9,5.3,7.2s4.8,6.2,6.3,8.6c1.5,2.4,2.2,5.2,2.2,8.4c0,3.9-1.2,7.1-3.5,9.6c-2.4,2.5-5.5,3.7-9.3,3.7

c-2.1,0-4.7-0.6-7.7-1.9v-6.3c0.1,0,0.2,0.1,0.2,0.1c0.4,0.3,1.3,0.8,2.6,1.4c1.3,0.6,2.6,0.9,3.9,0.9c2.1,0,3.8-0.7,5.1-2.1

c1.3-1.4,2-3.2,2-5.3c0-1.5-0.3-2.9-1-4.2s-1.9-3-3.7-5.2l-4.8-5.9c-1.9-2.3-3.2-4.4-4.1-6.2c-0.9-1.9-1.3-4.1-1.3-6.7

c0-3.8,1.1-7,3.4-9.4c2.2-2.4,5.1-3.6,8.7-3.6c2.5,0,5,0.6,7.6,1.9V7.6z"/>

</g>

</svg>

* 매우 김..

한번 html에 넣어보자 그리고 검은색으로 바꿔보자 ( color가 아닌 fill을 이용 )

성공

( 여튼 지금은 다시 img안에 svg를 넣는식으로 )

:: 헤더 상단 작업

요 작은 놈들 위로 안올라감 ( 위에 헤더 div가 width 100%를 다 먹고 있음 안에 있는데도 )

.top_header 에다가 height값을 줘서 그런거 같음( 로고가 이미 높이를 다 차지하고 있어서 )

+ 그리고 ul이 display:block 이 디폴트라 이렇게 한 줄에 똑 똑! 되는게 아니라 밑으로 떨어짐

height값은 그대로 주고 ( 그게 문제가 아니었음 ul이 블락이라 내려간거임 )

div로 한번 더 감싸주고 둘 다 inline-block을 넣어줌 ( ul 떨어지지말라고 inline-block li들 정렬하라고 inline-block )

굿 ㅋㅋ

ul에 width값 필요 없으니 빼버림 ( 괜히 레이아웃 깨짐 ) 글자크깃 수정, 마진 값 양 쪽으로 추가

xeicon 추가

그런데 양 쪽에 마진값을 준 상태여서 이렇게 됨. html에 태그 추가하는 방식이 아니라 가상요소로 스타일을 줘야할 것 같음.

그 전에 마크업 조금 수정

li의 a들을 선택했을 때, 선택하는 넓이가 글자뿐만이 아니라 a의 근처를 눌러도 선택이 가능하게끔 해야할 것 같음. ( 접근성+UX )

지금 이게 a에다가 마진 값 줘서 처리했는데 이러면 a의 양쪽 공백에 마우스를 가져다대면 해당 메뉴를 선택할 수 없어서 불편할 수 있음.

( 누르는 버튼의 넓이가 너무 작음 )

* ul li에 주었던 margin값을 padding으로 변경

* ul li에 주지 않고 ul li a에 값을 줘서 근처에 마우스를 가져다대도 클릭이 가능하도록 변경

일단, 여전히 저 작은 세모 아이콘은 가상요소로 넣어줘야할 것 같음 ( 패딩 )

가상요소 컨텐트 값.

첫번째 li a에 세모표시를 넣어줌

레이아웃 겹치니까 가상요소는 앱솔루트로 넣어줌

.top_headerwrap ( div를 굳이 2번 감싸줄 필요 없음 ) 삭제.

img에 height값 삭제

.top_header의 height값 삭제

왼쪽 컨텐츠들은 inline-block, 오른쪽 컨텐츠들은 float:right로 처리

태그 수정 로그인,게임시작 인라인 태그들을 한 div에 묶어서 정렬.

헤더부분 기본 뼈대는 완성

비디오 태그로 영상 자동루프 삽입, width 100%

* 메인 문구 가운데 정렬 방식 고민 ( 반응형 생각해서 항상 가운데로 올 수 있게끔 고려 )

1. { left:50%; transform: translateX(-50%); } top 값은 설정해주고 앱솔루트 준 상태에서 가운데 정렬 ( 반응형 대비 )

https://rkqtlr15159.cafe24.com/blackdesert/

검은사막

rkqtlr15159.cafe24.com

https://github.com/wonpoem/blackdesert/tree/master/blackdesert

GitHub - wonpoem/blackdesert: blackdesert mark up study

blackdesert mark up study. Contribute to wonpoem/blackdesert development by creating an account on GitHub.

github.com