HTML 요소를 올바르게 중첩하기

이번 단계에서 배울 내용

HTML 요소 안에 다른 요소를 넣는 것을 중첩이라고 합니다. 바깥 요소는 부모, 그 안에 바로 들어간 요소는 자식입니다.

<article>은 하나의 독립적인 글이나 카드를 묶을 때 사용합니다. class 속성은 비슷한 역할이나 모양을 가진 여러 요소를 그룹으로 구분할 때 사용합니다.

예시

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

<article class="notice">
  <h1>공지사항</h1>
  <p>새 소식을 확인하세요.</p>
</article>

해야 할 일

준비된 제목과 문단을 card라는 클래스를 가진 하나의 <article> 안으로 옮기세요. 제목과 문단은 다른 요소로 한 번 더 감싸지 말고 <article>의 바로 아래에 둡니다.

완성 조건

• class="card"가 지정된 <article>을 한 개 만듭니다.
• HTML 카드 제목을 <article>의 바로 아래에 <h1>으로 둡니다.
• 요소를 올바르게 중첩합니다. 문단을 <article>의 바로 아래에 둡니다.
• 페이지의 가장 중요한 제목은 <h1>부터 시작합니다.

작업 방법

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

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

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

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

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

도움말: 먼저 <article>의 여는 태그와 닫는 태그를 만든 다음, 기존 제목과 문단을 그 사이로 옮기세요.