내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
// Color

Bootstrap은 우리의 스타일과 컴포넌트를 테마로 한 광범위한 컬러 시스템을 지원합니다. 어떤 프로젝트라도 보다 포괄적으로 재정의 및 확장이 가능합니다.

색상

v5.3.0에서 추가됨

Bootstrap의 색상 팔레트는 v5.3.0에서 계속 확장되고 더욱 세세해졌습니다. secondarytertiary 텍스트 및 배경색에 대한 새로운 변수와 테마 색상에 대한 {color}-bg-subtle, {color}-border-subtle{color}-text-emphasis가 추가되었습니다. 이러한 새로운 색상은 밝고 어두운 등 다양한 색상 모드에서 더 쉽게 사용자 정의할 수 있도록 하기 위해 Sass 및 CSS 변수(색상 맵이나 유틸리티 클래스 제외)를 통해 사용할 수 있습니다. 이 새로운 변수는 :root에 전역적으로 설정되며, 원래 테마 색상은 변경되지 않은 채 새로운 어두운 색상 모드에 맞게 조정됩니다.

Colors ending in -rgb provide the red, green, blue values for use in rgb() and rgba() color modes. For example, rgba(var(--bs-secondary-bg-rgb), .5). -rgb로 끝나는 색상은 rgb()rgba() 색상 모드에서 사용할 red, green, blue 값을 제공합니다. (예: rgba(var(--bs-secondary-bg-rgb), .5))

주의! 새로운 보조 및 보조 색상과 기존 보조 테마 색상, 밝은 테마 색상과 어두운 테마 색상이 혼동될 가능성이 있습니다. 이 문제는 v6에서 해결될 것으로 예상됩니다.
설명 예시 변수
Body — 컴포넌트를 포함한 기본 전경(색상) 및 배경입니다.
 
--bs-body-color
--bs-body-color-rgb
 
--bs-body-bg
--bs-body-bg-rgb
Secondary — 더 밝은 텍스트를 원하면 color 옵션을, 구분선 및 비활성화된 컴포넌트 상태를 표시하려면 bg 옵션을 사용하세요.
 
--bs-secondary-color
--bs-secondary-color-rgb
 
--bs-secondary-bg
--bs-secondary-bg-rgb
Tertiary — 더 밝은 색상의 텍스트를 원하시면 color 옵션을 사용하세요. bg 옵션을 사용하여 호버 상태, 액센트 및 우물의 배경 스타일을 지정하세요.
 
--bs-tertiary-color
--bs-tertiary-color-rgb
 
--bs-tertiary-bg
--bs-tertiary-bg-rgb
Emphasis — 대비가 높은 텍스트의 경우에 사용됩니다. 배경에는 적용되지 않습니다.
 
--bs-emphasis-color
--bs-emphasis-color-rgb
Border — 컴포넌트 테두리, 디바이더 및 규칙의 경우에 사용됩니다. 배경과 -rgba() 값을 가진 배경과 혼합하려면 --bs-border-color-transparent를 사용하세요.
 
--bs-border-color
--bs-border-color-rgb
Primary — 하이퍼링크, 포커스 스타일, 컴포넌트 및 양식 활성 상태에 사용되는 기본 테마 색상입니다.
 
--bs-primary
--bs-primary-rgb
 
--bs-primary-bg-subtle
 
--bs-primary-border-subtle
Text
--bs-primary-text-emphasis
Success — 긍정적이거나 성공적인 작업 및 정보에 사용되는 테마 색상입니다.
 
--bs-success
--bs-success-rgb
 
--bs-success-bg-subtle
 
--bs-success-border-subtle
Text
--bs-success-text-emphasis
Danger — 오류 및 위험한 행동에 사용되는 테마 색상입니다.
 
--bs-danger
--bs-danger-rgb
 
--bs-danger-bg-subtle
 
--bs-danger-border-subtle
Text
--bs-danger-text-emphasis
Warning — 덜 위험한 경고 메시지에 사용되는 테마 색상입니다.
 
--bs-warning
--bs-warning-rgb
 
--bs-warning-bg-subtle
 
--bs-warning-border-subtle
Text
--bs-warning-text-emphasis
Info — 중립적이거나 정보성 콘텐츠에 사용되는 테마 색상입니다.
 
--bs-info
--bs-info-rgb
 
--bs-info-bg-subtle
 
--bs-info-border-subtle
Text
--bs-info-text-emphasis
Light — 대비가 적은 색상을 위한 추가 테마 옵션입니다.
 
--bs-light
--bs-light-rgb
 
--bs-light-bg-subtle
 
--bs-light-border-subtle
Text
--bs-light-text-emphasis
Dark — 대비가 높은 색상을 위한 추가 테마 옵션입니다.
 
--bs-dark
--bs-dark-rgb
 
--bs-dark-bg-subtle
 
--bs-dark-border-subtle
Text
--bs-dark-text-emphasis

새로운 색상 사용

