optgroup element - by. UXKM

2025-05-16

요약 설명
<optgroup> 요소는 <select> 요소 내부에서 관련 있는 <option> 항목들을 그룹으로 묶어 구조적으로 구분할 수 있도록 해주는 시맨틱 태그입니다.
label 속성을 사용해 각 그룹의 제목을 지정하며, 사용자에게 선택 항목들의 분류 기준을 시각적으로 제공하는 역할을 합니다. <optgroup> 안에는 <option>만 포함할 수 있고, 다른 <optgroup>을 중첩할 수는 없습니다.
많은 항목 중 카테고리별로 정리된 선택지를 제공하고자 할 때 유용하며, 사용성과 가독성을 높이는 데 도움이 됩니다.

주요 역할 및 특징

옵션을 논리적으로 그룹화
<optgroup>을 사용하면 <select> 내에서 비슷한 성격의 옵션을 그룹으로 묶을 수 있습니다.
레이블(label) 속성으로 그룹 이름 표시
- <optgroup>은 반드시 label 속성을 가져야 하며, 해당 그룹의 제목을 지정하는 역할을 합니다.
- 브라우저는 label 값을 해당 옵션 그룹의 제목으로 표시합니다.
disabled 속성으로 그룹을 비활성화 가능
폼 데이터에는 영향을 주지 않음
- <optgroup> 자체는 선택되지 않으며, 폼 데이터를 전송할 때 영향을 주지 않습니다.
- 실제로 선택되는 값은 여전히 <option> 요소입니다.
<optgroup> 단독으로 사용 불가
- <optgroup> 요소는 반드시 <select> 요소 내에서 <option> 목록을 그룹화 하는 용도로 사용해야 합니다.
- <optgroup> 요소 안에는 <option> 요소만 포함할 수 있습니다.
접근성을 향상시킴
스크린 리더가 그룹 이름을 먼저 읽어주므로, 사용자가 더 쉽게 옵션을 이해할 수 있습니다.

CSS 기본 값

<optgroup> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							optgroup {
								display: block;
								font-weight: bold;
							}

기본 문법

							<select name="food">
								<optgroup label="과일"> <!-- 옵션을 그룹화 -->
									<option value="apple">사과</option>
									<option value="banana">바나나</option>
								</optgroup>
								<optgroup label="채소"> <!-- 옵션을 그룹화 -->
									<option value="carrot">당근</option>
									<option value="lettuce">상추</option>
								</optgroup>
							</select>

속성

[label] 필수 <optgroup label="값">

해당 <optgroup>에 속하는 옵션들의 그룹명을 지정합니다. 이 값은 브라우저에서 옵션 목록을 표시할 때 그룹의 제목으로 사용됩니다.
<optgroup> 자체는 선택되지 않으며, 폼 데이터를 전송할 때 영향을 주지 않습니다.

								<optgroup label="옵션 그룹의 제목">

[disabled] Boolean - 선택 사항 <optgroup disabled>

<optgroup> 내의 모든 <option> 요소를 비활성화하여 선택할 수 없도록 합니다.
사용자가 해당 그룹의 옵션을 선택하지 못하도록 제한할 때 활용됩니다.

								<optgroup label="옵션 그룹의 제목" disabled>

예제

<optgroup> 요소는 단독으로 사용하면 의미가 없으며, 반드시 <select> 요소 내에서 <option> 목록을 그룹화하는 용도로 사용해야 합니다.
이전 섹션(select element)에서 <optgroup> 요소의 사용 예제를 확인할 수 있습니다.

select element 예제 비로가기

주의사항

<optgroup>에는 반드시 label 속성이 있어야 합니다. label 속성이 없으면 브라우저에서 그룹 제목을 표시하지 않습니다.
<optgroup> 안에 또 다른 <optgroup>을 포함할 수 없습니다.
<optgroup>은 그룹을 구분하는 역할만 하며, <optgroup>은 그룹 자체는 선택할 수 없습니다. 선택 가능한 요소는 항상 <option> 요소입니다.
<optgroup> 요소에 disabled 속성을 사용하면 그룹 내 모든 옵션이 비활성화됩니다.
개별 <option>만 비활성화하려면 disabled 속성을 <option>에 직접 적용해야 합니다.