nav element - by. UXKM

요약 설명

<nav> 요소는 문서 내에서 주요 탐색 링크 영역을 나타내는 시맨틱 태그로, 사용자에게 페이지 간 이동 또는 섹션 내 이동 경로를 안내하는 역할을 합니다.
보통 사이트 메뉴, 목차, 페이지 내 목차(jump link) 등에 사용되며, 문서의 다른 링크들과 구분되는 내비게이션 목적의 링크 묶음을 정의합니다. 문서 안에 여러 개의 <nav>를 사용할 수 있지만, 각 영역은 명확한 탐색 목적을 가져야 합니다.

주요 역할 및 특징

  1. 탐색 링크 그룹화
    • <nav>는 페이지의 주요 탐색 영역(예: 헤더 메뉴, 푸터 링크)을 나타냅니다.
    • 관련 없는 링크 모음(예: 콘텐츠 내부의 단순 참조 링크)에는 사용하지 않습니다.
  2. 접근성과 SEO
    • 스크린 리더와 검색 엔진은 <nav> 요소를 통해 탐색 구조를 이해합니다.
    • 여러 탐색 영역이 있는 경우, <aria-label>이나 <aria-labelledby>를 사용하여 탐색 영역의 목적을 명확히 할 수 있습니다.
  3. 다른 요소와의 관계
    • <header>, <footer>와 함께 사용되어 구조적이고 의미론적인 웹 페이지를 구성합니다.
    • <nav>는 <header> 밖에서 독립적으로 사용될 수 있습니다.

CSS 기본 값

<nav> 요소는 기본적으로 블록 레벨 요소입니다.

기본 문법

속성

<nav> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

기본 네비게이션 메뉴

푸터 네비게이션 메뉴

페이지 내 링크 네비게이션 (앵커 링크)

모바일 네비게이션 (햄버거 메뉴)

접근성을 고려한 탐색 메뉴

aria-labelledby를 사용해 탐색 영역의 제목을 명확히 지정하여, 스크린 리더 사용자가 탐색 영역을 빠르게 식별할 수 있습니다.