드롭다운과 체크박스

약 5분

본문 듣기

드롭다운과 체크박스 (고급 개념 > HTML 폼)

안녕하세요, 여러분! 이번 강의에서는 드롭다운과 체크박스에 대해 배워볼 것입니다. 이 폼 요소들은 웹사이트에서 사용자의 입력을 받는 데 매우 유용합니다. 예를 들어, 사용자에게 여러 선택지를 제공하고자 할 때 드롭다운을 사용하고, 여러 항목 중에서 선택하도록 할 때 체크박스를 사용합니다.

이제 드롭다운과 체크박스를 하나씩 살펴보겠습니다. 우선 HTML 드롭다운을 만드는 방법부터 시작하겠습니다.

코드 html

<select name="fruits">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="orange">오렌지</option>
</select>

위 코드는 드롭다운 메뉴를 생성합니다. <select> 태그는 드롭다운 메뉴를 정의하고, 각각의 <option> 태그는 사용자가 선택할 수 있는 항목을 나타냅니다. 사용자가 선택한 값은 name 속성인 'fruits'로 묶여 전송될 수 있습니다.

이제 이 메뉴가 어떻게 작동하는지 VS Code에서 실습해보세요. 위 코드를 HTML 파일에 추가하고, 브라우저에서 열어보면 드롭다운 메뉴가 나타날 것입니다. 어떤 과일을 선택할 수 있을까요?

다음으로 체크박스에 대해 알아보겠습니다. 체크박스는 사용자가 여러 개의 옵션을 선택할 수 있도록 도와주는 기본적인 폼 요소입니다.

코드 html

<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">사과</label><br>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">바나나</label><br>
<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">오렌지</label><br>

이 코드는 세 가지 과일에 대한 체크박스를 생성합니다. <input> 태그의 type 속성을 'checkbox'로 설정하면 체크박스를 만들 수 있습니다. <label> 태그는 체크박스에 대한 설명을 추가합니다. 사용자가 체크박스를 클릭하면 이들 항목 중 하나 이상을 선택할 수 있게 됩니다.

VS Code에서 이 코드를 테스트해보고 여러 과일을 선택해 보세요. 여러 항목을 선택할 수 있는 재미를 느껴보시길 바랍니다!

이번 강의의 핵심 요약: 드롭다운과 체크박스는 웹 폼에서 사용자 입력을 받기 위한 유용한 도구입니다. 드롭다운은 여러 선택지 중 하나를 선택할 때 적합하고, 체크박스는 여러 항목 선택 시 유용합니다.

실습 문제: 아래의 요구 사항을 충족하는 HTML 코드를 작성해보세요.

드롭다운 메뉴를 사용해 선호하는 음료를 선택하도록 합니다.
체크박스를 사용해 선호하는 간식을 선택하도록 하고, 각각의 체크박스에 라벨을 추가합니다.

마지막으로, 개인 프로젝트를 시작합니다! 자기소개 페이지를 만들어보세요. 자신의 이름, 나이, 직업을 입력할 수 있는 드롭다운과 체크박스를 포함해보세요. 이 프로젝트를 통해 오늘 배운 내용을 실제로 적용해볼 수 있습니다.

여러분의 창의력을 발휘하고, 이 프로젝트를 통해 자신만의 멋진 자기소개 페이지를 만들어 보세요! 그럼 다음 시간에 만나요!

드롭다운과 체크박스

드롭다운과 체크박스 (고급 개념 > HTML 폼)

댓글 0