[Bootstrap] Select

1. 기본 셀렉트 메뉴

• `<select>` 태그에 `.form-select` 클래스를 사용하여 기본 셀렉트 박스를 스타일링

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

• `.form-select` 클래스 사용
• 내부에 `<option>` 태그로 항목 정의

---

2. 셀렉트 박스 크기 조절

<select class="form-select form-select-lg"> <!-- Large -->
<select class="form-select">               <!-- Default -->
<select class="form-select form-select-sm"> <!-- Small -->

• `.form-select-lg`: 큰 셀렉트 박스
• `.form-select-sm`: 작은 셀렉트 박스

---

3. 비활성화된 셀렉트 메뉴

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
</select>

• `disabled` 속성으로 사용 불가능하게 설정

---

4. 다중 선택 셀렉트

<select class="form-select" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

• `multiple` 속성 추가 시 Ctrl(또는 Cmd)이나 Shift로 다중 선택 가능

---

5. Data List (입력 추천 목록)

<label for="browser" class="form-label">Choose your browser:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

• `<input>`과 `<datalist>`를 활용
• 자동완성 기능 제공