HTML5 Optgroup 태그 사용법

1. Optgroup 태그란?

Optgroup 태그는 HTML 문서에서 `select` 요소 내의 옵션들을 논리적으로 그룹화하는 데 사용되는 태그입니다. 관련된 옵션들을 카테고리별로 구분하여 사용자가 더 쉽게 선택할 수 있도록 도와주며, 드롭다운 메뉴의 구조를 명확하게 만듭니다.

2. 기본 구조

<div class="form-group">
    <label for="country">국가 선택</label>
    <select id="country" name="country">
        <optgroup label="아시아">
            <option value="kr">대한민국</option>
            <option value="jp">일본</option>
            <option value="cn">중국</option>
        </optgroup>
        <optgroup label="유럽">
            <option value="uk">영국</option>
            <option value="fr">프랑스</option>
            <option value="de">독일</option>
        </optgroup>
    </select>
</div>

<div class="form-group">
    <label for="language">프로그래밍 언어</label>
    <select id="language" name="language" multiple>
        <optgroup label="프론트엔드">
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="js">JavaScript</option>
        </optgroup>
        <optgroup label="백엔드">
            <option value="python">Python</option>
            <option value="java">Java</option>
            <option value="php">PHP</option>
        </optgroup>
    </select>
</div>

3. 자주 사용되는 속성

4. 실제 사용 예제

<form class="registration-form">
    <div class="form-group">
        <label for="location" class="required">지역 선택</label>
        <select id="location" name="location" required>
            <option value="">선택하세요</option>
            <optgroup label="서울">
                <option value="gangnam">강남구</option>
                <option value="mapo">마포구</option>
                <option value="jongno">종로구</option>
            </optgroup>
            <optgroup label="경기">
                <option value="suwon">수원시</option>
                <option value="seongnam">성남시</option>
                <option value="yongin">용인시</option>
            </optgroup>
        </select>
    </div>

    <div class="form-group">
        <label for="skills">보유 기술</label>
        <select id="skills" name="skills" multiple size="5">
            <optgroup label="프론트엔드">
                <option value="html5">HTML5</option>
                <option value="css3">CSS3</option>
                <option value="javascript">JavaScript</option>
                <option value="react">React</option>
                <option value="vue">Vue.js</option>
            </optgroup>
            <optgroup label="백엔드">
                <option value="nodejs">Node.js</option>
                <option value="python">Python</option>
                <option value="java">Java</option>
                <option value="php">PHP</option>
            </optgroup>
            <optgroup label="데이터베이스">
                <option value="mysql">MySQL</option>
                <option value="mongodb">MongoDB</option>
                <option value="postgresql">PostgreSQL</option>
            </optgroup>
        </select>
    </div>

    <div class="form-group">
        <label for="experience">경력</label>
        <select id="experience" name="experience">
            <option value="">선택하세요</option>
            <optgroup label="신입">
                <option value="intern">인턴</option>
                <option value="fresh">신입</option>
            </optgroup>
            <optgroup label="경력">
                <option value="junior">주니어 (1-3년)</option>
                <option value="mid">미드레벨 (3-5년)</option>
                <option value="senior">시니어 (5년 이상)</option>
            </optgroup>
        </select>
    </div>
</form>

5. 스타일링 예제

<style>
    /* 폼 그룹 스타일 */
    .form-group {
        margin-bottom: 20px;
    }

    /* 레이블 스타일 */
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
    }

    label.required::after {
        content: " *";
        color: #dc3545;
    }

    /* 셀렉트 박스 기본 스타일 */
    select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        background-color: #fff;
    }

    /* 옵션 그룹 스타일 */
    optgroup {
        font-weight: 600;
        color: #666;
    }

    /* 옵션 스타일 */
    option {
        padding: 8px;
        font-weight: normal;
    }

    /* 다중 선택 스타일 */
    select[multiple] {
        height: auto;
        min-height: 100px;
    }

    /* 호버 및 포커스 스타일 */
    select:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    }

    /* 비활성화 스타일 */
    select:disabled,
    optgroup:disabled {
        background-color: #e9ecef;
        cursor: not-allowed;
        opacity: 0.65;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        select {
            font-size: 16px; /* iOS에서 확대 방지 */
        }
        
        select[multiple] {
            min-height: 120px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 optgroup만 사용합니다.
• 적절한 HTML 구조를 사용합니다.
• CSS 선택자를 효율적으로 사용합니다.
• 불필요한 중첩을 피합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

optgroup 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 모바일 기기에서 테스트
• 접근성 검사 도구 사용
• 스크린 리더 테스트