Color Palette helpers

Color Palette helpers (색상 팔레트 헬퍼)

Bulma는 7가지 기본 색상을 제공하고, 각 색상에 대해 자동으로 셰이드 모음을 만들어요. 이 셰이드들을 텍스트 색상이나 배경 색상으로 활용해서 같은 색의 다양한 변형을 손쉽게 쓸 수 있어요.

출처: 문서

본문

Bulma는 7가지 기본 색상을 제공해요:

색상
text
link
primary
info
success
warning
danger

Bulma는 이 각각의 색상에 대해 자동으로 셰이드 모음을 생성해요. 이것들이 색상 팔레트 역할을 해서, 같은 색의 다양한 변형을 가지고 놀 수 있어요.

텍스트 색상 (Text color)

Bulma는 각 색상에 대해 27개의 셰이드를 가진 CSS 클래스를 제공해요. 각 셰이드에는 인버트(invert) 버전도 함께 있어서, 전경/배경 조합을 만들 때 유용해요.

클래스 코드 예시 인버트(Invert)
has-text-primary ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-00` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-05` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-10` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-15` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-20` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-25` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-30` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-35` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-40` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-45` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-50` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-55` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-60` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-65` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-70` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-75` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-80` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-85` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-90` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-95` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-100` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-light` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-dark` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-soft` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-bold` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma | | `has-text-primary-on-scheme` | ```html

Hello Bulma

``` | Hello Bulma | Hello Bulma |

다른 6가지 색상(text, link, info, success, warning, danger)에도 primary 대신 각 색상 이름을 넣어 같은 방식으로 동일한 셰이드 클래스를 사용할 수 있어요.

배경 색상 (Background color)

27개의 셰이드는 모두 배경 헬퍼로도 사용할 수 있어요. 인버트 색상을 전경으로 함께 사용하면, 클래스 2개만으로 읽기 좋은 요소를 쉽게 만들 수 있어요.

클래스 코드 예시 스와치(Swatch)
has-background-primary ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-00` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-05` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-10` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-15` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-20` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-25` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-30` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-35` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-40` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-45` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-50` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-55` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-60` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-65` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-70` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-75` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-80` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-85` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-90` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-95` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-100` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-light` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-dark` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-soft` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-bold` | ```html

Hello Bulma

``` | Hello Bulma | | | `has-background-primary-on-scheme` | ```html

Hello Bulma

``` | Hello Bulma | |

더 알아보기 (Learn more)