HTML 드롭다운 목록 생성 방법 | 웹 개발 튜토리얼

소개

HTML Select 요소는 사용자가 주어진 목록에서 하나 이상의 옵션을 선택할 수 있도록 드롭다운 목록을 생성하는 데 사용됩니다. 이 랩에서는 HTML Select 태그를 사용하여 사용자가 선택할 수 있는 항목 목록을 만드는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

Select 요소 생성하기

Select 요소를 생성하려면, 여는 태그와 닫는 태그를 사용하여 HTML Select 태그를 사용합니다. 다음은 간단한 select 요소를 생성하는 예시입니다.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

위 코드는 Volvo, Saab, Opel 및 Audi 의 네 가지 옵션을 가진 간단한 select 요소를 생성합니다.

Select 요소에 속성 추가하기

사용자를 위해 Select 요소에 속성을 추가하여 더욱 상호 작용적으로 만들 수 있습니다. 다음은 HTML Select 요소의 몇 가지 중요한 속성입니다.

A: Size 속성

size 속성은 한 번에 표시되어야 하는 옵션의 수를 지정합니다. 다음은 예시입니다.

<select size="3">
  <!-- three options visible by default -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B: Name 속성

Name 속성은 select 요소에 이름을 할당합니다. 다음은 예시입니다.

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C: Multiple 속성

multiple 속성은 사용자가 동시에 여러 옵션을 선택할 수 있도록 합니다. 다음은 예시입니다.

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

옵션 정의하기

option 태그를 사용하여 select 요소에 원하는 수만큼 옵션을 추가할 수 있습니다. 다음은 예시입니다.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

보시다시피, 우리는 네 개의 옵션을 정의했으며 각 옵션에는 value 속성이 있습니다. value 속성은 각 옵션을 고유한 값과 연결하는 데 사용할 수 있습니다.

옵션 그룹 사용하기

<optgroup> 태그 아래에서 옵션을 그룹화할 수 있습니다. 이렇게 하면 select 요소가 더 체계적이고 읽기 쉬워집니다. 그룹화된 옵션을 사용하는 방법은 다음과 같습니다.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

기본값 설정하기

페이지가 로드될 때 표시될 기본값을 지정할 수 있습니다. 기본값을 설정하는 방법은 다음과 같습니다.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

이 예제에서 "Opel" 옵션이 기본적으로 선택됩니다.

요약

이 랩에서는 HTML Select 태그를 사용하여 드롭다운 목록을 만드는 방법, Select 태그와 함께 사용할 수 있는 다양한 속성, 옵션을 정의하는 방법, 그룹화된 옵션을 사용하는 방법, 그리고 기본값을 생성하는 방법을 배웠습니다. 이러한 기술을 통해 사용자가 웹사이트와 쉽게 상호 작용할 수 있도록 돕는 더 발전된 select 요소를 만들 수 있습니다.