체크박스와 라디오 버튼 구성하기

이번 단계에서 배울 내용

체크박스(type="checkbox")는 여러 항목을 동시에 고를 수 있을 때 사용합니다. 라디오 버튼(type="radio")은 여러 선택지 중 하나만 고를 때 사용하며, 같은 그룹의 name 값을 같게 작성합니다.

<fieldset>은 관련 선택지를 묶고 <legend>는 그 그룹의 질문을 알려 줍니다.

예시

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

<fieldset>
  <legend>좋아하는 색을 모두 고르세요</legend>
  <label><input type="checkbox" name="color" value="blue"> 파랑</label>
  <label><input type="checkbox" name="color" value="green"> 초록</label>
</fieldset>

해야 할 일

관심 과목 HTML, CSS는 동시에 고를 수 있는 체크박스로 만드세요. 난이도 입문, 심화는 하나만 고를 수 있는 라디오 버튼으로 만들고 두 그룹을 각각 제목이 있는 영역으로 묶습니다.

완성 조건

• 체크박스를 두 개 만듭니다.
• name="level"인 라디오 버튼을 두 개 만듭니다.
• 선택지 그룹을 <fieldset> 두 개로 나눕니다.
• 각 그룹에 <legend>를 하나씩, 모두 두 개 작성합니다.
• 각 선택 입력에는 연결된 <label>이 있습니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 체크박스 그룹과 라디오 그룹을 먼저 나눈 뒤 각 선택지를 <label>로 감싸면 연결하기 쉽습니다.