[잘난웹디] 돕다 웹사이트 제작 2강_ header / nav / layout

기본 레이아웃 작성

 

 

1. header _ html

 

 

 

2. css

 

header는 고정될수 있도록 position : fixed ; 해준다

v

 

 

 

- 로고가 센터에 위치할 수 있도록 해주는것 

 

header의 height 과 동일한 값으로 line-heigh의 값을 매겨주면 ,  태그가 가 센터로 위치하게 된다.

 

- 로고를 제외한 nav요소들이 오른쪽으로 올 수 있도록 float : right ; 해주면 오른쪾으로 오는것을 볼 수 있다.

 

 

 

 

 

- 아래로 떨어진 메뉴들을 정렬해준다.

ㄴ> li는 block속성으로  block속성을 유지하면서 + inline 속성이 여으로 나열 될 수 있도록 inline-block으로 지정해주겠다. block속성은 한줄을 다 차지하는데, inline 속성은 옆으로 나열이 되기 때문에 완성본의 결과와 같이 나열이 된다.

li왼쪼으로 여백을 두어 li들끼리 붙지않도록 간격을 조정해준다.

 

 

 

- 소문자로 작성했던 li들의 텍스트를 대문자로 변경해주기

text-transform : uppercase ; 대문자로 변경

 

- li에 마우스를 오버했을 때 언더바가 생기는것은 가상컨텐츠로 만들어준다.

li의 position : relative여야 한다.

 

ⓐ 기준이 li가 되어야 하기 때문에 li에 position : relative ; 를 두고 가상컨텐츠에 position : absolute ; 를 준다.
ⓑ li > a 에 가상컨텐츠를 만들거기 때문에 a에 after 해주고, content는 비어있기 때문에 공백으로 둔다. > ' ';
ⓒ width 는 처음에는 보이지 않아야 하기 때문에 0%으로 두고, height 는 1px (라인이 보여지도록)준다.
ⓓ position은 absolute로 지정해주고, 컬러를 매겨준뒤, relative인 li에서 47px정도 아래에 위치하도록 한다. 
ⓔ 센터에 위치시킬 수 있도록, left 에서 50%정도 떨어트려 위치시켜준다.
ⓕ 살짝 더 왼쪽으로 와야 센터가 맞기때문에 transform : translateX(-50%);를 해줘야 정확히 센터에 위치하게 된다.
    ㄴㄴㄴ>이부분은 외우도록 한다.

* center로 위치 시키는 법   ① left : 50% ;  ② transform : translateX (-50%) ;

ⓖ transition을 주어 부드럽게 될 수 있도록 한다.

 

 

 

 

- 마우스 오버했을 때 가상컨텐츠가 나타나야하기 때문에 hover시 width가 커질수 있도록 해준다.

ⓐ .gnb에 있는 la의 각 a에 마우스를 오버했을 때, 그리고 a에 초점이 맞춰졌을 떄 : after의 크기를 100%로 해라.

 

ㄴ> 배경을 지우고, 마우스를 오버했을때만 가상컨텐츠가 나타나게 된다.

 

 

 

 

▼ 2강 완성본

header / nav영역 ( 마우스 hover시 언더바를 가상컨텐츠로 만들기 )