드롭다운
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 43번째.
HTML에서 드롭다운(dropdown) 메뉴는 사용자가 요소를 클릭하거나 마우스를 올렸을 때 나타나는 항목 목록입니다. 드롭다운은 일반적으로 선택 목록을 간결하게 표시하는 데 사용됩니다. 드롭다운을 만들려면 개별 항목을 위한 <option> 태그와 함께 <select> 태그를 사용합니다.
HTML에서 드롭다운을 만들기 위한 기본 구문은 다음과 같습니다:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: 드롭다운 메뉴를 정의하는 태그입니다.
name: 드롭다운에 이름을 부여하는 속성으로, 폼이 제출될 때 선택된 값을 식별하는 데 사용됩니다.
<option>: 드롭다운 목록의 항목을 정의하는 태그입니다.
value: 옵션과 연관된 값을 지정하는 속성입니다. 이 값은 폼이 제출될 때 서버로 전송됩니다.
Option text: 각 옵션에 대해 드롭다운 목록에 표시되는 텍스트입니다.
세 가지 옵션이 있는 드롭다운을 만드는 방법의 예시는 다음과 같습니다:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>이 예제에서는 이름이 "colors"인 드롭다운과 Red, Green, Blue 세 가지 옵션이 있습니다.
챌린지
쉬움드롭다운 메뉴가 포함된 폼이 있는 HTML 문서를 만드세요. 폼은 다음 요소를 포함해야 합니다:
- 이름이 "fruits"인 드롭다운.
- 드롭다운은 다음 값과 텍스트를 가진 네 개의 옵션을 가져야 합니다:
- 값: "apple", 텍스트: "Apple"
- 값: "banana", 텍스트: "Banana"
- 값: "orange", 텍스트: "Orange"
- 값: "grape", 텍스트: "Grape"
치트 시트
HTML에서 드롭다운 메뉴를 만들려면, 개별 항목을 위한 <option> 태그와 함께 <select> 태그를 사용하세요:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: 드롭다운 메뉴를 정의합니다name: 폼이 제출될 때 드롭다운을 식별합니다<option>: 각 드롭다운 항목을 정의합니다value: 옵션이 선택되었을 때 서버로 전송되는 값입니다- 옵션 텍스트: 드롭다운에 표시되는 가시적인 텍스트입니다
색상 옵션이 있는 드롭다운 예시:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
