HTML 옵션 그룹화: 드롭다운 기능 향상

소개

HTML 의 <optgroup> 태그는 드롭다운 목록 내에서 옵션 그룹을 생성하는 데 사용됩니다. 이 랩에서는 optgroup 을 생성하고 속성을 사용하여 사용자 정의하는 단계를 안내합니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 파일 설정

index.html이라는 새 파일을 생성합니다. 기본 HTML 구조를 추가하고 body 요소 내에 <select> 태그를 포함합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup 태그 랩</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

드롭다운 목록에 옵션 추가

<select> 태그 내에 <option> 태그를 추가하여 옵션 목록을 생성합니다. 각 옵션의 값을 설정하려면 value 속성을 사용합니다.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Optgroup 생성

<optgroup> 태그를 사용하여 특정 옵션을 함께 그룹화합니다. 그룹의 이름을 정의하려면 label 속성을 추가합니다.

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Optgroup 비활성화

disabled 속성을 사용하여 드롭다운 목록 내의 전체 옵션 그룹을 비활성화합니다. 이 속성을 여는 <optgroup> 태그에 추가합니다.

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

요약

<optgroup> 태그는 드롭다운 목록 내에서 옵션 그룹을 생성하는 데 사용됩니다. disabled 및 label과 같은 속성을 사용하여 사용자 정의할 수 있습니다. 이 랩의 단계를 따르면 HTML 에서 옵션을 효과적으로 그룹화하고 구성할 수 있습니다.