HTML : 시맨틱 웹(Semantic Web) - <nav>

HTML : 시맨틱 웹(Semantic Web) - <nav>

---

HTML : 시맨틱 웹(Semantic Web) - <nav>

---

<nav> 

<nav> : 탐색 구획 요소

• 문서의 부분중 현재페이지내 또는 다른 페이지로의 링크를 보여주는 구획이다. ( 예제 01참고 )
  • 현재 어느 경로에 있는지를 나타내며, 다른페이지로 넘어갈수있다.

 

예제 01

1. Bikes
2. BMX
3. Jump Bike 3000

<style>
  nav {
      border-bottom: 1px solid black;
  }

  .crumbs ol {
      list-style-type: none;
      padding-left: 0;
  }

  .crumb {
      display: inline-block;
  }

  .crumb a::after {
      display: inline-block;
      color: #000;
      content: '>';
      font-size: 80%;
      font-weight: bold;
      padding: 0 3px;
  }
</style>

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

 

 

 

•  메뉴,목차,색인
  • 현재페이지내에서 누르면 이동하여 보여주는것을 말한다.
  • <footer>와는 성격이 다르다.
    • <footer>는 모든 웹페이지에 동일하게 들어가며, 전체를 아우르는 링크를 담고있다.
    • <nav>는 현재의 웹페이지의 상위나 현재 페이지내의 개요를 담고 있다.

---

기술요약

• 콘텐츠 카테고리 : 플로우 콘텐츠, 구획콘텐츠
• 가능한 콘텐츠 : 플로우 콘텐츠
• 태그생략 : 종료태그 생략 불가
• 가능한 상위요소 : 플로우 콘텐츠를 허용하는 모든 요소

 

---

 

HTML : 콘텐츠 카테고리 (Contents Category)