[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 상식

 

'html' 카테고리의 다른 글

[html5] footer 태그  (0) 2015.01.07
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
[html5] header 태그  (1) 2015.01.02
[html5] article vs section 차이  (2) 2014.12.30
HTML5 기본 레이아웃  (0) 2014.12.24
지구별에
html 2015. 1. 5. 15:05

댓글을 달아 주세요

  1. 완전변태 2015.01.05 15:40  수정/삭제  댓글쓰기

    주인장님 ^^ 덕분에 많은 것을 알아갑니다. 우연찮게 들려서 글들 쭉 보고 있는데, 뉴! 가 떠있군요 ㅎㅎㅎ 정말 꼼꼼하신 분 같습니다.
    새해 복 많이 받으시고 건강하십쇼^^

  2. 지구별에 2015.01.05 21:15 신고  수정/삭제  댓글쓰기

    감사합니다 자주 찾아주시니 고맙습니다 ㅎ 꼼꼼한 성격은 아니지만 그러려고 노력한답니다^^

  3. admin 2015.01.06 11:27  수정/삭제  댓글쓰기

    li에 inline 값을 주면 따로 float:left 값을 주지 않아도 저렇게 정렬이 되나요?

    • 지구별에 2015.01.06 11:46 신고  수정/삭제

      네 메뉴를 수평 정렬할 때 display:inline, inline-block, inline-table 사용하거나 float를 사용할 수 있어요.
      아래 드롭다운 메뉴 만들기(기초편) 참조해주세요^^
      http://aboooks.tistory.com/329

Powerd by Tistory, designed by criuce