Mini Project. 설문조사 양식 만들기(HTML:1일차 과제)

프로젝트

Mini Project. 설문조사 양식 만들기(HTML:1일차 과제)

Chansman 2025. 3. 28. 17:42

HTML을 사용하여 설문조사 양식을 만드는 과정을 단계별로 안내합니다. 기본적인 폼 구조를 설정하고, 시맨틱 태그인 header, main, footer를 사용하여 콘텐츠를 구분합니다. input, radio, checkbox, textarea 등의 다양한 입력 요소를 활용하여 설문조사 양식을 완성하는 방법을 배울 수 있습니다.

✏️ 1. 설문조사 양식 만들기 단계

🔹 프로젝트 개요

목표: 설문조사 양식은 개인 정보, 설문, 기타 의견 등의 항목으로 나누어집니다.
시맨틱 태그를 사용하여 각 부분을 나누고, input 요소들을 사용하여 데이터를 입력받습니다.

✅ 구조

헤더: header 태그로 페이지 상단을 구성
메인 콘텐츠: main 태그로 설문과 입력 영역을 정의
푸터: footer 태그로 맺음말 또는 저작권 정보 제공

✏️ 2. 설문조사 양식 구조 및 필드 설정

🔹 폼 구조

설문조사 양식은 3개의 필드셋으로 나누어집니다:
1. 개인 정보
2. 설문
3. 기타 의견

✅ 필드셋 사용

필드셋(fieldset) 태그는 입력 요소들을 그룹화하여 관리하는 데 유용합니다.
각 필드셋은 **범례(legend)**로 제목을 추가하여 구분합니다.

✅ 예시

<fieldset>
  <legend>개인 정보</legend>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" placeholder="이메일을 입력하세요">
</fieldset>

📊 3. 설문조사에서의 입력 요소 활용

🔹 라디오 버튼 (Radio button)

라디오 버튼은 하나의 질문에 대해 하나의 선택지만 선택할 수 있도록 하는 입력 요소입니다.
name 속성을 동일하게 설정하여 여러 라디오 버튼을 하나의 그룹으로 묶습니다.

✅ 예시

<fieldset>
  <legend>연령대</legend>
  <input type="radio" id="age10" name="age" value="10대">
  <label for="age10">10대</label>
  <input type="radio" id="age20" name="age" value="20대">
  <label for="age20">20대</label>
  <input type="radio" id="age30" name="age" value="30대">
  <label for="age30">30대</label>
</fieldset>

🔹 체크박스 (Checkbox)

체크박스는 여러 개의 선택지를 선택할 수 있는 입력 요소입니다.
name 속성을 동일하게 설정하여 체크박스를 하나의 질문으로 묶을 수 있습니다.

✅ 예시

<fieldset>
  <legend>학원 선택 기준</legend>
  <input type="checkbox" id="location" name="academy" value="위치">
  <label for="location">위치</label>
  <input type="checkbox" id="fee" name="academy" value="학원비">
  <label for="fee">학원비</label>
  <input type="checkbox" id="instructor" name="academy" value="강사">
  <label for="instructor">강사</label>
</fieldset>

📝 4. 설문조사 양식 만들기 과정

🔹 기타 의견 받기

<textarea> 태그를 사용하여 여러 줄의 텍스트를 입력받을 수 있습니다.
**rows**와 cols 속성으로 텍스트 영역의 크기를 설정합니다.

✅ 예시

<fieldset>
  <legend>기타 의견</legend>
  <textarea id="comments" name="comments" rows="4" cols="50" placeholder="기타 의견을 작성하세요"></textarea>
</fieldset>

🔹 제출 버튼

<button> 태그를 사용하여 제출 버튼을 생성합니다.

✅ 예시

<button type="submit">제출</button>

✏️ 5. 설문조사 양식의 구성 및 과제 안내

🔹 폼 요소 구성

<form> 태그로 설문조사 양식을 감싸고, **action**과 method 속성을 사용하여 데이터를 서버로 전송할 준비를 합니다.
name 속성을 활용하여 각 입력 항목을 구별하고, 라디오 버튼과 체크박스의 선택을 제한하거나 허용합니다.

🔹 과제

라디오 버튼과 체크박스 중 하나를 선택하여 자유로운 질문을 추가하고, 해당 선택지를 폼에 적용하는 연습을 합니다.

🚩 6. 결론

폼 구성: <form>, <fieldset>, <legend> 등의 태그를 활용하여 설문조사 양식을 체계적으로 구성할 수 있습니다.
입력 요소 활용: radio, checkbox, textarea 등을 사용하여 다양한 형태의 질문을 처리할 수 있습니다.
name 속성: 라디오 버튼과 체크박스의 그룹화에 사용되며, 폼의 정확한 처리에 중요한 역할을 합니다.