a 노멀라이즈

HTML

 

 

 

 

 

nav>section>div*4>a[href="#"]{메뉴아이템$}을 한 후 tab를 눌러 정리해준다. 

 

 

 

 

 

 

 

CSS

 

 

 

 

 

 

1. a를 노멀라이즈해준다

  --> 노멀라이즈 : 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애 다시 평범하게 만든다

2. nav 태그를 가운데로 정렬시켜준다

3. section태그를 글자화, 배경색 변경, 모서리 둥글게 해주고 padding으로 위아래는 0으로 양옆은 10px만큼 늘려준다

4. div태그의 display를 글자화시켜준다.

 

 

 

 

 

 

 

 

 

 

 

5. nav>section>div>a 태그를 padding을 20px 넣어준다. padding을 div가 아닌 a태그에 넣어주는 이유는 마우스를 올렸을 때 메뉴의 크기에 맞게 배경색이 바뀔 수 있게 해야하기 때문이다. 

6. padding을 사용하기 위해서 display를 inline-block으로 바꿔준다.

7. nav>section>div:hover>a로 마우스를 올렸을 때 글자색은 흰색, 배경색은 블랙으로 바뀌어주게 만들어준다.

 

 

 

 

 

결과