웹사이트에서 회원가입, 설문조사, 검색 필터 등 다양한 기능을 구현할 때 사용자가 여러 선택지 중 하나를 고를 수 있도록 해야 하는 경우가 많습니다. 이때 사용하는 HTML 요소가 바로 select 태그와 option 태그입니다.
이 두 태그를 활용하면 드롭다운 형태의 선택 UI를 만들 수 있으며, 폼 입력에서 매우 중요한 역할을 합니다.
이번 글에서는 select 태그와 option 태그의 기본 사용법, 주요 속성, 그리고 실무에서 활용하는 방법까지 자세히 정리해보겠습니다.
select 태그란 무엇인가?
select 태그는 여러 선택지 중 하나 또는 여러 개를 선택할 수 있는 입력 요소입니다.
사용자가 클릭하면 드롭다운 목록이 나타나고, 그중 하나를 선택할 수 있습니다.
<select>
<option>선택1</option>
<option>선택2</option>
</select>
이 구조만으로도 기본적인 드롭다운 메뉴를 만들 수 있습니다.
option 태그란 무엇인가?
option 태그는 select 태그 안에서 각각의 선택 항목을 정의하는 태그입니다.
즉, select는 전체 목록을 만들고 option은 각각의 항목을 구성하는 역할을 합니다.
select와 option 기본 구조
<select name="fruit">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="orange">오렌지</option>
</select>
여기서 value는 실제 서버로 전달되는 값이며, 사용자에게는 option 태그 내부의 텍스트가 표시됩니다.
select 태그 주요 속성
name
폼 전송 시 데이터 이름을 지정합니다.
<select name="country"></select>
multiple
여러 개의 옵션을 선택할 수 있도록 합니다.
<select multiple>
<option>HTML</option>
<option>CSS</option>
</select>
size
한 번에 표시할 옵션 개수를 설정합니다.
<select size="3"></select>
option 태그 주요 속성
value
선택 시 서버로 전달되는 값입니다.
selected
기본 선택 값을 지정합니다.
<option value="apple" selected>사과</option>
disabled
선택할 수 없는 옵션으로 설정합니다.
<option disabled>선택 불가</option>
optgroup으로 그룹 만들기
옵션이 많을 경우 그룹으로 나눌 수 있습니다.
<select>
<optgroup label="과일">
<option>사과</option>
<option>바나나</option>
</optgroup>
<optgroup label="채소">
<option>당근</option>
<option>오이</option>
</optgroup>
</select>
이렇게 하면 사용자에게 더 보기 좋은 구조를 제공할 수 있습니다.
select 태그 스타일링
select 태그는 기본 스타일이 적용되어 있지만 CSS로 일부 수정이 가능합니다.
select {
width: 200px;
padding: 5px;
}
하지만 브라우저마다 기본 UI가 다르기 때문에 완전히 동일하게 꾸미는 것은 어렵습니다.
select와 input의 차이
select와 input은 모두 입력 요소지만 사용 목적이 다릅니다.
input
- 자유 입력
- 텍스트 입력
select
- 선택형 입력
- 정해진 값 중 선택
따라서 입력 방식에 따라 적절한 요소를 선택해야 합니다.
실무 활용 예시
국가 선택
<select name="country">
<option value="kr">한국</option>
<option value="us">미국</option>
</select>
카테고리 선택
<select name="category">
<option>공지사항</option>
<option>이벤트</option>
</select>
사용 시 주의할 점
기본값 설정
selected 속성을 활용하여 기본 선택값을 설정하는 것이 좋습니다.
의미 있는 value 값 사용
value 값은 서버 처리에 중요한 역할을 하므로 명확하게 설정해야 합니다.
접근성 고려
label 태그와 함께 사용하는 것이 접근성에 더 좋습니다.
select 태그와 SEO
select 태그는 SEO에 직접적인 영향을 주지는 않지만, 사용자 경험 측면에서는 중요한 요소입니다.
- 입력 편의성 증가
- 오류 감소
- 사용자 만족도 향상
마무리
select 태그와 option 태그는 HTML 폼에서 매우 중요한 요소입니다.
정리하면 다음과 같습니다.
- select는 선택 목록을 만드는 태그이다.
- option은 각각의 선택 항목이다.
- 다양한 속성을 활용하여 기능을 확장할 수 있다.
웹사이트를 제작할 때 select 태그를 적절히 활용하면 더 편리한 사용자 경험을 제공할 수 있습니다.