Color

Color (색상)

Bootstrap은 스타일과 컴포넌트에 테마를 입히는 광범위한 색상 시스템으로 지원됩니다. 이를 통해 모든 프로젝트에 대해 더 포괄적인 커스터마이즈와 확장이 가능해집니다.

출처: 문서

본문

색상 (Colors)

v5.3.0에서 추가됨

Bootstrap의 색상 팔레트는 v5.3.0에서 계속 확장되고 더 세밀해졌습니다. secondary와 tertiary 텍스트 및 배경 색상용 새 변수와, 테마 색상용 {color}-bg-subtle, {color}-border-subtle, {color}-text-emphasis를 추가했습니다. 이 새로운 색상들은 light와 dark 같은 여러 색상 모드에 걸쳐 커스터마이즈하기 쉽게 만드는 것을 명시적 목표로 Sass와 CSS 변수(색상 맵이나 유틸리티 클래스는 아님)를 통해 사용할 수 있습니다. 이 새로운 변수들은 :root에 전역적으로 설정되며 새로운 다크 색상 모드에 맞게 적응되지만, 원래 테마 색상들은 그대로 유지됩니다.

-rgb로 끝나는 색상은 rgb()와 rgba() 색상 모드에서 사용하기 위한 red, green, blue 값을 제공합니다. 예를 들어 rgba(var(--bs-secondary-bg-rgb), .5)입니다.

주의! 새 secondary와 tertiary 색상, 그리고 기존의 secondary 테마 색상, light와 dark 테마 색상 사이에 약간의 혼동이 있을 수 있습니다. 이것은 v6에서 정리될 예정입니다.

새 색상 사용하기 (Using the new colors)

이 새로운 색상들은 --bs-primary-bg-subtle과 .bg-primary-subtle 같은 CSS 변수와 유틸리티 클래스로 접근할 수 있습니다. 이를 통해 변수로 자신만의 CSS 규칙을 구성하거나 클래스로 스타일을 빠르게 적용할 수 있습니다. 유틸리티는 색상과 연결된 CSS 변수로 만들어지며, 다크 모드용으로 그 CSS 변수들을 커스터마이즈하므로 기본적으로 색상 모드에도 적응합니다.

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

테마 색상 (Theme colors)

모든 색상의 하위 집합을 사용해 색상 구성을 생성하기 위한 더 작은 색상 팔레트를 만들며, 이것도 Bootstrap의 scss/_variables.scss 파일에서 Sass 변수와 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 maps and loops 문서를 확인하세요.

모든 색상 (All colors)

모든 Bootstrap 색상은 scss/_variables.scss 파일에서 Sass 변수와 Sass 맵으로 사용할 수 있습니다. 파일 크기 증가를 피하기 위해 이러한 각 변수에 대해 텍스트나 배경 색상 클래스를 만들지 않습니다. 대신 테마 팔레트를 위해 이 색상들 중 일부를 선택합니다.

색상을 커스터마이즈하면서 대비 비율을 모니터링하세요. 아래에 보이듯이 메인 색상 각각에 세 가지 대비 비율을 추가했습니다 — 하나는 스와치의 현재 색상용, 하나는 흰색 배경용, 하나는 검은색 배경용입니다.

• $blue #0d6efd ($blue-100부터 $blue-900까지)
• $indigo #6610f2 ($indigo-100부터 $indigo-900까지)
• $purple #6f42c1 ($purple-100부터 $purple-900까지)
• $pink #d63384 ($pink-100부터 $pink-900까지)
• $red #dc3545 ($red-100부터 $red-900까지)
• $orange #fd7e14 ($orange-100부터 $orange-900까지)
• $yellow #ffc107 ($yellow-100부터 $yellow-900까지)
• $green #198754 ($green-100부터 $green-900까지)
• $teal #20c997 ($teal-100부터 $teal-900까지)
• $cyan #0dcaf0 ($cyan-100부터 $cyan-900까지)
• $gray-500 #adb5bd ($gray-100부터 $gray-900까지)
• $black #000
• $white #fff

Sass에 대한 참고 (Notes on Sass)

Sass는 프로그래밍 방식으로 변수를 생성할 수 없으므로 모든 색조(tint)와 음영(shade)에 대한 변수를 직접 수동으로 만들었습니다. 중간값(예: $blue-500)을 지정하고 커스텀 색상 함수를 사용해 Sass의 mix() 색상 함수로 색상을 색조(밝게) 또는 음영(어둡게) 처리합니다.

mix()를 사용하는 것은 lighten()과 darken()과 다릅니다 — 전자는 지정된 색상을 흰색이나 검은색과 혼합하는 반면, 후자는 각 색상의 밝기 값만 조정합니다. 결과는 이 CodePen 데모에서 보여주듯 훨씬 더 완전한 색상 모음입니다.

tint-color()와 shade-color() 함수는 mix()와 함께 $theme-color-interval 변수를 사용하는데, 이 변수는 우리가 만드는 각 혼합 색상에 대한 단계별 백분율 값을 지정합니다. 전체 소스 코드는 scss/_functions.scss와 scss/_variables.scss 파일을 참고하세요.

색상 Sass 맵 (Color Sass maps)

Bootstrap의 소스 Sass 파일에는 색상 목록과 그 hex 값을 빠르고 쉽게 순환할 수 있게 해 주는 세 가지 맵이 포함되어 있습니다.

• $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 맵을 활용하지는 않습니다. 향후 업데이트에서 이를 개선하기 위해 노력할 것입니다. 그때까지는 ${color} 변수와 이 Sass 맵을 사용할 계획을 세우세요.

예시 (Example)

Sass에서 이렇게 사용할 수 있습니다:

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

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

유틸리티 생성하기 (Generating utilities)

v5.1.0에서 추가됨

Bootstrap은 모든 색상 변수에 대한 color와 background-color 유틸리티를 포함하지 않지만, 유틸리티 API와 v5.1.0에서 추가된 확장 Sass 맵으로 직접 생성할 수 있습니다.

• 먼저 functions, variables, mixins, utilities를 가져왔는지 확인하세요.
• map-merge-multiple() 함수를 사용해 여러 Sass 맵을 새 맵으로 빠르게 병합하세요.
• 이 새 병합 맵을 사용해 어떤 유틸리티든 {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} 유틸리티를 생성합니다. 다른 유틸리티와 속성에도 동일하게 할 수 있습니다.

더 알아보기 (Learn more)

• Bootstrap 문서