div 중심 문서를 시맨틱 HTML로 바꾸기

이번 단계에서 배울 내용

<div>는 의미가 없는 묶음 요소입니다. 내용의 역할이 분명하다면 <header>, <nav>, <main>, <article>, <aside>, <footer> 같은 시맨틱 요소를 사용하는 편이 좋습니다.

시맨틱 요소는 화면 모양을 자동으로 완성하지는 않지만, 사람과 보조 기술, 검색 엔진이 문서 구조를 이해하도록 돕습니다.

예시

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

<header>
  <h1>소식</h1>
  <nav>메뉴</nav>
</header>
<main>
  <article>새 글</article>
  <aside>관련 링크</aside>
</main>
<footer>저작권</footer>

해야 할 일

준비된 <div> 중심 문서를 각 내용의 역할에 맞는 시맨틱 요소로 바꾸세요. 기존 글의 순서는 유지합니다.

완성 조건

• 페이지 머리말을 <header> 한 개로 묶습니다.
• 메뉴를 <nav> 한 개로 표시합니다.
• 핵심 콘텐츠를 <main> 한 개로 묶습니다.
• 새 강좌 소식을 <article> 한 개로 묶습니다.
• 관련 링크를 <aside> 한 개로 표시합니다.
• 저작권 정보를 <footer> 한 개로 표시합니다.
• 페이지 제목은 <h1>부터 시작하고 하위 제목을 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 먼저 각 <div>가 머리말, 핵심 글, 참고 정보, 바닥글 중 어떤 역할인지 판단한 뒤 태그 이름을 바꾸세요.