HTML <optgroup> 태그 – 올바른 이해와 사용 방법

`<optgroup>` 태그의 정의 및 사용법

<optgroup> 태그는
<select> 태그의 공통 레이블(이름)이 있는 <option> 태그의 그룹을 나타냅니다.

이 태그로 관련된 <option> 태그들을 묶어 그룹화하면, 사용자에게 더욱 체계적인 옵션 목록을 제공할 수 있습니다.

예를 들어, 국가 옵션 목록에서 대륙별로 옵션을 그룹화하는 경우에 유용합니다.

HTML

<label for="country">국가 선택</label>
<select id="country">
    <optgroup label="아시아">
        <option value="korea">한국</option>
        <option value="japan">일본</option>
        <option value="china">중국</option>
    </optgroup>
    <optgroup label="유럽">
        <option value="uk">영국</option>
        <option value="germany">독일</option>
        <option value="france">프랑스</option>
    </optgroup>
</select>

관련 속성 사용하기

<optgroup> 태그는 모든 글로벌 속성을 사용할 수 있습니다.
그리고, <optgroup>에서 사용되는 관련 속성이 있습니다. 다음의 속성을 추가로 지원합니다.

optgroup 태그의 관련 속성
속성	설명
`label`	옵션 그룹의 레이블(이름)을 지정합니다. 이 속성은 필수입니다.
`disabled`	지정한 경우 모든 하위 옵션을 비활성화하여 선택할 수 없게 만듭니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`label` 속성

옵션 그룹의 레이블(이름)을 지정합니다. 이 속성은 필수입니다.

HTML

<label for="fruits" style="display: block;">과일을 선택하세요.</label>
<select id="fruits">
    <optgroup label="감귤류">
        <option value="orange">오렌지</option>
        <option value="lemon">레몬</option>
        <option value="lime">라임</option>
    </optgroup>
    <optgroup label="베리류">
        <option value="strawberry">딸기</option>
        <option value="blueberry">블루베리</option>
        <option value="raspberry">라즈베리</option>
    </optgroup>
    <optgroup label="열대과일">
        <option value="mango">망고</option>
        <option value="pineapple">파인애플</option>
        <option value="banana">바나나</option>
    </optgroup>
    </select>

알아두세요!
사용자가 <optgroup> 태그를 옵션의 항목처럼 선택할 방법은 없습니다.
옵션 항목인 <option> 태그만 선택할 수 있습니다. <optgroup> 태그는 옵션 요소 그룹에 대한 레이블(이름)을 제공할 뿐입니다.

`disabled` 속성

지정한 경우 모든 하위 옵션을 비활성화하여 선택할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML

<label for="fruits" style="display: block;">과일을 선택하세요.</label>
<select id="fruits">
    <optgroup label="감귤류" disabled> <!-- 모든 하위 옵션을 비활성화 -->
        <option value="orange">오렌지</option>
        <option value="lemon">레몬</option>
        <option value="lime">라임</option>
    </optgroup>
    <optgroup label="베리류">
        <option value="strawberry">딸기</option>
        <option value="blueberry">블루베리</option>
        <option value="raspberry">라즈베리</option>
    </optgroup>
    <optgroup label="열대과일">
        <option value="mango">망고</option>
        <option value="pineapple">파인애플</option>
        <option value="banana">바나나</option>
    </optgroup>
    </select>

<select>가 활성화 되어 컨트롤에 드롭다운 목록이 표시되는 경우 대부분의 브라우저는 이 속성을 포함한 옵션을 회색처리합니다. 그리고, 사용자도 이 옵션을 선택할 수 없습니다.

기술적인 문법 요약

optgroup 태그의 기술적인 구문 요약
허용되는 콘텐츠	0개 이상의 `<option>`
가능한 부모 요소	`<select>`
암시적인 `role` 속성 값	`group`
허용된 `role` 속성 값	없음