17978 | 시맨틱 블로그 글 페이지 만들기

문제 설명

이번 단계에서 배울 내용

블로그 글 페이지에는 사이트 머리말과 메뉴, 독립적인 글, 글의 작성 정보, 여러 본문 구역, 관련 글, 바닥글이 있습니다. 각 역할을 알맞은 시맨틱 요소로 표현하면 긴 문서도 구조를 쉽게 파악할 수 있습니다.

<time>의 datetime에는 컴퓨터가 읽을 수 있는 날짜를 작성하고, 화면에는 사람이 읽기 편한 날짜를 넣을 수 있습니다.

예시

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

<header>
  <h1>여행 블로그</h1>
  <nav aria-label="블로그 메뉴">글 목록</nav>
</header>
<main>
  <article>
    <header><h2>제주 여행기</h2><time datetime="2026-05-02">5월 2일</time></header>
    <section><h3>첫날</h3><p>여행 내용</p></section>
  </article>
  <aside>관련 글</aside>
</main>
<footer>블로그 정보</footer>

해야 할 일

HTML 학습 블로그 글 페이지를 완성하세요. 사이트 머리말과 메뉴, 작성 날짜가 있는 글, 두 개의 본문 구역, 관련 글, 바닥글을 문서 역할과 읽는 순서에 맞게 구성합니다.

완성 조건

페이지 <header> 안에 <nav>를 한 개 둡니다.
<main> 안에 post라는 id의 <article>을 한 개 둡니다.
글의 <header> 바로 안에 <time>을 한 개 둡니다.
글 바로 안에 본문 <section>을 두 개 둡니다.
<main> 바로 안에 관련 글 <aside>를 한 개 둡니다.
<body> 바로 안에 <footer>를 한 개 둡니다.
내비게이션의 aria-label은 블로그 메뉴입니다.
작성 날짜의 datetime은 2026-07-28입니다.
제목 단계를 <h1>부터 순서대로 사용합니다.

작업 방법

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

입력 형식

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

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

출력 형식

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

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

참고

도움말: 먼저 header → main → footer를 만들고, main 안에 article → aside 순서로 채우세요.