텍스트 영역(textarea)은 사용자로부터 여러 줄의 입력을 받아야 할 때 사용하는 폼 요소입니다. 주소, 자기소개, 상세 설명처럼 한 줄짜리 입력 필드로는 담을 수 없는 긴 내용을 입력받을 때 특히 유용합니다.
부트스트랩에서는 form-control 클래스를 textarea에 적용하기만 하면, 일반 입력 필드와 동일한 깔끔한 스타일이 자동으로 적용됩니다. 아래 예제 코드를 직접 실행해 보면서 부트스트랩 폼에서 textarea가 어떻게 동작하는지 확인해 보세요.
예제 코드
<!DOCTYPE html> <html> <head> <title>Bootstrap Forms</title> <meta name = "viewport" content="width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <form role = "form"> <div class = "form-group"> <label for = "name">Player</label> <input type = "text" class = "form-control" placeholder = "Player Name"> </div> <div class = "form-group"> <label for = "name">Rank</label> <input type = "text" class = "form-control" placeholder = "Player Rank"> </div> <div class = "form-group"> <label for = "name">Player Details</label> <textarea class = "form-control" rows = "3" placeholder = "Player Details"></textarea> </div> </form> </body> </html>
코드 핵심 포인트
- form-control 클래스 — textarea에 이 클래스를 지정하면 부트스트랩 기본 스타일이 적용되어 입력 영역이 부모 컨테이너의 전체 너비를 차지하며, 일관된 테두리와 포커스 효과를 갖게 됩니다.
- rows 속성 — 화면에 표시될 줄 수를 지정합니다. 위 예제에서는
rows="3"으로 설정하여 세 줄 높이의 입력 영역을 만들었습니다. 필요에 따라 값을 조절해 크기를 변경할 수 있습니다. - placeholder 속성 — 사용자가 입력하기 전에 어떤 내용을 작성해야 하는지 힌트를 보여줍니다.
- form-group 구조 — 라벨(label)과 입력 요소를 하나의 그룹으로 묶어 폼의 가독성과 정렬을 깔끔하게 유지합니다.
이처럼 부트스트랩의 폼 컴포넌트를 활용하면 별도의 CSS 작성 없이도 일관된 디자인의 다중 줄 입력 필드를 손쉽게 구현할 수 있습니다.