HTML optgroup 태그 사용법 | select 옵션 그룹화

홈 > 지식 > 프로그래밍 | 개발 지식과 코딩 학습 정보 >

<optgroup> 태그는 <select> 요소 내에서 옵션들을 그룹화 할 때 사용됩니다.
관련된 옵션들을 묶어 가독성과 사용성 을 높일 수 있습니다.

✅ 옵션 그룹 (optgroup) 사용법

<select>
    <optgroup label="어린이">
        <option value="5">5세</option>
        <option value="6">6세</option>
        <option value="7">7세</option>
    </optgroup>
    <optgroup label="청소년">
        <option value="13">13세</option>
        <option value="14">14세</option>
        <option value="15">15세</option>
    </optgroup>
    <optgroup label="성인">
        <option value="18">18세</option>
        <option value="20">20세</option>
        <option value="25">25세</option>
    </optgroup>
</select>

📌 설명

<optgroup label="그룹명">

• label 속성으로 그룹의 제목 을 설정합니다.
• <optgroup> 자체는 선택할 수 없고 , 내부의 <option>만 선택 가능합니다.

<option> 태그

• <optgroup> 내부에 배치합니다.
• value 속성을 사용하여 실제 데이터 값 을 저장합니다.
• 사용자는 <option>을 선택하지만 <optgroup>은 선택할 수 없습니다.

🎨 출력 예시 (렌더링)

-------------------
어린이
   5세
   6세
   7세
-------------------
청소년
   13세
   14세
   15세
-------------------
성인
   18세
   20세
   25세

✅ 활용 예시

• 연령 선택
• 지역 분류
• 상품 카테고리 선택 등에서 사용하기 좋습니다 🚀