HTML <optgroup> 태그, 드롭다운 메뉴에서 그룹화하는 방법

HTML <optgroup> 태그, 드롭다운 메뉴에서 그룹화하는 방법

HTML에서 드롭다운 메뉴를 만들 때, 옵션을 논리적으로 그룹화하여 사용자 경험을 개선할 수 있습니다. 이를 위해 사용하는 태그가 바로 <optgroup>입니다. 이 글에서는 <optgroup> 태그를 사용해 드롭다운 메뉴를 구성하고, 그룹화를 통해 효율적인 옵션 선택을 제공하는 방법을 다룹니다.

 

 

목차

1. <optgroup> 태그란 무엇인가?
2. <optgroup> 태그의 기본 사용법
3. <optgroup> 태그와 <option> 태그의 관계
4. 중첩된 드롭다운 메뉴 만들기
5. <optgroup> 태그의 접근성 고려사항
6. 실전 예제

 

<optgroup> 태그란 무엇인가?

<optgroup> 태그는 HTML에서 드롭다운 메뉴를 구성할 때 여러 옵션(<option>)을 그룹화하는 데 사용됩니다. 이 태그는 드롭다운 목록에서 논리적으로 관련 있는 옵션들을 묶어서 표현할 수 있도록 해주며, 사용자에게 옵션 선택 시 더 나은 가독성을 제공합니다.

예시

<select>
    <optgroup label="과일">
        <option>사과</option>
        <option>바나나</option>
    </optgroup>
    <optgroup label="채소">
        <option>당근</option>
        <option>브로콜리</option>
    </optgroup>
</select>

위 예제에서 '과일'과 '채소'로 그룹화된 옵션들이 있습니다. 사용자는 그룹별로 항목을 더 쉽게 식별하고 선택할 수 있습니다.

 

 

<optgroup> 태그의 기본 사용법

<optgroup> 태그는 <select> 태그 내부에서 사용되며, <option> 태그들을 그룹화하는 역할을 합니다. label 속성을 사용하여 그룹의 이름을 지정하며, 이를 통해 드롭다운 메뉴에서 어떤 항목들이 속해 있는지 명확히 알 수 있습니다.

문법

<select>
    <optgroup label="그룹명">
        <option value="value1">옵션1</option>
        <option value="value2">옵션2</option>
    </optgroup>
</select>

속성 설명:

• label: 그룹의 이름을 지정합니다. 해당 그룹에 속한 옵션을 설명하는 역할을 합니다.
• disabled (선택적): 그룹 전체를 비활성화할 수 있습니다.

 

 

<optgroup> 태그와 <option> 태그의 관계

<optgroup> 태그 안에는 반드시 하나 이상의 <option> 태그가 포함되어야 합니다. <optgroup>은 그 자체로 선택 가능한 항목이 아니며, 사용자가 선택할 수 있는 항목은 <option>입니다. 각 <option>은 특정 그룹에 속해 옵션을 제공하며, 사용자 경험을 개선합니다.

예를 들어, 사용자에게 여러 나라의 도시에 대해 선택할 수 있는 드롭다운을 제공하고자 한다면, 나라별로 그룹화된 도시 목록을 제공할 수 있습니다.

<select>
    <optgroup label="한국">
        <option>서울</option>
        <option>부산</option>
    </optgroup>
    <optgroup label="미국">
        <option>뉴욕</option>
        <option>LA</option>
    </optgroup>
</select>

 

 

중첩된 드롭다운 메뉴 만들기

HTML에서는 <optgroup> 태그를 중첩할 수는 없지만, 자바스크립트를 이용하면 선택한 그룹에 따라 추가적인 선택 옵션을 제공하는 동적 드롭다운 메뉴를 만들 수 있습니다. 이를 통해 사용자에게 더 세분화된 선택을 제공할 수 있습니다.

예시: 자바스크립트로 동적 드롭다운 구현

<select id="category">
    <option value="fruit">과일</option>
    <option value="vegetable">채소</option>
</select>

<select id="items"></select>

<script>
    const items = {
        fruit: ["사과", "바나나"],
        vegetable: ["당근", "브로콜리"]
    };

    document.getElementById("category").addEventListener("change", function() {
        const category = this.value;
        const itemSelect = document.getElementById("items");
        itemSelect.innerHTML = "";

        items[category].forEach(function(item) {
            const option = document.createElement("option");
            option.textContent = item;
            itemSelect.appendChild(option);
        });
    });
</script>

 

 

 

 

<optgroup> 태그의 접근성 고려사항

웹 접근성(Accessibility)을 고려할 때 <optgroup> 태그는 매우 유용합니다. 시각적 그룹화를 통해 사용자가 관련 항목을 더 쉽게 구분할 수 있으며, 화면 낭독기 사용자에게도 그룹 이름을 명확히 알릴 수 있습니다.

이를 위해서는 <label> 속성을 꼭 명시하여, 화면 낭독기 사용자가 그룹 이름을 읽을 수 있도록 해야 합니다. 또한, 필요 시 그룹 전체를 비활성화하여 잘못된 선택을 방지할 수 있습니다.

 

 

실전 예제

다음은 실제로 사용할 수 있는 <optgroup> 태그를 활용한 예제입니다. 사용자는 각 카테고리에서 원하는 항목을 선택할 수 있습니다.

<select>
    <optgroup label="음료">
        <option>커피</option>
        <option>차</option>
    </optgroup>
    <optgroup label="간식">
        <option>쿠키</option>
        <option>빵</option>
    </optgroup>
</select>

위 예제에서 '음료'와 '간식'으로 옵션을 그룹화하여 사용자가 원하는 항목을 쉽게 선택할 수 있도록 했습니다.

 

 

결론

<optgroup> 태그를 사용하면 드롭다운 메뉴에서 옵션을 논리적으로 그룹화하여 사용자 경험을 향상시킬 수 있습니다. 이를 통해 사용자는 다양한 옵션 중에서 원하는 항목을 더 쉽게 선택할 수 있으며, 특히 옵션이 많을 때 더욱 유용합니다. 웹 접근성을 고려한 디자인까지 신경 쓴다면, 더 나은 사용자 경험을 제공할 수 있습니다.