색상
색상 (Colors)
몇 가지 색상 유틸리티 클래스로 색상을 통해 의미를 전달해 보세요. 호버 상태가 있는 링크 스타일링 지원도 포함돼요.
출처: 문서
본문
접근성 팁: 의미를 전달하기 위해 색상만 사용하는 것은 시각적 단서만 제공할 뿐, 스크린 리더 같은 보조 기술 사용자에게는 전달되지 않아요. 의미가 콘텐츠 자체(예: 충분한 색상 대비가 있는 보이는 텍스트)에서 분명히 드러나도록 하거나,
.visually-hidden클래스로 숨긴 추가 텍스트 같은 대체 수단으로 포함하세요.
색상 (Colors)
색상 유틸리티로 텍스트에 색을 칠할 수 있어요. 링크에 색을 입히고 싶다면 :hover와 :focus 상태가 있는 .link-* 헬퍼 클래스를 사용할 수 있어요.
원래 $theme-colors Sass 맵에서 생성된 .text-* 같은 색상 유틸리티는 아직 color mode에 반응하지 않지만, .text-*-emphasis 유틸리티는 반응해요. 이 문제는 v6에서 해결될 거예요.
<p class="text-primary">
.text-primary
</p>
<p class="text-primary-emphasis">
.text-primary-emphasis
</p>
<p class="text-secondary">
.text-secondary
</p>
<p class="text-secondary-emphasis">
.text-secondary-emphasis
</p>
<p class="text-success">
.text-success
</p>
<p class="text-success-emphasis">
.text-success-emphasis
</p>
<p class="text-danger">
.text-danger
</p>
<p class="text-danger-emphasis">
.text-danger-emphasis
</p>
<p class="text-warning bg-dark">
.text-warning
</p>
<p class="text-warning-emphasis">
.text-warning-emphasis
</p>
<p class="text-info bg-dark">
.text-info
</p>
<p class="text-info-emphasis">
.text-info-emphasis
</p>
<p class="text-light bg-dark">
.text-light
</p>
<p class="text-light-emphasis">
.text-light-emphasis
</p>
<p class="text-dark bg-white">
.text-dark
</p>
<p class="text-dark-emphasis">
.text-dark-emphasis
</p>
<p class="text-body">
.text-body
</p>
<p class="text-body-emphasis">
.text-body-emphasis
</p>
<p class="text-body-secondary">
.text-body-secondary
</p>
<p class="text-body-tertiary">
.text-body-tertiary
</p>
<p class="text-black bg-white">
.text-black
</p>
<p class="text-white bg-dark">
.text-white
</p>
<p class="text-black-50 bg-white">
.text-black-50
</p>
<p class="text-white-50 bg-dark">
.text-white-50
</p>
Deprecation: .text-opacity-* 유틸리티와 텍스트 유틸리티용 CSS 변수가 추가되면서, .text-black-50과 .text-white-50은 v5.1.0부터 deprecated됐어요. v6.0.0에서 제거될 거예요.
Deprecation: 확장된 테마 색상과 변수가 추가되면서, .text-muted 유틸리티는 v5.3.0부터 deprecated됐어요. 기본값도 color mode를 더 잘 지원하도록 새 --bs-secondary-color CSS 변수로 재할당됐어요. v6.0.0에서 제거될 거예요.
불투명도 (Opacity)
v5.1.0부터 텍스트 색상 유틸리티는 CSS 변수를 사용해 Sass로 생성돼요. 이 덕분에 컴파일 없이 실시간 색상 변경과 동적 알파 투명도 변경이 가능해요.
동작 원리 (How it works)
기본 .text-primary 유틸리티를 생각해 보세요.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
우리는 --bs-primary(값 13, 110, 253)의 RGB 버전 CSS 변수를 사용하고, 알파 투명도를 위해 두 번째 CSS 변수 --bs-text-opacity를 붙였어요(로컬 CSS 변수 덕분에 기본값 1). 즉 이제 .text-primary를 사용할 때마다 계산된 색상 값은 rgba(13, 110, 253, 1)이 돼요. 각 .text-* 클래스 안의 로컬 CSS 변수는 상속 문제를 피해서 중첩된 유틸리티 인스턴스가 자동으로 수정된 알파 투명도를 가지지 않게 해 줘요.
예시 (Example)
그 불투명도를 바꾸려면 커스텀 스타일이나 인라인 스타일로 --bs-text-opacity를 오버라이드하세요.
<div class="text-primary">
This is default primary text
</div>
<div class="text-primary" style="--bs-text-opacity: .5;">
This is 50% opacity primary text
</div>
또는 .text-opacity 유틸리티 중 아무거나 선택할 수 있어요:
<div class="text-primary">
This is default primary text
</div>
<div class="text-primary text-opacity-75">
This is 75% opacity primary text
</div>
<div class="text-primary text-opacity-50">
This is 50% opacity primary text
</div>
<div class="text-primary text-opacity-25">
This is 25% opacity primary text
</div>
특이성 (Specificity)
때때로 다른 선택자의 특이성 때문에 상황별 클래스를 적용할 수 없을 수 있어요. 어떤 경우에는 요소의 콘텐츠를 원하는 클래스를 가진 <div>나 더 의미론적인 요소로 감싸는 것이 충분한 해결책이 돼요.
CSS
다음 Sass 기능 외에도, 색상 등에 대해 포함된 CSS 커스텀 프로퍼티(aka CSS 변수)에 관한 문서를 읽어 보는 것도 고려해 보세요.
Sass 변수 (Sass variables)
대부분의 색상 유틸리티는 일반 색상 팔레트 변수에서 재할당된 테마 색상으로 생성돼요.
scss/_variables.scss
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
scss/_variables.scss
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
그레이스케일 색상도 사용할 수 있지만, 유틸리티를 생성하는 데는 일부만 사용돼요.
scss/_variables.scss
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
scss/_maps.scss
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
);
라이트·다크 모드에서 .text-*-emphasis 유틸리티의 색상을 설정하는 변수:
scss/_variables.scss
$primary-text-emphasis: shade-color($primary, 60%);
$secondary-text-emphasis: shade-color($secondary, 60%);
$success-text-emphasis: shade-color($success, 60%);
$info-text-emphasis: shade-color($info, 60%);
$warning-text-emphasis: shade-color($warning, 60%);
$danger-text-emphasis: shade-color($danger, 60%);
$light-text-emphasis: $gray-700;
$dark-text-emphasis: $gray-700;
scss/_variables-dark.scss
$primary-text-emphasis-dark: tint-color($primary, 40%);
$secondary-text-emphasis-dark: tint-color($secondary, 40%);
$success-text-emphasis-dark: tint-color($success, 40%);
$info-text-emphasis-dark: tint-color($info, 40%);
$warning-text-emphasis-dark: tint-color($warning, 40%);
$danger-text-emphasis-dark: tint-color($danger, 40%);
$light-text-emphasis-dark: $gray-100;
$dark-text-emphasis-dark: $gray-300;
Sass 맵 (Sass maps)
테마 색상은 Sass 맵에 들어가서, 유틸리티와 컴포넌트 수정자 등을 생성하기 위해 그 맵을 순회할 수 있어요.
scss/_variables.scss
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
그레이스케일 색상도 Sass 맵으로 사용할 수 있어요. 이 맵은 어떤 유틸리티를 생성하는 데는 사용되지 않아요.
scss/_variables.scss
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
RGB 색상은 별도의 Sass 맵에서 생성돼요:
scss/_maps.scss
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
색상 불투명도는 그 위에 자체 맵으로 구축되며, utilities API가 소비해요:
scss/_maps.scss
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
"success-emphasis": var(--#{$prefix}success-text-emphasis),
"info-emphasis": var(--#{$prefix}info-text-emphasis),
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
"light-emphasis": var(--#{$prefix}light-text-emphasis),
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
);
Color mode 적응형 텍스트 색상도 Sass 맵으로 사용할 수 있어요:
scss/_maps.scss
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
);
scss/_maps.scss
$theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark,
"secondary": $secondary-text-emphasis-dark,
"success": $success-text-emphasis-dark,
"info": $info-text-emphasis-dark,
"warning": $warning-text-emphasis-dark,
"danger": $danger-text-emphasis-dark,
"light": $light-text-emphasis-dark,
"dark": $dark-text-emphasis-dark,
);
Sass utilities API
색상 유틸리티는 scss/_utilities.scss의 utilities API에 선언돼 있어요. utilities API 사용법을 배워 보세요.
scss/_utilities.scss
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
),