html nav영역 만들기

지난 시간에는 html 헤더영역 상단 왼쪽에 로고를 직접 넣어보았습니다. 그럼 이번시간에는 오른헤더영역 오른쪽 넓은 부분에 nav 영역을 넣어보도록 하겠습니다. 약 3번에 걸쳐 nav 영역의 자바스크립트 효과를 줘서 스르륵 떨어지게 만들어보겠습니다.

우리가 만들고자 하는 nav 영역입니다. 당연히 navigation의 약자로써 탐색 기능 정도로 생각해주시면 되겠습니다. 저는 홈페이지의 얼굴인 여행가이드 소개와 국내여행지 5꼭지와 해외여행지 5꼭지를 넣어보도록 하겠습니다. 물론 하부메뉴는 다음시간에 진행할 예정입니다. 

우선 css 영역에서 우리가 지난시간 공부했던 logo 클래스 바로 아래에 nav 클래스를 만들었습니다. 오른쪽에 위치해야하기에 float는 right , margin-top은 위에서 30px정도 떨어뜨렸습니다. nav의 전체적인 영역 지정이므로 여러분들은 굳이 위에 높이와 넓이를 따라하지 않으셔도 됩니다.

음 제가 html 파트는 캡쳐하지 않았네요. 간단합니다. 저번시간 공부했던 header 영역 안에 nav 클래스를 넣어주어야 합니다. 하지만 전 div를 사용하지 않고 ul class를 사용했습니다. 일단 보기 쉽게 표현하기 위해 1.2.3. 세개의 li를 지정해줬는데 제가 원하는 가로정렬이 되지 않은 상태입니다.

네 css 부분에서 nav 클래스 하위 li를 지정해주어야 합니다. 위에 그림에서 설명을 해놓았습니다.  positon은 밑에 나올 submenu를 지정하기 위해 넣어주었으며 float를 left로 지정해주시면 우리가 원하는 가로지정된  li가 나올겁니다. 물론 다른 방법도 있는데 다음에 설명드리겠습니다.

짜잔 ~ 우리가 원하는 1. 2 . 3  <li>가 가로정렬된 모습니다. 

그럼 이제 임의지정한 1.2.3을 여행가이드 소개, 국내여행지, 해외여행지로 구분지어보겠습니다.

다들 수고하셨습니다. 다음시간에는 nav의 하위 디렉토리인 submenu를 통해서 국내여행지 5곳과 해외여행지 5곳을 넣어보도록 하겠습니다.