목록과 링크로 접근 가능한 내비게이션 바를 만듭니다.
nav 안의 ul과 a로 이동 구조를 만들고 Flexbox로 가로 배치할 수 있습니다. 현재 페이지는 aria-current와 시각 스타일로 구분하고 focus 상태도 보여야 합니다.
이번 예제의 출발점은 nav ul { display: flex; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 메뉴를 하나 추가하고 현재 페이지를 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
메뉴 사이를 공백 문자로만 나누거나 현재 위치 표시를 색상 하나에만 의존하지 마세요.
직접 바꿔보세요메뉴를 하나 추가하고 현재 페이지를 바꿔보세요.