목록과 링크로 접근 가능한 내비게이션 바를 만듭니다.
nav 안의 ul과 a로 이동 구조를 만들고 Flexbox로 가로 배치할 수 있습니다. 현재 페이지는 aria-current와 시각 스타일로 구분하고 focus 상태도 보여야 합니다.
nav ul이 flex 컨테이너가 되어 세 li가 가로로 6px 간격을 두고 늘어서고, margin과 padding을 0으로 지워 목록의 기본 들여쓰기도 없앱니다. 링크마다 display: block과 padding 10px 14px를 주어 글자보다 넓은 면 전체가 클릭 영역이 됩니다. 현재 페이지 표시는 class가 아니라 aria-current 속성을 고르는 속성 선택자로 칠해서, 화면 읽기 프로그램에 전달되는 정보와 보이는 강조가 한 값에서 나옵니다.
aria-current에는 page 말고도 step, location, date 같은 값이 있어 단계 표시나 달력에서도 현재 항목을 같은 방식으로 알릴 수 있습니다. 값을 true로만 두면 현재 항목이라는 뜻만 전달되므로, 내비게이션 링크에는 page를 쓰는 편이 의미가 분명합니다.
메뉴 사이를 공백 문자로만 나누거나 현재 위치 표시를 색상 하나에만 의존하지 마세요.
직접 바꿔보세요메뉴를 하나 추가하고 현재 페이지를 바꿔보세요.