배경색 유틸리티
배경색 유틸리티 (Background color)
요소의 배경색을 수정하는 유틸리티 클래스예요. 비활성·역상·하이라이트 배경색 클래스의 사용 방식과 주의점을 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
표준 배경색 (Standard background colors)
- Disabled background color
- Inverse background color
- Highlight background color
문서 (Documentation)
개요 (Overview)
이 배경색 유틸리티는 요소의 배경색을 수정하는 데 사용할 수 있어요. 대부분의 경우, 사용 가능한 수정자를 갖춘 컴포넌트를 사용하는 것이 대부분의 디자인을 구현하기에 충분하며, 이러한 유틸리티를 사용한 커스터마이징보다 선호되어야 해요.
특히 배경색을 적용할 때는 주의해야 해요. 텍스트의 가독성과 접근성에 부정적인 영향을 미칠 수 있기 때문이에요. 자세한 내용은 대비 비율(contrast ratios)을 참고하세요.
"inverse" 배경색은 "inverse" 텍스트 색상과 함께 사용하기에 가장 좋다는 것을 나타내기 위해 그렇게 labeled 되어 있어요.
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-background-color-disabled-on-lg
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-background-color-{disabled, inverse, highlight}{-on-[breakpoint]} |
* | 배경색을 적용해요. |