이러한 새로운 색상은 CSS 변수와 유틸리티 클래스(예: --bs-primary-bg-subtle.bg-primary-subtle)를 통해 액세스할 수 있으므로 변수를 사용하여 자신만의 CSS 규칙을 작성하거나 클래스를 통해 스타일을 빠르게 적용할 수 있습니다. 이 유틸리티는 색상과 관련된 CSS 변수를 사용하여 구축되며, 다크 모드에 맞게 사용자 정의되므로 기본적으로 색상 모드에 맞게 조정됩니다.

Example element with utilities
html
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

테마 색상

모든 색상의 자식 집합을 사용하여 색 구성표를 만들기 위한 더 작은 색상 팔레트를 만들며, Sass 변수와 Bootstrap의 scss/_variables.scss 파일의 Sass 맵으로도 사용할 수 있습니다.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

이 색상들은 모두 Sass 맵인 $theme-colors로 이용할 수 있습니다.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

이 색상을 변경하는 방법은 Sass 맵과 반복 문서를 확인해 주세요.

모든 색상

모든 Bootstrap 색상은 scss/_variables.scss 파일의 Sass 변수와 Sass 맵으로 이용할 수 있습니다. 파일 크기 증가를 막기 위해서 이런 변수마다 텍스트나 배경색 클래스를 만들지 않습니다. 그 대신에, 이런 색의 자식 집합을 테마 팔레트로 선택하고 있습니다.

색을 재정의할 때는 색상 대비에 주의해 주세요. 아래 표시된 것처럼 메인 색상에 현재 색상에 대해, 흰색에 대해, 검은색에 대해서 각각 세 가지 대비 비율을 추가했습니다.

$blue #0d6efd
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$indigo #6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$purple #6f42c1
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$pink #d63384
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$red #dc3545
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$orange #fd7e14
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$yellow #ffc107
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$green #198754
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$teal #20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$cyan #0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$gray-500 #adb5bd
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black #000
$white #fff

Sass 참고 사항

Sass는 프로그램적으로 변수를 만들 수 없어서 모든 색상을 위한 변수를 수동으로 만듭니다. 중간 값을 지정하고 (예를 들어, $blue-500), Sass의 mix() 색상 함수로 색조(밝게) 혹은 음영(어둡게)의 사용자 정의 색상 함수를 사용하고 있습니다.

mix()의 사용은 lighten()darken()간에 조금 다릅니다. 전자는 지정한 색상을 흰색과 검은색으로 섞지만, 후자는 각 색의 밝기 값을 조정하기만 하면 됩니다. 그 결과, CodePen 데모에서 보이는 것처럼 더 완전한 색을 얻을 수 있습니다.

tint-color()shade-color() 함수에서는 mix()$theme-color-interval 변수와 함께 사용합니다. 전체 소스 코드는 scss/_functions.scssscss/_variables.scss 파일을 참조해 주세요.

색상 Sass 맵

Bootstrap의 소스 Sass 파일에는 색상과 그 16진수 값의 목록을 빠르고 쉽게 반복하기 위한 세가지 맵이 포함되어 있습니다.

  • $colors는 이용 가능한 기본(500) 색상을 나열합니다.
  • $theme-colors는 의미 있는 이름을 가진 테마 색상을 나열합니다.(아래 그림 참조)
  • $grays는 모든 회색의 색조와 음영을 나열합니다.

scss/_variables.scss 안에는, Bootstrap의 색상 변수와 Sass 맵이 있습니다. 다음은 $colors Sass 맵의 예시입니다:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

맵에서 값을 추가, 삭제, 수정하여 다른 많은 컴포넌트에서의 값을 사용하는 방법을 업데이트합니다. 안타깝게도 현시점에서는 모든 컴포넌트가 이 Sass 맵을 이용하고 있는 것은 아닙니다. 추후 업데이트 시, 이 점을 개선하도록 노력하겠습니다. 그때까지는 Sass 맵과 ${color} 변수를 이용해 주세요.

예시

Sass에서 이를 사용하는 방법입니다:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

색상배경 유틸리티 클래스는 500 색상 값을 사용하여 colorbackground-color를 설정하는 데 사용할 수도 있습니다.

유틸리티 생성하기

v5.1.0에서 추가됨

Bootstrap에는 모든 색상 변수에 대한 colorbackground-color 유틸리티가 포함되어 있지 않지만 유틸리티 API 및 확장된 v5.1.0에 Sass 맵이 추가되어 있습니다.

  1. 시작하려면 함수, 변수, 믹스인, 유틸리티를 가져왔는지 확인하세요.
  2. map-merge-multiple() 함수를 사용하여 여러 Sass 맵을 새 맵에서 빠르게 병합하세요.
  3. 이 새로운 결합 맵을 병합하여 {color}-{level} 클래스 이름을 가진 유틸리티를 확장하세요.

다음은 위의 단계를 사용하여 텍스트 색상 유틸리티 (예: .text-purple-500)를 생성하는 예입니다.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

이렇게 하면 모든 색상과 레벨에 대해 새로운 .text-{color}-{level} 유틸리티가 생성됩니다. 다른 유틸리티 및 속성에 대해서도 동일한 작업을 수행할 수 있습니다.