nav와 aside로 보조 영역 구분하기

이번 단계에서 배울 내용

<nav>는 문서 안에서 이동하는 링크를 묶고, <aside>는 핵심 내용과 관련은 있지만 따로 읽어도 되는 참고 정보를 담습니다.

<article>은 핵심 글을 묶습니다. 핵심 글과 참고 자료를 구분하면 사용자가 문서의 중심 내용을 더 쉽게 찾을 수 있습니다.

예시

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

<nav aria-label="강의 목차">
  <a href="#lesson">수업으로 이동</a>
</nav>
<main>
  <article id="lesson">수업 내용</article>
  <aside>추천 자료</aside>
</main>

해야 할 일

준비된 수업 링크를 <nav>로, HTML 수업 내용을 <article>로, MDN 참고 정보를 <aside>로 구분하세요. 내비게이션의 이름은 문서 목차입니다.

완성 조건

• 수업 링크를 감싸는 <nav>를 한 개 만듭니다.
• <main> 바로 안에 핵심 수업 내용을 담은 <article>을 한 개 만듭니다.
• <main> 바로 안에 참고 정보를 담은 <aside>를 한 개 만듭니다.
• <nav>에 aria-label="문서 목차"를 지정합니다.
• 페이지 제목과 하위 제목의 단계를 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: <article>과 <aside>는 서로 안에 넣지 않고 <main> 안에서 나란한 영역으로 둡니다.