텍스트 유틸리티
텍스트 유틸리티 (Text)
텍스트 요소의 글꼴, 크기, 무게, 색상, 줄바꿈 방식을 수정하는 유틸리티 클래스예요. 어떤 클래스가 어떤 결과를 만드는지 예시와 사용 표로 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
글꼴 패밀리 (Font family)
- Text
- Heading
- Monospace
글꼴 크기 (Font size)
- Extra small text
- Small text
- Medium text
- Large text
- Extra large text
- 2xl text
- 3xl text
- 4xl text
글꼴 무게 (Font weight)
- Normal
- Bold
표준 텍스트 색상 (Standard text colors)
- Regular text color
- Brand font color
- Placeholder text color
- Required text color
- Subtle text color
역상 색상 (Inverse colors)
이 색상은 "inverse" 배경색과 함께 사용하기에 가장 좋아요.
- Inverse text color
링크 색상 (Link colors)
- Link text color
- Hover link text color
- Visited link text color
상태 및 상태 텍스트 색상 (Status and state text colors)
- Success status text color
- Warning status text color
- Danger status text color
- Info status text color
- Custom status text color
비활성 텍스트 색상 (Disabled text colors)
- Disabled text color
- Disabled text color on disabled background
아이콘 색상 (Icon colors)
텍스트 제어 (Controlling text)
Breakword (단어 분리)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.
No Wrap (줄바꿈 없음)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula.
Wrap (줄바꿈)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.
Truncate (잘라내기)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.
문서 (Documentation)
개요 (Overview)
이 텍스트 유틸리티는 PatternFly 프레임워크 안에서 텍스트를 수정하는 데 사용할 수 있어요. 대부분의 경우, 사용 가능한 수정자를 갖춘 컴포넌트를 사용하는 것이 대부분의 디자인을 구현하기에 충분하며, 이러한 유틸리티를 사용한 커스터마이징보다 선호되어야 해요.
특히 텍스트 색상을 적용할 때는 주의해야 해요. 텍스트의 가독성과 접근성에 부정적인 영향을 미칠 수 있기 때문이에요. 대비 비율(contrast ratios)에 대한 정보를 참고하세요.
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-font-size-xl-on-lg
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]} |
* | font-size를 xs, sm, md, lg, xl, 2xl, 3xl 또는 4xl로 설정해요. |
.pf-v6-u-font-family-{text, heading, monospace} |
* | font-family를 text, heading 또는 monospace로 설정해요. |
.pf-v6-u-font-weight-{normal, bold}{-on-[breakpoint]} |
* | font-weight를 light, normal 또는 bold로 설정해요. |
.pf-v6-u-text-color-{regular, brand, placeholder, requried, subtle}{-on-[breakpoint]} |
* | font-color를 설정해요. |
.pf-v6-u-text-color-link{-on-[breakpoint]} |
* | font-color를 link 색상으로 설정해요. |
.pf-v6-u-text-color-link-hover{-on-[breakpoint]} |
* | font-color를 hover 링크 색상으로 설정해요. |
.pf-v6-u-text-color-link-visited{-on-[breakpoint]} |
* | font-color를 visited 링크 색상으로 설정해요. |
.pf-v6-u-text-color-status-{success, warning, danger, info, custom}{-on-[breakpoint]} |
* | font-color를 상태 색상으로 설정해요. |
.pf-v6-u-text-color-disabled{-on-[breakpoint]} |
* | font-color를 비활성 텍스트 색상으로 설정해요. |
.pf-v6-u-text-color-on-disabled{-on-[breakpoint]} |
* | font-color를 비활성 배경의 텍스트 색상으로 설정해요. |
.pf-v6-u-icon-color-{regular, brand, placeholder, requried, subtle}{-on-[breakpoint]} |
* | 아이콘의 font-color를 설정해요. |
.pf-v6-u-icon-color-status-{success, warning, danger, info, custom}{-on-[breakpoint]} |
* | font-color를 아이콘 상태 색상으로 설정해요. |
.pf-v6-u-text-break-word{-on-[breakpoint]} |
* | word-break를 break-word로 설정해요. |
.pf-v6-u-text-nowrap{-on-[breakpoint]} |
* | white-space를 nowrap으로 설정해요. |
.pf-v6-u-text-wrap{-on-[breakpoint]} |
* | white-space를 normal로 설정해요. |
.pf-v6-u-text-truncate |
* | 텍스트 필드를 잘라내요(truncate). |