목록으로 내비게이션 만들기

이번 단계에서 배울 내용

<nav>는 페이지의 주요 이동 링크를 묶는 영역입니다. 여러 링크는 <ul> 목록으로 구성하면 링크의 개수와 관계를 이해하기 쉽습니다.

같은 페이지에 여러 내비게이션이 있을 수 있으므로 aria-label로 목적을 알려 주면 화면 읽기 프로그램 사용자가 원하는 메뉴를 찾기 쉽습니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<nav aria-label="고객 메뉴">
  <ul>
    <li><a href="/orders">주문 내역</a></li>
    <li><a href="/account">계정</a></li>
  </ul>
</nav>

해야 할 일

준비된 홈, 커리큘럼, 문의 링크 목록을 <nav>로 감싸세요. 이 내비게이션의 목적을 주요 메뉴라고 지정합니다.

완성 조건

• <nav> 안의 <ul>에 세 개의 링크 항목을 유지합니다.
• <nav>에 aria-label="주요 메뉴"를 지정합니다.
• 페이지 제목과 구역 제목의 단계를 순서대로 사용합니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: 기존 <ul>의 내용은 바꾸지 않고, 목록의 바깥에 <nav> 여는 태그와 닫는 태그를 추가하면 됩니다.