<optgroup>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

* Some parts of this feature may have varying levels of support.

HTML<optgroup> 요소는<select> 요소의 옵션을 묶을 수 있습니다.

시도해 보기

<label for="dino-select">Choose a dinosaur:</label><select>  <optgroup label="Theropods">    <option>Tyrannosaurus</option>    <option>Velociraptor</option>    <option>Deinonychus</option>  </optgroup>  <optgroup label="Sauropods">    <option>Diplodocus</option>    <option>Saltasaurus</option>    <option>Apatosaurus</option>  </optgroup></select>

label {  display: block;  margin-bottom: 10px;}

콘텐츠 카테고리	없음.
가능한 콘텐츠	0개 이상의`<option>` 요소.
태그 생략	여는 태그는 필수입니다. 바로 뒤따르는 요소가 다른`<optgroup>`이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.
가능한 부모 요소	`<select>` 요소.
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLOptGroupElement`

참고 :<optgroup> 요소는 중첩할 수 없습니다.

특성

이 요소는전역 특성을 포함합니다.

disabled: 지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.
label: 옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.

예제

html

<select>  <optgroup label="Group 1">    <option>Option 1.1</option>  </optgroup>  <optgroup label="Group 2">    <option>Option 2.1</option>    <option>Option 2.2</option>  </optgroup>  <optgroup label="Group 3" disabled>    <option>Option 3.1</option>    <option>Option 3.2</option>    <option>Option 3.3</option>  </optgroup></select>