접근 가능한 상품 상세 페이지 만들기

이번 단계에서 배울 내용

상품 상세 페이지는 하나의 독립적인 상품 정보이므로 <article>로 묶을 수 있습니다. 상품 사진과 설명은 <figure>, 특징 목록은 <section>, 수량과 구매 동작은 <form>으로 구분합니다.

이미지 설명, 수량 label, 최소 주문 수량, 실제 제출 버튼까지 갖추면 다양한 사용자가 상품을 이해하고 주문할 수 있습니다.

예시

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

<article>
  <h1>무선 키보드</h1>
  <figure>
    <img src="keyboard.jpg" alt="흰색 무선 키보드">
    <figcaption>책상 위의 키보드</figcaption>
  </figure>
  <section><h2>특징</h2><ul><li>가벼운 무게</li></ul></section>
  <form>
    <label for="count">수량</label>
    <input id="count" type="number" min="1">
    <button type="submit">주문하기</button>
  </form>
</article>

해야 할 일

학습용 HTML 책의 상품 상세 페이지를 완성하세요. 상품 정보, 사진과 설명, 두 가지 특징, 최소 한 권부터 선택하는 수량 입력, 주문 버튼을 의미에 맞게 구성합니다.

완성 조건

• product라는 id의 <article>을 한 개 만듭니다.
• 상품 글 안의 <figure>에 이미지 한 개를 둡니다.
• 상품 특징 <section>의 목록 바로 안에 항목을 두 개 둡니다.
• 상품 폼 안에 quantity라는 id의 입력칸을 한 개 둡니다.
• 상품 폼 안에 type="submit"인 버튼을 한 개 둡니다.
• 수량 입력의 min 값은 1입니다.
• 제목 단계를 <h1>부터 순서대로 사용합니다.
• 상품 이미지에 내용을 설명하는 alt가 있습니다.
• 수량 label과 입력칸이 연결되어 있습니다.

작업 방법

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

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

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

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

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

도움말: 상품 article 안에 제목 → figure → 특징 section → 주문 form 순서로 작성하면 구조를 잡기 쉽습니다.