HTML 드롭다운 메뉴 (`<select>`)와 버튼 (`<button>`)

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의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!