시맨틱 뉴스 페이지 만들기

이번 단계에서 배울 내용

뉴스 페이지는 사이트 제목과 메뉴, 핵심 기사, 보조 정보, 바닥글처럼 역할이 다른 여러 영역으로 이루어집니다. 앞에서 배운 시맨틱 요소를 조합하면 각 영역의 관계를 명확하게 표현할 수 있습니다.

<section>은 기사 목록 같은 하나의 주제를 묶고, 그 안의 개별 기사는 <article>로 표현합니다.

예시

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

<header>
  <h1>학교 뉴스</h1>
  <nav aria-label="뉴스 분류">
    <ul><li><a href="#school">학교</a></li></ul>
  </nav>
</header>
<main>
  <section><article>기사 내용</article></section>
  <aside>인기 기사</aside>
</main>
<footer>뉴스 문의</footer>

해야 할 일

빈 뉴스 문서에 머리말, 두 개의 메뉴 항목, 기사 한 개, 보조 정보, 바닥글을 구성하세요. 내비게이션의 이름은 뉴스 메뉴입니다.

완성 조건

• <header> 바로 안에 뉴스 제목 <h1>을 한 개 둡니다.
• <nav>의 목록에 메뉴 항목 <li>를 두 개 작성합니다.
• <main>의 <section> 안에 기사 <article>을 한 개 작성합니다.
• <main> 안에 보조 정보 <aside>를 한 개 작성합니다.
• 페이지 바닥글 <footer>를 한 개 작성합니다.
• <nav>에 aria-label="뉴스 메뉴"를 지정합니다.
• 페이지 제목과 하위 제목의 단계를 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 빈 화면에서 한 번에 작성하기 어렵다면 header → main → footer를 먼저 만들고 각 영역의 안쪽을 채우세요.