HTML <optgroup> 태그란?
HTML의 <optgroup> 태그는 드롭다운 목록(<select>) 안에서 서로 관련된 옵션들을 하나의 그룹으로 묶어 주는 역할을 합니다. 옵션 개수가 많아질수록 사용자가 모든 선택지를 일일이 훑어보기 어려워지는데, 항목을 카테고리별로 분류해 두면 원하는 옵션을 훨씬 빠르고 직관적으로 찾을 수 있습니다.
예를 들어 국가별 도시 목록, 제품 카테고리별 상품 목록처럼 계층 구조를 가진 데이터를 드롭다운으로 보여줄 때 특히 유용합니다.
<optgroup> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| disabled | disabled | 해당 옵션 그룹 전체를 비활성화합니다. 그룹에 속한 모든 옵션은 사용자가 선택할 수 없으며, 포커스도 받지 못하고 Tab 키로 이동할 때도 건너뛰어집니다. |
| label | 텍스트 | <optgroup> 그룹에 표시될 제목(레이블)을 지정합니다. 브라우저 화면에는 이 텍스트가 굵은 글씨의 그룹 헤더 형태로 나타나며, 실질적으로 필수 속성입니다. |
옵션 그룹 만들기 예제
다음 코드를 실행하면 'India'와 'USA'라는 두 개의 그룹으로 나뉜 드롭다운 목록을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML optgroup Tag</title> </head> <body> <select> <optgroup label = "India"> <option value = "mumbai">Mumbai</option> <option value = "delhi">Delhi</option> </optgroup> <optgroup label = "USA"> <option value = "florida">Florida</option> <option value = "newyork">New York</option> </optgroup> </select> </body> </html>
정리
<optgroup> 태그는 별도의 JavaScript 없이 순수 HTML만으로 드롭다운 목록을 체계적으로 구성할 수 있는 간단하면서도 강력한 도구입니다. label 속성으로 그룹 제목을 반드시 지정하고, 필요에 따라 disabled 속성을 활용해 특정 그룹 전체를 선택 불가 상태로 만들 수 있습니다. 모든 최신 브라우저에서 기본적으로 지원되므로 호환성 걱정 없이 사용할 수 있습니다.