크기 유틸리티
크기 유틸리티 (Sizing)
요소의 너비와 높이를 퍼센트, 뷰포트 단위, 또는 min/max로 지정하는 유틸리티 클래스예요. 클래스별 결과를 예시와 사용 표로 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
너비 기본 및 퍼센트 단위 (Width base and percentage units)
.pf-v6-u-w-0.pf-v6-u-w-25.pf-v6-u-w-50.pf-v6-u-w-75.pf-v6-u-w-100.pf-v6-u-w-initial(auto).pf-v6-u-w-inherit
사용법 (Usage)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-w-initial-on-lg
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-w-initial{-on-[breakpoint]} |
* | width: initial (auto)로 설정해요. |
.pf-v6-u-w-inherit{-on-[breakpoint]} |
* | width: inherit로 설정해요. |
.pf-v6-u-w-0{-on-[breakpoint]} |
* | width: 0%로 설정해요. |
.pf-v6-u-w-25{-on-[breakpoint]} |
* | width: 25%로 설정해요. |
.pf-v6-u-w-33{-on-[breakpoint]} |
* | width: calc(100% / 3)로 설정해요. |
.pf-v6-u-w-50{-on-[breakpoint]} |
* | width: 50%로 설정해요. |
.pf-v6-u-w-66{-on-[breakpoint]} |
* | width: calc(100% / 3 * 2)로 설정해요. |
.pf-v6-u-w-75{-on-[breakpoint]} |
* | width: 75%로 설정해요. |
.pf-v6-u-w-100{-on-[breakpoint]} |
* | width: 100%로 설정해요. |
너비 뷰포트 단위 (Width viewport units)
사용법 (Usage)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-w-25vw-on-lg
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-w-25vw{-on-[breakpoint]} |
* | width: 25vw로 설정해요. |
.pf-v6-u-w-33vw{-on-[breakpoint]} |
* | width: calc(100vw / 3)로 설정해요. |
.pf-v6-u-w-50vw{-on-[breakpoint]} |
* | width: 50vw로 설정해요. |
.pf-v6-u-w-66vw{-on-[breakpoint]} |
* | width: calc(100vw / 3 * 2)로 설정해요. |
.pf-v6-u-w-75vw{-on-[breakpoint]} |
* | width: 75vw로 설정해요. |
.pf-v6-u-w-100vw{-on-[breakpoint]} |
* | width: 100vw로 설정해요. |
높이 기본 및 퍼센트 단위 (Height base and percentage units)
.pf-v6-u-h-0.pf-v6-u-h-25.pf-v6-u-h-50.pf-v6-u-h-75.pf-v6-u-h-100.pf-v6-u-h-initial.pf-v6-u-h-inherit
사용법 (Usage)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-h-initial-on-lg
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-h-initial{-on-[breakpoint]} |
* | height: initial (auto)로 설정해요. |
.pf-v6-u-h-inherit{-on-[breakpoint]} |
* | height: inherit로 설정해요. |
.pf-v6-u-h-0{-on-[breakpoint]} |
* | height: 0%로 설정해요. |
.pf-v6-u-h-25{-on-[breakpoint]} |
* | height: 25%로 설정해요. |
.pf-v6-u-h-33{-on-[breakpoint]} |
* | height: calc(100% / 3)로 설정해요. |
.pf-v6-u-h-50{-on-[breakpoint]} |
* | height: 50%로 설정해요. |
.pf-v6-u-h-66{-on-[breakpoint]} |
* | height: calc(100% / 3 * 2)로 설정해요. |
.pf-v6-u-h-75{-on-[breakpoint]} |
* | height: 75%로 설정해요. |
.pf-v6-u-h-100{-on-[breakpoint]} |
* | height: 100%로 설정해요. |
높이 뷰포트 단위 (Height viewport units)
사용법 (Usage)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-h-25vh-on-lg
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-h-25vh{-on-[breakpoint]} |
* | height: 25vh로 설정해요. |
.pf-v6-u-h-33vh{-on-[breakpoint]} |
* | height: calc(100vh / 3)로 설정해요. |
.pf-v6-u-h-50vh{-on-[breakpoint]} |
* | height: 50vh로 설정해요. |
.pf-v6-u-h-66vh{-on-[breakpoint]} |
* | height: calc(100vh / 3 * 2)로 설정해요. |
.pf-v6-u-h-75vh{-on-[breakpoint]} |
* | height: 75vh로 설정해요. |
.pf-v6-u-h-100vh{-on-[breakpoint]} |
* | height: 100vh로 설정해요. |
최소 너비 (Min width)
- Min-width 50ch 예시
최대 너비 (Max width)
- Max-width 50ch 예시
최소 및 최대 너비 (Min and max width)
- Min-width 30ch, max-width 50ch 예시
반응형 너비 제어 (Responsive width control)
- Min-width 20ch, max-width 30ch, max-width-on-md 50ch, max-width-on-xl 70ch 예시
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-min-width |
* | min-width: var(--pf-v6-u-min-width--MinWidth{-on-[breakpoint]})로 설정해요. |
.pf-v6-u-max-width |
* | max-width: var(--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]})로 설정해요. |
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .--pf-v6-u-min-width--MinWidth-on-lg
| 커스텀 프로퍼티 (Custom property) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
--pf-v6-u-min-width--MinWidth{-on-[breakpoint]}: {width} |
.pf-v6-u-min-width |
min width 커스텀 프로퍼티를 수정해요. |
--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]}: {width} |
.pf-v6-u-max-width |
max width 커스텀 프로퍼티를 수정해요. |
최소 높이 (Min height)
- Min-height 50ch 예시
최대 높이 (Max height)
- Max-height 50ch 예시
최소 및 최대 높이 (Min and max height)
- Min-height 30ch, max-height 50ch 예시
반응형 높이 제어 (Responsive height control)
- Min-height 20ch, max-height 30ch, max-height-on-md 50ch, max-height-on-xl 70ch 예시
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-min-height |
* | min-height: var(--pf-v6-u-min-height--MinHeight{-on-[breakpoint]})로 설정해요. |
.pf-v6-u-max-height |
* | max-height: var(--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]})로 설정해요. |
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .--pf-v6-u-min-height--MinHeight-on-lg
| 커스텀 프로퍼티 (Custom property) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
--pf-v6-u-min-height--MinHeight{-on-[breakpoint]}: {height} |
.pf-v6-u-min-height |
min height 커스텀 프로퍼티를 수정해요. |
--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]}: {height} |
.pf-v6-u-max-height |
max height 커스텀 프로퍼티를 수정해요. |