배지
분류: 배지
작은 원형/알약 모양의 라벨로 상태·개수·새 항목 여부처럼 부가 정보를 짧게 덧붙일 때 쓰는 배지(badge) 컴포넌트의 여섯 가지 활용 패턴을 한 카드에 모아 보여줍니다. 제목 옆(<h1>~<h6>)에 붙이는 기본형, bg-*/bg-*-lt로 진하거나 옅은 배경색을 주는 색상형, 배경 없이 글자와 테두리만 색을 입히는 badge-outline, 드롭다운 메뉴 항목의 카운터, 버튼 옆에 개수를 붙이는 형태, 그리고 버튼 우측 상단에 점으로 떠 있는 badge-notification(필요하면 badge-blink로 깜빡임 효과까지) 형태입니다.
배지 활용 패턴
├── 제목 + 배지 (h1~h6 옆 badge)
├── 색상 배지
│ ├── bg-* (진한 배경 + *-fg 대비 글자색)
│ ├── bg-*-lt (옅은 배경)
│ └── badge-outline (테두리만)
├── 드롭다운 메뉴 항목의 카운터 배지
├── 버튼 옆 개수 배지 (btn-list)
└── 버튼 알림 점 배지 (position-relative + badge-notification[+ badge-blink])
소스
<div class="card overflow-auto mt-3">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">배지</h3>
</div>
<div class="card-body">
<div class="row row-cards">
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<h1>제목 예시 <span class="badge">새로운</span></h1>
<h2>제목 예시 <span class="badge">새로운</span></h2>
<h3>제목 예시 <span class="badge">새로운</span></h3>
<h4>제목 예시 <span class="badge">새로운</span></h4>
<h5>제목 예시 <span class="badge">새로운</span></h5>
<h6>제목 예시 <span class="badge">새로운</span></h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row row-cards">
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="badges-list">
<span class="badge bg-blue text-blue-fg">파랑</span>
<span class="badge bg-azure text-azure-fg">하늘</span>
<span class="badge bg-indigo text-indigo-fg">남색</span>
<span class="badge bg-purple text-purple-fg">보라</span>
<span class="badge bg-pink text-pink-fg">분홍</span>
<span class="badge bg-red text-red-fg">빨강</span>
<span class="badge bg-orange text-orange-fg">주황</span>
<span class="badge bg-yellow text-yellow-fg">노랑</span>
<span class="badge bg-lime text-lime-fg">라임</span>
<span class="badge bg-green text-green-fg">초록</span>
<span class="badge bg-teal text-teal-fg">청록</span>
<span class="badge bg-cyan text-cyan-fg">청자</span>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="badges-list">
<span class="badge bg-blue-lt">파랑</span>
<span class="badge bg-azure-lt">하늘</span>
<span class="badge bg-indigo-lt">남색</span>
<span class="badge bg-purple-lt">보라</span>
<span class="badge bg-pink-lt">분홍</span>
<span class="badge bg-red-lt">빨강</span>
<span class="badge bg-orange-lt">주황</span>
<span class="badge bg-yellow-lt">노랑</span>
<span class="badge bg-lime-lt">라임</span>
<span class="badge bg-green-lt">초록</span>
<span class="badge bg-teal-lt">청록</span>
<span class="badge bg-cyan-lt">청자</span>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="badges-list">
<span class="badge badge-outline text-blue">파랑</span>
<span class="badge badge-outline text-azure">하늘</span>
<span class="badge badge-outline text-indigo">남색</span>
<span class="badge badge-outline text-purple">보라</span>
<span class="badge badge-outline text-pink">분홍</span>
<span class="badge badge-outline text-red">빨강</span>
<span class="badge badge-outline text-orange">주황</span>
<span class="badge badge-outline text-yellow">노랑</span>
<span class="badge badge-outline text-lime">라임</span>
<span class="badge badge-outline text-green">초록</span>
<span class="badge badge-outline text-teal">청록</span>
<span class="badge badge-outline text-cyan">청자</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
<a class="dropdown-item" href="#">
액션
<span class="badge bg-primary text-primary-fg ms-auto">12</span>
</a>
<a class="dropdown-item" href="#">
다른 액션
<span class="badge bg-green ms-auto"></span>
</a>
</div>
</div>
<div class="col-12">
<div class="row row-cards">
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="btn-list">
<button class="btn">파랑 배지 <span class="badge bg-blue text-blue-fg ms-2">1</span></button>
<button class="btn">하늘 배지 <span class="badge bg-azure text-azure-fg ms-2">2</span></button>
<button class="btn">남색 배지 <span class="badge bg-indigo text-indigo-fg ms-2">3</span></button>
<button class="btn">보라 배지 <span class="badge bg-purple text-purple-fg ms-2">4</span></button>
<button class="btn">분홍 배지 <span class="badge bg-pink text-pink-fg ms-2">5</span></button>
<button class="btn">빨강 배지 <span class="badge bg-red text-red-fg ms-2">6</span></button>
<button class="btn">주황 배지 <span class="badge bg-orange text-orange-fg ms-2">7</span></button>
<button class="btn">노랑 배지 <span class="badge bg-yellow text-yellow-fg ms-2">8</span></button>
<button class="btn">라임 배지 <span class="badge bg-lime text-lime-fg ms-2">9</span></button>
<button class="btn">초록 배지 <span class="badge bg-green text-green-fg ms-2">10</span></button>
<button class="btn">청록 배지 <span class="badge bg-teal text-teal-fg ms-2">11</span></button>
<button class="btn">청자 배지 <span class="badge bg-cyan text-cyan-fg ms-2">12</span></button>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="btn-list">
<button class="btn position-relative">파랑 배지 <span class="badge bg-blue text-blue-fg badge-notification badge-pill">1</span></button>
<button class="btn position-relative">하늘 배지 <span class="badge bg-azure text-azure-fg badge-notification badge-pill">2</span></button>
<button class="btn position-relative">남색 배지 <span class="badge bg-indigo text-indigo-fg badge-notification badge-pill">3</span></button>
<button class="btn position-relative">보라 배지 <span class="badge bg-purple text-purple-fg badge-notification badge-pill">4</span></button>
<button class="btn position-relative">분홍 배지 <span class="badge bg-pink text-pink-fg badge-notification badge-pill">5</span></button>
<button class="btn position-relative">빨강 배지 <span class="badge bg-red text-red-fg badge-notification badge-pill">6</span></button>
<button class="btn position-relative">주황 배지 <span class="badge bg-orange text-orange-fg badge-notification badge-pill">7</span></button>
<button class="btn position-relative">노랑 배지 <span class="badge bg-yellow text-yellow-fg badge-notification badge-pill">8</span></button>
<button class="btn position-relative">라임 배지 <span class="badge bg-lime text-lime-fg badge-notification badge-pill">9</span></button>
<button class="btn position-relative">초록 배지 <span class="badge bg-green text-green-fg badge-notification badge-pill">10</span></button>
<button class="btn position-relative">청록 배지 <span class="badge bg-teal text-teal-fg badge-notification badge-pill">11</span></button>
<button class="btn position-relative">청자 배지 <span class="badge bg-cyan text-cyan-fg badge-notification badge-pill">12</span></button>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="btn-list">
<button class="btn position-relative">파랑 배지 <span class="badge bg-blue badge-notification badge-blink"></span></button>
<button class="btn position-relative">하늘 배지 <span class="badge bg-azure badge-notification badge-blink"></span></button>
<button class="btn position-relative">남색 배지 <span class="badge bg-indigo badge-notification badge-blink"></span></button>
<button class="btn position-relative">보라 배지 <span class="badge bg-purple badge-notification badge-blink"></span></button>
<button class="btn position-relative">분홍 배지 <span class="badge bg-pink badge-notification badge-blink"></span></button>
<button class="btn position-relative">빨강 배지 <span class="badge bg-red badge-notification badge-blink"></span></button>
<button class="btn position-relative">주황 배지 <span class="badge bg-orange badge-notification badge-blink"></span></button>
<button class="btn position-relative">노랑 배지 <span class="badge bg-yellow badge-notification badge-blink"></span></button>
<button class="btn position-relative">라임 배지 <span class="badge bg-lime badge-notification badge-blink"></span></button>
<button class="btn position-relative">초록 배지 <span class="badge bg-green badge-notification badge-blink"></span></button>
<button class="btn position-relative">청록 배지 <span class="badge bg-teal badge-notification badge-blink"></span></button>
<button class="btn position-relative">청자 배지 <span class="badge bg-cyan badge-notification badge-blink"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
badge | 배지의 기본 크기·모양·글자 스타일을 적용하는 기본 클래스 |
bg-blue / bg-azure / bg-indigo / bg-purple / bg-pink / bg-red / bg-orange / bg-yellow / bg-lime / bg-green / bg-teal / bg-cyan / bg-primary | 배지의 배경색을 Tabler 팔레트 색상으로 진하게 지정 |
text-blue-fg 등 text-*-fg | 해당 배경색(bg-*) 위에서 대비가 확보되는 전용 글자색 |
bg-*-lt (bg-blue-lt 등) | 배경을 옅은(light tint) 색조로 지정 |
badge-outline | 배경 없이 테두리와 글자에만 text-* 색상을 적용 |
badge-pill | 배지 모서리를 완전히 둥글려 알약 모양으로 표시 |
badge-notification | 배지를 부모 요소(주로 버튼)의 우측 상단 모서리에 점처럼 겹쳐 표시 |
badge-blink | 배지에 깜빡이는 애니메이션 효과를 적용 |
badges-list | 여러 배지를 줄바꿈 가능한 flex 목록으로 배치 |
btn-list | 여러 버튼을 간격을 두고 줄바꿈 가능하게 배치하는 flex 목록 |
position-relative | 배지가 버튼 모서리에 절대 위치로 겹칠 수 있도록 부모 버튼에 기준 좌표를 부여 |
dropdown-menu, dropdown-menu-demo, dropdown-menu-arrow, dropdown-item | 드롭다운 메뉴 컨테이너·항목 스타일(-demo는 항상 펼쳐진 상태로 보여주기 위한 예제용, -arrow는 삼각형 화살표 표시) |
ms-2, ms-auto | 요소 왼쪽 여백 지정. ms-auto는 남은 공간만큼 밀어 우측 정렬 |
row, row-cards, col-12 | Bootstrap 그리드 행/열. row-cards는 카드 사이 간격을 카드 컴포넌트 기준으로 맞춤 |
card, card-body, overflow-auto | 각 예시를 감싸는 카드 컨테이너와 본문 영역, 내용이 넘칠 때 스크롤 처리 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/배지.html 경로에서 렌더링 결과를 확인할 수 있습니다.