부트스트랩 레이블이란?
부트스트랩의 레이블(Label)은 페이지에서 게시물 수, 알림 개수, 상태 표시 등 작은 정보를 강조해서 보여줄 때 매우 유용한 컴포넌트입니다. 예를 들어 '새 글 150개'처럼 숫자나 짧은 문구를 눈에 잘 띄는 배지 형태로 표현할 수 있습니다.
기본 사용 예제
레이블을 표시하려면 .label 클래스와 함께 .label-default 같은 스타일 클래스를 <span> 요소에 적용하면 됩니다. 아래 예제 코드를 직접 실행해 결과를 확인해 보세요.
<!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> <h1>Tutorials <span class = "label label-default"> 150 </span> </h1> <h2>Quiz <span class = "label label-default"> 90 </span> </h2> </body> </html>
실행 결과
위 코드를 실행하면 'Tutorials' 제목 옆에 회색 배경의 레이블로 150이, 'Quiz' 제목 옆에는 90이 각각 표시됩니다. 이렇게 제목이나 텍스트 옆에 관련 개수를 자연스럽게 강조할 수 있습니다.
다양한 레이블 스타일
부트스트랩은 용도에 따라 선택할 수 있는 여러 가지 레이블 색상 클래스를 제공합니다.
.label-default— 기본 회색 레이블.label-primary— 파란색(주요 항목 강조).label-success— 초록색(성공 상태).label-info— 하늘색(정보성 안내).label-warning— 주황색(경고).label-danger— 빨간색(위험·오류)
예를 들어 새로운 알림을 빨간색으로 강조하고 싶다면 다음과 같이 작성할 수 있습니다.
<span class = "label label-danger">New</span>
정리
레이블은 코드 한 줄로 개수나 상태를 시각적으로 표현할 수 있는 간단하지만 실용적인 부트스트랩 컴포넌트입니다. 목록, 내비게이션 메뉴, 헤딩 등 다양한 위치에 활용해 콘텐츠의 가독성과 전달력을 높여 보세요.