17981 | HTML 종합 학습 포털 완성하기

문제 설명

이번 단계에서 배울 내용

학습 포털은 한 페이지 안에 메뉴, 새 소식, 강좌 비교 표, 문의 폼, 보조 안내, 바닥글처럼 다양한 콘텐츠를 담습니다. 각 영역의 의미와 부모·자식 관계를 지키면 내용이 많아져도 문서가 이해하기 쉬워집니다.

마지막 문제에서는 지금까지 배운 제목, 목록, article, time, 표, 폼, 랜드마크, 접근성 속성을 하나의 문서에서 함께 사용합니다.

예시

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

<header>
  <h1>과학 학습 포털</h1>
  <nav aria-label="주요 메뉴"><ul><li>강좌</li><li>소식</li></ul></nav>
</header>
<main>
  <section><h2>새 소식</h2><article><time datetime="2026-03-10">3월 10일</time></article></section>
  <section><h2>강좌 비교</h2><table><caption>강좌 안내</caption></table></section>
  <section><h2>문의</h2><form><input required><textarea required></textarea></form></section>
</main>
<aside>학습 도움말</aside>
<footer>문의처</footer>

해야 할 일

HTML 학습 포털을 완성하세요. 세 항목의 주요 메뉴, 날짜가 있는 새 소식, 세 열의 강좌 비교 표, 필수 제목과 내용 입력이 있는 문의 폼, 보조 안내와 바닥글을 하나의 올바른 문서로 구성합니다.

완성 조건

머리말 메뉴의 목록 바로 안에 항목을 세 개 둡니다.
news 영역의 <article> 안에 <time>을 한 개 둡니다.
plans 표 안에 <caption>을 한 개 둡니다.
plans 표에 scope="col"인 열 제목을 세 개 둡니다.
contact 폼 안에 필수 입력칸을 한 개 둡니다.
contact 폼 안에 필수 여러 줄 입력칸을 한 개 둡니다.
<body> 바로 안에 <aside>를 한 개 둡니다.
<body> 바로 안에 <footer>를 한 개 둡니다.
내비게이션의 aria-label은 주요 메뉴입니다.
제목 단계를 <h1>부터 순서대로 사용합니다.
문의 입력칸과 여러 줄 입력칸에 연결된 label이 있습니다.

작업 방법

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

입력 형식

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

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

출력 형식

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

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

참고

도움말: header → main → aside → footer 골격을 먼저 만든 다음 main 안에 소식, 강좌, 문의 section을 하나씩 채우세요.