접근 가능한 비교 표 완성하기

이번 단계에서 배울 내용

비교 표에서는 맨 위 행이 열의 기준을 설명하고, 각 데이터 행의 첫 셀이 비교 대상의 이름이 됩니다. <thead>와 <tbody>로 두 부분을 나누고 헤더 셀의 scope를 지정하면 관계가 분명해집니다.

이번 문제에서는 앞서 배운 표 요소를 함께 사용해 완전한 요금제 비교 표를 만듭니다.

예시

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

<table>
  <caption>배송 방법 비교</caption>
  <thead>
    <tr>
      <th scope="col">방법</th>
      <th scope="col">기간</th>
      <th scope="col">비용</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">일반</th><td>3일</td><td>무료</td></tr>
  </tbody>
</table>

해야 할 일

Free와 Pro 요금제를 저장 공간과 DevBox 수로 비교하는 표를 완성하세요. 표 제목, 세 개의 열 제목, 두 개의 데이터 행을 모두 갖춰야 합니다.

완성 조건

• plans라는 id의 <table>을 한 개 만듭니다.
• 표 안에 <caption>을 한 개 둡니다.
• <thead> 안에 scope="col"인 열 제목을 세 개 만듭니다.
• <tbody> 안에 scope="row"인 행 제목을 두 개 만듭니다.
• <tbody> 안에 비교 행을 두 개 둡니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 먼저 3열짜리 제목 행을 만든 뒤, 같은 열 순서로 Free 행과 Pro 행을 작성하세요.