fieldset과 legend로 폼 그룹 만들기

이번 단계에서 배울 내용

긴 폼에서는 서로 관련된 입력을 <fieldset>으로 묶을 수 있습니다. <legend>는 그 묶음 전체의 제목이며 <fieldset>의 첫 부분에 둡니다.

예를 들어 주소와 우편번호는 각각의 label뿐 아니라 배송지라는 공통 제목도 필요합니다.

예시

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

<fieldset>
  <legend>보호자 정보</legend>
  <label>이름 <input name="guardian_name"></label>
  <label>연락처 <input name="guardian_phone"></label>
</fieldset>

해야 할 일

주소와 우편번호 입력을 shipping이라는 하나의 <fieldset>으로 묶고, 그룹 제목을 배송지로 작성하세요.

완성 조건

• shipping이라는 id의 <fieldset>을 한 개 만듭니다.
• <fieldset> 바로 안에 <legend>를 한 개 둡니다.
• <fieldset> 안에 입력칸 두 개를 둡니다.
• 그룹 제목은 배송지입니다.
• 주소와 우편번호 입력에 각각 연결된 label이 있습니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 기존 두 <label>을 지우지 말고 <fieldset>의 여는 태그와 닫는 태그 사이로 옮기세요.