이미지와 설명을 figure로 묶기

이번 단계에서 배울 내용

<figure>는 사진, 그림, 코드처럼 본문에서 하나의 자료로 다루는 내용을 묶습니다. <figcaption>은 그 자료의 제목이나 설명입니다.

이미지와 설명을 같은 <figure> 안에 두면 두 내용이 서로 연결되어 있음을 문서 구조로 나타낼 수 있습니다.

예시

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

<figure>
  <img src="chart.png" alt="월별 방문자 수 막대그래프">
  <figcaption>2026년 상반기 방문자 변화</figcaption>
</figure>

해야 할 일

온라인 수업 이미지와 온라인 수업 화면 예시라는 설명을 하나의 <figure>로 묶으세요. 묶음에는 class-preview라는 id를 지정합니다.

완성 조건

• class-preview라는 id의 <figure>를 한 개 만듭니다.
• <figure> 바로 안에 이미지 한 개를 둡니다.
• <figure> 바로 안에 <figcaption> 한 개를 둡니다.
• <figcaption>에 온라인 수업 화면 예시를 작성합니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.
• 이미지에 내용을 설명하는 alt가 있습니다.

작업 방법

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

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

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

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

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

도움말: <figure>의 여는 태그와 닫는 태그 사이에 <img>와 <figcaption>을 함께 넣습니다.