HTML의 <optgroup> 요소는 드롭다운 목록(<select>) 안에서 옵션들을 논리적인 그룹으로 묶을 때 사용합니다. 예를 들어, 하나의 드롭다운 목록 안에 학사 과정과 석·박사 과정을 각각 별도의 그룹으로 나누어 표시할 수 있습니다. 이렇게 하면 항목이 많은 목록이라도 사용자가 원하는 옵션을 훨씬 쉽게 찾을 수 있습니다.
<optgroup> 태그의 주요 속성
- disabled – 해당 옵션 그룹 전체를 비활성화하여 사용자가 선택할 수 없도록 지정합니다.
- label – 옵션 그룹에 표시될 제목(레이블)을 지정합니다. 이 레이블은 드롭다운 목록에서 선택할 수 없는 그룹 헤더로 나타납니다.
이제 <optgroup> 요소를 실제로 구현한 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <body> <h2>학력 사항</h2> <select> <optgroup label="학사 과정"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="석·박사 과정"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select> </body> </html>
실행 결과
코드 설명
위 예제에서는 두 개의 <optgroup>을 사용해 두 개의 섹션으로 구성된 드롭다운 목록을 만들었습니다. 이처럼 <select> 요소 내부에 <optgroup>을 배치하면 옵션들이 그룹별로 정리되어 표시됩니다.
<select> <optgroup label="Graduation"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="Postgraduation"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select>
여기서 <option> 요소들은 드롭다운 목록의 실제 선택 항목을 정의하며, 사용자는 각 옵션 그룹 안에서 원하는 항목을 하나 선택할 수 있습니다.
<option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option>
정리
<optgroup> 태그는 옵션이 많은 폼을 만들 때 사용자 경험을 크게 향상시키는 유용한 도구입니다. label 속성으로 그룹 이름을 지정하고, 필요하다면 disabled 속성으로 특정 그룹을 비활성화할 수 있다는 점만 기억하면 됩니다.