[html5] nav 태그

 

 

[html5] nav 태그

 

지난 시간엔 header 요소를 배웠습니다.

 

[html5] header 태그

 

오늘 배울 nav 태그는 사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때 사용합니다.

 

nav 요소를 사용하면, 스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게

 

찾을 수 있고, 필요하지 않을 경우 건너뛰기 할 수도 있습니다.
 

nav 요소는 header나 article 요소 안에 올 수 있습니다.

 

▶사용 예

 

네비게이션 링크

이전 페이지로 가기(previous), 다음 페이지로 가기 버튼(next)

목차

 

▶브라우저 지원

 

ie9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

 

 

▶html/css 작성 예

 

html

 <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Guest</a></li>
      <li><a href="#">Noitce</a></li>
    </ul>
  </nav> 

css

nav{background-color:#FFE08C;} 

nav ul{position:relative;margin:0px; padding:0px;}
ul li{display:inline;}

 

▶실행화면

nav.html

 

 

 

위 이미지에서 노란색으로 된 Home Guest Notice 링크 그룹이 nav 태그를 이용하여 만든 것입니다.

 

맨 아래 footer에 About Privacy Policy Contact Us 또한 링크 그룹이지만 주요한 네비게이션 역할을

 

하는 것이 아니기 때문에 nav를 사용하지는 않았습니다. 또 nav 없이 footer만으로도 충분하고요

추가: 하지만 명세에 따르면 footer 안에 nav 태그를 삽입할 수 있습니다. 

 

 

 

HTML5 기본 레이아웃

 

article vs section 차이

 

웹사이트 운영자라면 알아야할 html, css 상식