-
HTML 드롭다운 메뉴 (`<select>`)와 버튼 (`<button>`)
IT창고/HTML 2023. 7. 19. 13:32반응형HTML 드롭다운 메뉴 (
<select>
)와 버튼 (<button>
)HTML
<select>
요소는 드롭다운 메뉴를 생성하는 데에 사용됩니다.<button>
요소는 클릭 가능한 버튼을 생성하는 데에 사용됩니다. 이번 글에서는<select>
와<button>
을 사용한 드롭다운 메뉴와 버튼에 대해 자세히 알아보겠습니다.드롭다운 메뉴 (
<select>
)드롭다운 메뉴는 여러 개의 선택지 중에서 하나를 선택할 수 있는 메뉴를 생성합니다. 사용자는 메뉴를 클릭하여 선택지를 확인하고, 하나의 선택지를 선택할 수 있습니다.
아래는
<select>
를 사용하여 드롭다운 메뉴를 생성하는 예시입니다:<select name="city" id="city-select"> <option value="seoul">서울</option> <option value="newyork">뉴욕</option> <option value="paris">파리</option> <option value="tokyo">도쿄</option> </select>
위의 예시에서는
<select>
요소를 사용하여 드롭다운 메뉴를 생성하였고,<option>
요소를 사용하여 선택지를 작성하였습니다. 각<option>
요소의 value 속성을 통해 선택된 값(선택지)을 지정할 수 있습니다.버튼 (
<button>
)버튼은 사용자가 클릭할 수 있는 동작을 수행하기 위해 사용됩니다. HTML에서는
<button>
요소를 사용하여 버튼을 생성할 수 있습니다.아래는
<button>
을 사용하여 버튼을 생성하는 예시입니다:<button type="button">클릭하세요</button>
위의 예시에서는
<button>
요소를 사용하여 버튼을 생성하였고, type 속성을 "button"으로 설정하여 일반적인 버튼을 생성하였습니다.마무리
HTML의
<select>
요소를 사용하여 드롭다운 메뉴를 생성하고,<button>
요소를 사용하여 버튼을 생성할 수 있습니다. 드롭다운 메뉴는 여러 선택지 중 하나를 선택할 수 있도록 도와주고, 버튼은 사용자의 클릭 동작을 감지하여 특정 동작을 수행할 수 있습니다. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!반응형