드롭다운과 선택 박스: <select>, <datalist>, <optgroup>으로 정교한 선택 메뉴 만들기

 

웹 페이지에서 사용자로부터 입력을 받을 때, 정해진 선택지 중 하나를 고르게 하는 기능은 매우 중요합니다. HTML은 이를 위해 다양한 태그를 제공합니다. 오늘은 가장 기본이 되는 <select>부터, 그룹화 도구인 <optgroup>, 그리고 검색 기능을 더한 듯한 <datalist>까지 상세히 알아보겠습니다.

1. 가장 기본이 되는 선택 창: <select>와 <option>

<select> 태그는 가장 전통적인 드롭다운 목록을 만듭니다. 사용자는 클릭하여 펼쳐진 목록 중 하나를 선택할 수 있습니다.

핵심 속성

• name: 서버로 전송될 데이터의 이름입니다.
• id: 라벨(<label>)과 연결하거나 CSS/JS에서 참조할 때 사용합니다.
• value: 사용자에게 보이는 텍스트가 아닌, 실제 서버로 전송되는 값입니다.
• selected: 페이지 로드 시 기본적으로 선택되어 있을 항목에 지정합니다.

기초 예제: 좋아하는 과일 선택하기

<label for="fruit-select">과일을 선택하세요:</label>
<select name="fruits" id="fruit-select">
    <option value="">--선택해 주세요--</option>
    <option value="apple">사과</option>
    <option value="banana" selected>바나나</option>
    <option value="orange">오렌지</option>
</select>

2. 선택지 그룹화하기: <optgroup>

선택지가 너무 많을 경우, 사용자는 원하는 항목을 찾기 어려워집니다. 이때 <optgroup>을 사용하면 관련된 항목끼리 제목을 붙여 묶을 수 있습니다.

핵심 포인트

• label: 그룹의 제목을 설정합니다. (사용자가 클릭할 수는 없습니다.)
• 사용자는 시각적으로 구분된 카테고리를 통해 정보를 더 빨리 인지합니다.

실전 예제: 지역별 도시 선택

<label for="city-select">거주 지역을 선택하세요:</label>
<select id="city-select" name="city">
    <optgroup label="서울특별시/경기도">
        <option value="seoul">서울</option>
        <option value="suwon">수원</option>
        <option value="incheon">인천</option>
    </optgroup>
    <optgroup label="경상도">
        <option value="busan">부산</option>
        <option value="daegu">대구</option>
        <option value="ulsan">울산</option>
    </optgroup>
    <optgroup label="전라도">
        <option value="gwangju">광주</option>
        <option value="jeonju">전주</option>
    </optgroup>
</select>

3. 자유로운 입력과 추천 목록: <datalist>

<datalist>는 <select>와 비슷해 보이지만 결정적인 차이가 있습니다. 사용자가 직접 텍스트를 입력할 수 있는 <input> 창에 추천 검색어 형식으로 목록을 보여줍니다.

특징

• 사용자가 목록에 없는 값을 직접 입력할 수 있습니다.
• 입력창에 타이핑을 하면 일치하는 항목만 필터링되어 나타납니다.
• <input> 태그의 list 속성과 <datalist>의 id를 연결하여 사용합니다.

활용 예제: 선호하는 프로그래밍 언어

<label for="browser-choice">사용 중인 브라우저를 입력하거나 선택하세요:</label>
<input list="browsers" id="browser-choice" name="browser" placeholder="브라우저 입력">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

4. 어떤 상황에 무엇을 써야 할까요?

효율적인 UX(사용자 경험)를 위해 다음 기준을 참고해 보세요.

구분<select><datalist>

제한 사항	오직 목록에 있는 것만 선택 가능	목록 외의 값도 자유롭게 입력 가능
선택지 수	보통 수준일 때 적합 (많으면 optgroup 필수)	매우 많을 때 검색/필터링 용도로 적합
모바일 환경	네이티브 선택 UI가 제공되어 편리함	키보드가 올라와야 하므로 단계가 늘어날 수 있음

꿀팁: 여러 개 선택하기 (multiple)

<select> 태그에 multiple 속성을 추가하면 Ctrl(또는 Cmd) 키를 누른 채 여러 항목을 동시에 선택할 수 있습니다. 이때는 드롭다운 형태가 아닌 목록 상자 형태로 표시됩니다.

<select name="skills" id="skill-select" multiple size="5">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="react">React</option>
    <option value="vue">Vue</option>
</select>

마치며

단순한 선택창이라도 데이터의 성격에 따라 적절한 태그를 사용하는 것이 중요합니다. 엄격한 데이터 관리가 필요하다면 <select>를, 사용자에게 편의성을 제공하면서도 자유도를 주고 싶다면 <datalist>를 활용해 보세요.

이러한 HTML 요소들을 적절히 조합하면 훨씬 더 전문적이고 친절한 웹 폼을 설계할 수 있습니다.