배지
배지 (Badges)
작은 개수 표시 및 라벨링 컴포넌트인 배지에 대한 문서와 예시입니다.
출처: 문서
본문
예제 (Examples)
배지는 상대적 글꼴 크기와 em 단위를 사용해 바로 위 부모 요소의 크기에 맞춰 조정됩니다. v5부터 배지는 링크에 대한 포커스나 호버 스타일을 더 이상 갖지 않습니다.
제목 (Headings)
<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
버튼 (Buttons)
배지는 링크나 버튼의 일부로 사용해 카운터를 제공할 수 있습니다.
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>
참고로, 사용 방식에 따라 배지는 스크린 리더나 이와 유사한 보조 기술을 쓰는 사용자에게 혼란을 줄 수 있습니다. 배지의 스타일은 그 목적에 대한 시각적 단서를 주지만, 이러한 사용자에게는 그저 배지의 콘텐츠가 그대로 보일 뿐입니다. 상황에 따라 이 배지들은 문장·링크·버튼 끝에 붙은 무작위한 추가 단어나 숫자처럼 보일 수 있어요.
맥락이 분명하지 않다면 (“Notifications” 예시처럼 “4”가 알림 개수임이 이해되는 경우), 시각적으로 숨겨진 추가 텍스트를 포함해 맥락을 보강하는 것을 고려하세요.
위치 지정 (Positioned)
유틸리티를 사용해 .badge를 수정하고 링크나 버튼의 모서리에 배치할 수 있습니다.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
.badge 클래스를 개수 없이 쓰는 몇 가지 유틸리티로 대체해 더 일반적인 표시자(indicator)로 만들 수도 있습니다.
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
배경색 (Background colors) — v5.2.0에서 추가
.text-bg-{color} 헬퍼로 대비되는 전경색과 함께 background-color를 설정하세요. 이전에는 스타일링을 위해 .text-{color}와 .bg-{color} 유틸리티를 직접 짝지어야 했지만, 원한다면 여전히 그렇게 사용할 수 있습니다.
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
접근성 팁: 의미를 전달하기 위해 색만 사용하는 것은 시각적 표시일 뿐, 스크린 리더 같은 보조 기술 사용자에게는 전달되지 않습니다. 의미가 콘텐츠 자체에서 분명하거나(예: 충분한 색 대비를 가진 보이는 텍스트), .visually-hidden 클래스로 숨긴 추가 텍스트 같은 대체 수단으로 포함되는지 확인하세요.
알약 배지 (Pill badges)
.rounded-pill 유틸리티 클래스를 사용하면 배지를 더 큰 border-radius로 더 둥글게 만들 수 있습니다.
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
CSS
변수 (Variables) — v5.2.0에서 추가
Bootstrap의 진화하는 CSS 변수 접근 방식에 따라, 배지는 이제 .badge에 로컬 CSS 변수를 사용해 실시간 커스터마이징을 강화합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 커스터마이징도 여전히 지원됩니다.
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};
Sass 변수 (Sass variables)
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: var(--#{$prefix}border-radius);