색상과 배경
색상과 배경 (Color and background)
.text-* 유틸리티와 .bg-* 유틸리티를 하나의 클래스로 합친 색상·배경 헬퍼의 사용법을 설명하는 문서예요.
출처: 문서
본문
개요 (Overview)
색상·배경 헬퍼는 우리 .text-* 유틸리티와 .bg-* 유틸리티의 힘을 하나의 클래스로 결합해요. 우리 Sass color-contrast() 함수를 사용해서 특정 background-color에 대비되는 color를 자동으로 결정해요.
주의하세요! 현재 CSS 네이티브 color-contrast 함수에 대한 지원은 없어서, 우리는 Sass를 통해 자체 함수를 사용해요. 즉, CSS 변수로 테마 색상을 커스터마이즈하면 이 유틸리티에서 색상 대비 문제가 생길 수 있어요.
<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>
접근성 팁: 의미를 전달하기 위해 색상을 사용하는 것은 시각적인 표시만 제공할 뿐, 화면 판독기 같은 보조 기술을 사용하는 사용자에게는 전달되지 않아요. 의미가 콘텐츠 자체에서 명확하거나(충분한 색상 대비를 가진 보이는 텍스트처럼), .visually-hidden 클래스로 숨겨진 추가 텍스트 같은 대체 수단을 통해 포함되어야 해요.
컴포넌트와 함께 (With components)
배지(badge)처럼 .text-*와 .bg-* 클래스를 합친 것 대신 사용하세요.
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>
또는 카드(card)에서:
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>