페이지 header 제작(2)

이번에는 지난번 글에 이어 베너 css를 마저 끝내겠습니다.

 

이번에 할 부분은 가운데의 제품정보~사업분야와 오른쪽의 제품찾기~BLOG를,

위와 같이 바꿔 보겠습니다.

 

 

- 제품정보 ~ 사업분야 부분

이번 글에서는 html 문서는 동일하고 css에서의 변경점만 일어나지만, html 문서의 코드와 병행하며 설명하겠습니다.

일단 우리가 바꾸려고 하는 저 부분은 html 코드에서,

 

<nav class="lnb">
        <ul>
          <li><a href="#a"><span>제품정보</span></a></li>
          <li><a href="#a"><span>시공사례</span></a></li>
          <li><a href="#a"><span>고객센터</span></a></li>
          <li><a href="#a"><span>기업소개</span></a></li>
          <li><a href="#a"><span>사업분야</span></a></li>
        </ul>
</nav>

 

이 부분에 해당합니다.

여기 있는 class값과 태그들을 기억해 둔 상태에서 css 코드로 가겠습니다.

 

<index.css>

 

header {height: 81px; text-align: center;}
header h1 { position: absolute; left:50px; top:0; padding: 14px 0 0;}
header h1 a {display: block; width: 110px; height: 48px; color: transparent;
background: url(../image/sp_com.png) no-repeat -300px 0;}

