[Bootstrap] Input Groups

1. 기본 구조

• `.input-group`: 전체 그룹 컨테이너
• `.input-group-text`: 앞/뒤 텍스트 또는 아이콘 요소
• `.form-control`: 인풋 필드

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

---

2. 위치별 추가 요소

<!-- 앞에 텍스트 -->
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control">
</div>

<!-- 뒤에 텍스트 -->
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-text">@example.com</span>
</div>

---

3. Input Group 크기 조절

<!-- 작은 사이즈 -->
<div class="input-group input-group-sm">...</div>

<!-- 기본 -->
<div class="input-group">...</div>

<!-- 큰 사이즈 -->
<div class="input-group input-group-lg">...</div>

---

4. 여러 개 인풋 또는 텍스트

<!-- 여러 input -->
<div class="input-group">
  <span class="input-group-text">Person</span>
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>

<!-- 여러 텍스트 -->
<div class="input-group">
  <span class="input-group-text">One</span>
  <span class="input-group-text">Two</span>
  <input type="text" class="form-control">
</div>

---

5. 체크박스/라디오 버튼 포함

<!-- 체크박스 -->
<div class="input-group">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control">
</div>

<!-- 라디오 -->
<div class="input-group">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control">
</div>

 

---

6. 버튼 추가

<!-- 앞에 버튼 -->
<div class="input-group">
  <button class="btn btn-outline-primary">버튼</button>
  <input type="text" class="form-control">
</div>

<!-- 뒤에 버튼 -->
<div class="input-group">
  <input type="text" class="form-control">
  <button class="btn btn-success">검색</button>
</div>

<!-- 뒤에 여러 버튼 -->
<div class="input-group">
  <input type="text" class="form-control">
  <button class="btn btn-primary">OK</button>
  <button class="btn btn-danger">Cancel</button>
</div>

---

7. 드롭다운 버튼 추가

<div class="input-group">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    선택
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">옵션 1</a></li>
    <li><a class="dropdown-item" href="#">옵션 2</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Username">
</div>