<< 드롭다운 메뉴 만들기 >>

지금까지 공부한 것을 적용하여 시맨틱한 코드로 드롭다운 메뉴를 만들어보자. 

* 완성 *

1) HTML 구성 : 시맨틱한 코드를 위해 <nav> 태그 사용

2) 초기화 : 기본적으로 저장되어 있는 CSS를 제거하는 과정 

( margin-padding과 list-style 제거)

* : 다중선택

3) h1 : 가운데정렬, margin 을 주어 적절한 위치로 보내기, font-size 조정하기

4) 가장 메인이 될 메뉴 배경 꾸미기 

-div는 너비가 무한이므로 적절한 너비로 바꾸기

-좌우에 auto margin을 주어 가운데 정렬하기

-적절한 height 주기 ( 주지 않으면 색이 안입혀진다) 

-배경색 입히기

5) 세로로 정렬되어 있는 메뉴 가로로 정렬하기. float 이용 

6)

- 알아보기 쉽게 적절한 border를 주었다 ( border 관련 게시글은 곧 올라올 예정)

- 메뉴들의 너비 구성. 100px 같이 고정된 너비를 주면 내용이 긴 메뉴들도 같은 메뉴라서 뭔가 아쉽다. 

- 내용이 긴 메뉴들은 긴 너비를 차지할 수 있도록 padding으로 너비 조정. 가운데 정렬도 된다

7) nav와 같은 높이로 맞추기 위해 height 를 주었다. border가 2px 이므로 위 아래 2px씩 빼서 80px. 

8) 한줄만 있을 때 line-height 를 height와 같은 크기로 주면 세로로 가운데 정렬이 된다 ( border와 같이 게시글 올릴 예정)

9) .second 에 .menu li를 부모태그로 삼는 position을 줄 예정이기 때문에 position: relative;

10) .second 태그 

- position absolute를 주고 기준을 확인하기 위해 top :0px; left : 0px; 를 주었다. 기준은 CSS3이 적힌 li태그 

 

11) CSS3이 적힌 li태그의 바로 아래 - 왼쪽에 위치하기 위해 top :100%; left : 0px; 

10) CSS3에 마우스를 올리면 나타나는 드롭다운 메뉴를 만들 예정이기 때문에 우선 보이지 않게 해두었다. 

* 태그를 보이지 않게 하는 방법 

    -opacity :0; (0~1) 1이면 보이고 0이면 안보임. 투명도 표현. 태그의 위치가 대로 살아있다. 뒤에 있는것을 클릭할 수 없다. 

    -visiblity : hidden; hidden & visible. 보이지 않아도 영역이 살아있음. 뒤에있는 태그 위치 유지

    -display : none; none인 상태 - 안보임. none이 아닌 상태 - 보임. 뒤에있는 태그가 밀려옴.

11) display : none; 을 주석처리 해놓고 .second li 설정. 

너비와 구분하기 쉽게 border 설정

12) display : none; 의 주석처리를 취소. hover를 넣었다 

- h1태그에 마우스를 올리면 red 

-.menu의 li에 마우스를 올리면 .second가 나타나게

출처 : 학원수업