header .lnb li {display: inline-block;}
header .lnb li a { display:block; padding: 0 35px; height: 81px; font-size: 17px;
color: #333; line-height: 81px;}
header .lnb li a:hover {color: #2d5b79; font-weight: bold;}
header .lnb li a span {position:relative; }
header .lnb li a:hover span::after {position: absolute; content: ""; display: block;
width:100%; left: 0;height: 1px;bottom: -9px; background: #2d5b79;}

header .spot { position: absolute; right:50px; top:0; }
header .spot li {float:left; position: relative;}
header .spot li:after {content: ""; position: absolute; left: 0; top: 50%;
width: 1px; height: 7px; background: #ccc; transform: translateY(-50%);}
header .spot li:first-child:after {display: none;}
header .spot li a {display:block; height: 81px; padding:0 10px;
line-height: 81px;}
header .spot li:last-child a {padding-right: 0;}

 

바뀐 코드들을 하나하나 살펴보겠습니다.

일단 저번의 코드,

 

header {height: 81px; text-align: center;}
header h1 { position: absolute; left:50px; top:0; padding: 14px 0 0;}
header h1 a {display: block; width: 110px; height: 48px; color: transparent;
            background: url(../image/sp_com.png) no-repeat -300px 0;}
header .spot { position: absolute; right:50px; top:0; }
header .lnb li {display: inline-block;}

 

이것과 비교했을 때 위쪽의 header h1 부분은 그대로이고, 이번에 바꾸고자 하는 header .lnb와 header .spot 부분에

뭐가 많이 추가된 것을 볼 수 있습니다.

​

일단 먼저 보기로 한 header .lnb li 부분부터 보면, header .lnb li의 css는 저번 코드와 똑같이 inline-block 그대로인

것을 볼 수 있습니다.

이제 그 아래를 보면 header .lnb li a를 하나하나 보겠습니다.

 

header안의 class 값이 .lnb 안의 li태그 안의 a태그에 대한 css 내용인데, 이 부분은

 

<li><a href="#a"><span>제품정보</span></a></li>
<li><a href="#a"><span>시공사례</span></a></li>
<li><a href="#a"><span>고객센터</span></a></li>
<li><a href="#a"><span>기업소개</span></a></li>
<li><a href="#a"><span>사업분야</span></a></li>

 

html에서 이 부분에 해당됩니다.

​

먼저 a 태그는 기본 속성이 display:inline인데 전에도 말했듯 inline 속성은 height, width 값 등을 받지 못하는 특징이

있어 위치 조정을 위해 display:block으로 바꾸었습니다.

그리고 원본과 비교 시 글자와 글자 사이의 간격이 좀 더 떨어져야 하므로 padding값 35px을 주어 글자 사이의

간격을 어느정도 벌려주고, 현재 글자들의 공간이 너무 위쪽에 딱 붙어있는 작은 공간이어서 height값을 81px로

주었습니다.

(여기서 height:81px은 앞 글의 Hansol 홈데코 이미지의 height값과 같은 값입니다.)

​

그 후 글자 사이즈를 좀 더 키워주고(font-size:17px), 글자색 값을 #333으로 주었습니다.

마지막 line-height값도 보면 81px인데, line-height는 줄과 줄 사이의 간격을 정하는 태그입니다.

이해하기 쉽게 line-height값을 뺀 코드와 값을 넣은 코드를 실행해서 비교하면,

위가 line-height 값이 빠진 상태이고, 아래가 값이 들어간 상태입니다.

딱 봐도 위쪽은 값이 빠지니 글자들이 가운데 정렬, 폰트 크기와 같은 css는 다 적용된 상태임에도 페이지 위쪽에

딱 붙어 있는게 보이죠?

그래서 Hansol 이미지와 맨 오른쪽의 리스트와 높이값을 맞추기 위해 line-height를 쓴 것입니다.

​

그 다음 코드는

 

header .lnb li a:hover {color: #2d5b79; font-weight: bold;}

 

인데 어떤 태그:hover 를 하게 되면 해당 태그에 마우스 커서를 올렸을 때 설정한 css 이벤트가 발생하도록 설정하는

것입니다.

이 페이지에서는 저 텍스트들의 영역에 마우스 커서를 올리면 글씨 색깔이 바뀌고 굵어지며, 밑줄이 그이도록 설정을

할 것인데 위 코드는 먼저 글씨가 굵어지는 효과와 색 변경 효과를 나타내는 코드입니다.

 

​커서를 올릴 시 이와 같은 효과가 나타나게 하고 싶은데 밑줄을 긋는 부분이 조금 골치가 아픕니다.

사실 밑줄 자체는 텍스트 데코레이션 값으로 underline을 주게 되면 끝나는데 이렇게 하면,

이렇게 밑줄이 딱 붙게 되기 때문이고, 이 underline은 따로 위치 설정이나 이런 걸 할 수 없기에 다른 방법을

찾아야 합니다.

​

그 방법에 대한 코드가 이 부분입니다.

 

header .lnb li a span {position:relative; }
header .lnb li a:hover span::after {position: absolute; content: ""; display: block;
width:100%; left: 0;height: 1px;bottom: -9px; background: #2d5b79;}

 

<li><a href="#a"><span>제품정보</span></a></li>
<li><a href="#a"><span>시공사례</span></a></li>
<li><a href="#a"><span>고객센터</span></a></li>
<li><a href="#a"><span>기업소개</span></a></li>
<li><a href="#a"><span>사업분야</span></a></li>

 

잘 보면 html 코드도 전 글과 달라졌음을 알 수 있습니다.

전 글의 html 코드에서는 a 태그 안에 바로 제품정보~ 들이 있었는데 또 한번 span 태그로 감싸져 있는 것을

볼 수 있습니다.

(span 태그는 inline 요소를 묶어 css에 활용하거나 할 때 쓰이는 태그로 그 자체로는 어떠한 의미도 가지지 않습니다.)

​

왜냐하면 밑줄을 우리가 긋고 크기값 설정 등을 해야 하는데 이미 a 태그에 대한 css 부분을 보면 height니

padding값이니 많이 설정되어 있는 것을 볼 수 있습니다.

여기서 a 태그의 css를 변경할 수 없기에 css를 위해 또 한번 span 태그로 묶어 준 것입니다.

​

다시 코드로 돌아가면, header .lnb li a span 의 css 로 position 값을 relative로 주었습니다.

모든 태그들은 일단 기본 값으로 position이 static으로 설정되는데, static 포지션은 값들이 왼쪽에서 오른쪽으로,

위에서 아래 순으로 차곡차곡 쌓이는 형태가 static 포지션으로 볼 수 있습니다.

하지만 우리는 차곡차곡 값이 쌓이는 형태에서 밑줄의 위치를 보다 자유롭게 조정해야 하기에 여기에 해당하는

의미인 relative 포지션을 준 것을 볼 수 있습니다.

 

header .lnb li a:hover span::after {position: absolute; content: ""; display: block;
width:100%; left: 0;height: 1px;bottom: -9px; background: #2d5b79;}

 

여기서 header .lnb li a:hover span::after 의 의미를 알아보자면, 일단 a:hover의 의미는 우리가 원하는 상황인 마우스

커서가 해당 영역에 올라갔을 때 css 값을 설정시켜라 라는 의미입니다.

여기서 a 태그에 hover를 주면 마우스 커서가 올라가는 범위가 텍스트에만 한정되지 않고 보다 더 넓은 a 태그의

영역까지 할당됩니다.

(사용자가 클릭하기 더 쉬워지고, 이는 접근성 향상의 의미로 연결됩니다.)

​

그리고 span:after에서 after의 의미는 앞의 태그의 항상 뒤에 css 내용이 붙는다는 뜻입니다.

사실 여기서는 before을 써도 우리가 밑줄의 위치를 직접 주기 때문에 큰 상관은 없지만, 의미론적으로 보았을 때

after를 써 주었습니다.

​

그리고 여기서는 우리가 직접 밑줄이 어떻게 그일지부터 설정하기 때문에 내용은 필요 없이 가상의 덩어리로써의

의미만 가지고 있으면 됩니다.

그렇기에 content 값을 ""로 주었고, 위치값을 주기 위해 display를 block으로 바꾸었습니다.

​

그 후 width, left, bottom, height값과 background 컬러값(밑줄 색)을 주는 모습입니다.

(width:100% -> 글자 영역과 딱 맞는 가로 길이로 하겠다 left:0 -> 왼쪽으로 치우침X height:1px -> 밑줄 두께 설정

bottom:-9px -> bottom값에 -값을 주면 아래쪽이랑 떨어지는 것이 아니라 아래쪽으로 가는데 원하던 밑줄의 위치가 -9px인 것입니다.)

​

​

이제 마지막으로 페이지의 맨 오른쪽에 해당하는 css 코드가 남았습니다.

 

header .spot { position: absolute; right:50px; top:0; }
header .spot li {float:left; position: relative;}
header .spot li:after {content: ""; position: absolute; left: 0; top: 50%;
width: 1px; height: 7px; background: #ccc; transform: translateY(-50%);}
header .spot li:first-child:after {display: none;}
header .spot li a {display:block; height: 81px; padding:0 10px;
line-height: 81px;}
header .spot li:last-child a {padding-right: 0;}

 

맨 위의 .spot은 저번에 한 코드기에 넘어가고, .spot li의 내용을 보면 float값과 position값을 정해준 것을 볼 수

있습니다.

포지션 relative는 앞에서 설명했으니 넘어가고, float left를 보면 기본적인 의미는 왼쪽으로 정렬하는 것인데

float 속성은 묶음 태그들에게만 적용된다는 특징이 있습니다.

그래서 요소들을 묶어 준 li 태그에 적용을 시킨 것이고 left값을 주었기 때문에 원래 세로로 나타나는 리스트의

형태가 아닌 리스트의 값들이 왼쪽부터 배치되는 모습으로 바뀐 것입니다.

이렇게 말이에요.

​

다음으로 li 태그의 after에 css를 주었는데, after 자체는 위에서 설명했으니 어떻게 쓰였는지만 보겠습니다.

지금 우리가 해야 될 기능은 바로 위의 이미지에서 제품찾기, SITEMAP, BLOG 이 세 텍스트 사이에 구분선을

넣는 것입니다.

전에는 밑줄을 긋는 것이었기에 width:100%에 height 1px 등으로 설정할 수 있었지만 이번엔 세로로 줄을 긋는

것이기 때문에 이와 맞는 속성값을 주어야 합니다.

​

밑줄과 반대로 height 값 7px, width값 1px로 세로 줄을 만들고 실행을 시키면,

이런 형태가 나오게 됩니다.

근데 잘 보면 세로 구분줄이 밑으로 내려가 있는 게 보이죠?

그 값을 설정하는 게 transform: translateY(-50%); 이 부분인 것입니다.

(-값을 주면 Y축으로 위쪽으로 올라가게 됩니다.)

​

다음 코드를 보면

 

header .spot li:first-child:after {display: none;}

 

이 부분인데, 이 부분을 추가를 시키지 않고 실행을 하면 제품찾기의 왼쪽에도 밑줄이 그이게 됩니다.

그 부분을 없애는 css 부분이 바로 저 부분인데, li:first-child의 의미는 li 태그의 첫 번째 부분을 뜻하고,

그 부분은 제품찾기에 해당이 됩니다.

그 부분의 css 값을 display:none 을 주었으니, 제품찾기의 왼쪽 줄은 사라지게 되는 것입니다.

​

header .spot li a {display:block; height: 81px; padding:0 10px;
line-height: 81px;}
header .spot li:last-child a {padding-right: 0;}

 

마지막으로 이 부분에서 .spot li a 의 css 값은 전체 리스트가 다른 리스트들(Hansol 한솔홈데코 이미지, 제품정보,

시공사례와 같은 페이지 중간의 리스트)과의 위치를 맞추기 위한 설정값입니다.

그리고 li:last-child, 즉 BLOG 부분의 padding-right 값을 0으로 줌으로써 더 오른쪽으로 붙게 만든 것입니다.

 

 

 

 

 

 

 

 

​https://www.inflearn.com/course/%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%A6%AC%EB%B2%A0%ED%95%98%EC%96%80/dashboard

-> 이 내용은 해당 강의의 내용을 참고하였음을 밝힙니다.

(강의하시는 분께 양해를 구했습니다.)