부트스트랩 도우미 클래스란?
부트스트랩(Bootstrap)은 레이아웃을 빠르고 간편하게 구성할 수 있도록 다양한 도우미 클래스(helper class)를 제공합니다. 대표적인 도우미 클래스로는 요소를 왼쪽으로 띄우는 .pull-left, 오른쪽으로 띄우는 .pull-right, 그리고 블록 요소를 가운데 정렬하는 .center-block 등이 있습니다.
이번 글에서는 그중에서도 자주 사용되는 .clearfix 클래스를 예제와 함께 살펴보겠습니다.
.clearfix 클래스로 float 정리하기
요소에 float 속성을 적용하면 부모 컨테이너의 높이가 무너지는 현상이 발생할 수 있습니다. 이때 .clearfix 클래스를 사용하면 별도의 추가 CSS 작성 없이 float를 손쉽게 해제(clear)할 수 있습니다.
예제 코드
아래 예제는 하나의 컨테이너 안에서 왼쪽과 오른쪽으로 각각 띄워진 두 개의 div 요소를 .clearfix로 감싸 float를 정리하는 모습을 보여줍니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</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 class = "clearfix" style = "background: orange;border: 1px solid #000; padding: 10px;"> <div class = "pull-left" style = "background:#58D3F7;"> Quick Float to left </div> <div class = "pull-right" style = "background: #DA81F5;"> Quick Float to right </div> </div> </body> </html>
실행 결과 설명
위 코드를 실행하면 주황색 배경의 부모 컨테이너 안에서 하늘색(#58D3F7) 박스는 왼쪽에, 보라색(#DA81F5) 박스는 오른쪽에 배치됩니다. 부모 div에 .clearfix가 적용되어 있기 때문에 자식 요소들이 float 되더라도 부모의 높이가 정상적으로 유지됩니다.
참고: 부트스트랩 버전별 클래스 이름 차이
위에서 소개한 .pull-left, .pull-right는 부트스트랩 3(Bootstrap 3) 기준의 클래스입니다. 최신 버전에서는 명칭이 다음과 같이 변경되었으니 버전에 맞게 사용해야 합니다.
- 부트스트랩 4:
.float-left,.float-right - 부트스트랩 5:
.float-start,.float-end(RTL 지원)
프로젝트에서 사용 중인 부트스트랩 버전을 먼저 확인하고, 해당 버전에 맞는 도우미 클래스를 적용하는 것이 안전합니다.