HTML <select> 태그, 옵션 선택 요소 만들기

HTML <select> 태그, 옵션 선택 요소 만들기

<select> 태그는 웹 페이지에서 드롭다운 메뉴를 만들 때 사용되는 HTML 요소입니다. 이를 통해 사용자는 미리 정의된 여러 옵션 중 하나를 선택할 수 있습니다. 본 가이드에서는 <select> 태그의 기본 구조부터 고급 기능까지, 다양한 사용 방법을 자세히 설명합니다.

 

 

목차

1. <select> 태그의 기본 구조
2. <option> 태그 사용법
3. 기본 속성 설명
4. 다중 선택 메뉴 만들기
5. 고급 스타일링과 CSS
6. JavaScript로 동적 제어하기
7. 실제 예제: 지역 선택 메뉴 만들기

 

<select> 태그의 기본 구조

<select> 태그는 <option> 태그를 자식 요소로 포함하여 옵션을 정의합니다. 아래는 간단한 드롭다운 메뉴의 예시입니다:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    

이 코드는 사용자가 선택할 수 있는 자동차 브랜드 목록을 보여주는 드롭다운 메뉴를 생성합니다.

 

 

<option> 태그 사용법

<option> 태그는 드롭다운 메뉴에서 선택 가능한 각 항목을 정의합니다. 주요 속성으로는 value와 selected가 있습니다.

• value: 선택된 값이 서버에 제출될 때 전달되는 데이터입니다.
• selected: 기본으로 선택된 항목을 설정할 때 사용됩니다.

예시:

<option value="bmw" selected>BMW</option>
    

위 코드는 BMW가 기본으로 선택된 상태로 표시됩니다.

 

 

기본 속성 설명

<select> 태그에는 여러 유용한 속성이 있습니다. 아래는 그 중 몇 가지 주요 속성에 대한 설명입니다:

• name: 드롭다운 메뉴의 이름을 지정하며, 폼 데이터를 제출할 때 사용됩니다.
• multiple: 다중 선택을 가능하게 합니다. 이 속성을 사용하면 사용자가 여러 개의 옵션을 선택할 수 있습니다.
• disabled: 드롭다운 메뉴를 비활성화하여 선택할 수 없도록 만듭니다.
• size: 드롭다운 메뉴에 표시되는 옵션의 개수를 설정합니다.

예시:

<select name="fruits" size="3">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>
    

위 코드는 3개의 옵션이 동시에 보이도록 설정된 드롭다운 메뉴를 생성합니다.

 

 

다중 선택 메뉴 만들기

<select> 태그에 multiple 속성을 추가하면 사용자가 여러 개의 옵션을 동시에 선택할 수 있습니다. 이를 활용하면 체크리스트 형태의 선택 메뉴를 만들 수 있습니다.

<select name="languages" multiple size="4">
  <option value="python">Python</option>
  <option value="javascript">JavaScript</option>
  <option value="java">Java</option>
  <option value="csharp">C#</option>
</select>
    

이 코드는 여러 프로그래밍 언어를 선택할 수 있는 다중 선택 메뉴를 생성합니다. Ctrl 키(Windows) 또는 Cmd 키(Mac)를 누른 상태로 옵션을 클릭하면 여러 개를 선택할 수 있습니다.

 

 

 

 

고급 스타일링과 CSS

<select> 태그는 기본적으로 브라우저마다 스타일이 다를 수 있지만, CSS를 사용하여 통일된 스타일을 적용할 수 있습니다. 특히, 옵션을 강조하거나, 선택 메뉴의 폭과 높이를 조절하는 데 유용합니다.

select {
    width: 200px;
    padding: 5px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

option {
    color: #333;
    background-color: #fff;
    padding: 5px;
}
    

위 스타일은 선택 메뉴의 폭을 넓히고 배경색과 텍스트 색상을 조정하여 가독성을 높인 예시입니다.

 

 

JavaScript로 동적 제어하기

JavaScript를 사용하면 <select> 태그의 동작을 동적으로 제어할 수 있습니다. 예를 들어, 새로운 옵션을 추가하거나 선택된 값을 가져오는 등의 작업을 쉽게 할 수 있습니다.

새로운 옵션 추가

var select = document.getElementById("mySelect");
var newOption = document.createElement("option");
newOption.value = "new";
newOption.text = "New Option";
select.add(newOption);
    

선택된 값 가져오기

var selectedValue = select.options[select.selectedIndex].value;
console.log(selectedValue);
    

위 코드는 선택된 옵션의 값을 콘솔에 출력하는 간단한 예제입니다.

 

 

실제 예제: 지역 선택 메뉴 만들기

마지막으로, 실전에서 자주 사용되는 지역 선택 메뉴를 만들어 보겠습니다. 사용자는 국가를 선택한 후, 해당 국가에 따라 도시 옵션이 동적으로 변경됩니다.

HTML 구조

<select id="country" onchange="updateCities()">
  <option value="korea">대한민국</option>
  <option value="japan">일본</option>
  <option value="usa">미국</option>
</select>

<select id="city">
  <option>도시를 선택하세요</option>
</select>
    

JavaScript 코드

function updateCities() {
    var country = document.getElementById("country").value;
    var city = document.getElementById("city");

    city.innerHTML = ""; // 기존 옵션 제거

    if (country === "korea") {
        var cities = ["서울", "부산", "대구"];
    } else if (country === "japan") {
        var cities = ["도쿄", "오사카", "교토"];
    } else if (country === "usa") {
        var cities = ["뉴욕", "LA", "시카고"];
    }

    cities.forEach(function(cityName) {
        var option = document.createElement("option");
        option.text = cityName;
        city.add(option);
    });
}
    

위 코드는 사용자가 국가를 선택할 때 해당 국가의 도시 목록을 동적으로 갱신하는 예제입니다. 이는 실제 웹 애플리케이션에서 매우 유용하게 활용될 수 있습니다.

 

 

결론

<select> 태그는 HTML 폼에서 매우 유용한 요소입니다. 기본적인 사용법부터 고급 JavaScript를 활용한 동적 변경까지 다양한 활용 방법을 살펴보았습니다. 이제 이 가이드를 참고하여 다양한 옵션 선택 요소를 자유롭게 구현할 수 있을 것입니다.