부트스트랩의 입력 그룹(Input Group)은 입력 필드 앞이나 뒤에 텍스트나 아이콘 같은 요소를 덧붙일 수 있게 해주는 강력한 기능입니다. 이를 통해 사용자 입력과 관련된 공통 요소를 손쉽게 추가할 수 있습니다.
입력 그룹의 주요 활용 사례
예를 들어 다음과 같은 요소들을 입력 필드에 붙여 넣을 수 있습니다.
- 금액 입력 필드 앞뒤에 달러 기호($) 또는 소수점 표기(.00) 추가
- 소셜 미디어 계정 입력 시 @ 기호 자동 표시
- 애플리케이션 인터페이스에 필요한 기타 공통 접두사·접미사
이러한 시각적 힌트는 사용자가 어떤 형식으로 값을 입력해야 하는지 직관적으로 이해하도록 도와주며, 폼의 전문성과 사용성을 크게 높여줍니다.
예제 코드
아래 코드를 실행하면 부트스트랩 입력 그룹이 실제로 어떻게 동작하는지 확인할 수 있습니다. 세 가지 예제가 포함되어 있습니다.
- @ 접두사: 트위터 핸들 입력 필드 앞에 @ 기호가 붙는 형태
- .00 접미사: 숫자 입력 필드 뒤에 소수점 표기가 붙는 형태
- $ 접두사 + .00 접미사: 금액 입력 필드 양쪽에 기호가 모두 붙는 형태
<!DOCTYPE html> <html> <head> <title>Bootstrap Input Group</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div style = "padding: 100px 100px 10px;"> <form class = "bs-example bs-example-form" role = "form"> <div class = "input-group"> <span class = "input-group-addon">@</span> <input type = "text" class = "form-control" placeholder = "twitterhandle"> </div> <br> <div class = "input-group"> <input type = "text" class = "form-control"> <span class = "input-group-addon">.00</span> </div> <br> <div class = "input-group"> <span class = "input-group-addon">$</span> <input type = "text" class = "form-control"> <span class = "input-group-addon">.00</span> </div> </form> </div> </body> </html>
코드 구조 살펴보기
핵심 구조는 간단합니다. .input-group 클래스를 가진 컨테이너 div 안에 .input-group-addon 클래스를 적용한 span 요소와 .form-control 클래스의 input 요소를 나란히 배치하면 됩니다.
- .input-group: 입력 필드와 추가 요소를 하나로 묶는 컨테이너 역할
- .input-group-addon: 입력 필드 앞(접두사) 또는 뒤(접미사)에 표시될 텍스트나 아이콘을 담는 요소
- .form-control: 부트스트랩의 기본 스타일이 적용된 입력 필드
addon span을 input보다 먼저 배치하면 접두사로, 나중에 배치하면 접미사로 표시됩니다. 이처럼 배치 순서만 조절하면 원하는 위치에 원하는 요소를 자유롭게 추가할 수 있습니다.