간격 유틸리티 (Spacing)
요소의 여백(margin)과 안쪽 여백(padding)을 스페이서 토큰 값으로 빠르게 지정하는 유틸리티 클래스예요. 프로퍼티 축약어와 크기 값, 그리고 사용 표를 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
여백 (Margin)
Margin, marginX, marginY
- Margin - xl
- Margin x axis - pf-v6-u-mx-xl
- Margin y axis - pf-v6-u-my-xl
Margin top, margin right, margin bottom, margin left
- Margin-top - xl
- Margin-right - xl
- Margin-bottom - xl
- Margin-left - xl
반응형 여백 (Responsive margin)
- Margin-top - xl
- Margin-top - xl on-sm
- Margin-top - xl on-md
- Margin-top - xl on-lg
- Margin-top - xl on-xl
안쪽 여백 (Padding)
Padding, paddingX, paddingY
- Padding - xl
- Padding x axis - pf-v6-u-px-xl
- Padding y axis - pf-v6-u-py-xl
Padding top, padding right, padding bottom, padding left
- Padding-top - xl
- Padding-right - xl
- Padding-bottom - xl
- Padding-left - xl
반응형 안쪽 여백 (Responsive padding)
- Padding-top
- Padding-top - xl on-sm
- Padding-top - xl on-md
- Padding-top - xl on-lg
- Padding-top - xl on-xl
결합 (Combined)
결합 스페이서 (Combined spacers)
- Padding lg, margin lg
- Padding lg on-lg, margin lg
결합 스페이서 (반응형) (Combined spacers)
문서 (Documentation)
개요 (Overview)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-m-sm-on-lg
여백 프로퍼티 (Margin properties)
| 축약어 (Abbreviation) |
프로퍼티 (Property) |
| m |
margin |
| mt |
margin-top |
| mr |
margin-right |
| mb |
margin-bottom |
| ml |
margin-left |
| mx |
margin-left & margin-right |
| my |
margin-top & margin-bottom |
안쪽 여백 프로퍼티 (Padding properties)
| 축약어 (Abbreviation) |
프로퍼티 (Property) |
| p |
padding |
| pt |
padding-top |
| pr |
padding-right |
| pb |
padding-bottom |
| pl |
padding-left |
| px |
padding-left & padding-right |
| py |
padding-top & padding-bottom |
크기 값 (Size values)
| 축약어 (Abbreviation) |
값 (Property) |
| auto |
auto |
| 0 |
0 |
| xs |
var(--pf-v6-global--spacer--xs) |
| sm |
var(--pf-v6-global--spacer--sm) |
| md |
var(--pf-v6-global--spacer--md) |
| lg |
var(--pf-v6-global--spacer--lg) |
| xl |
var(--pf-v6-global--spacer--xl) |
| 2xl |
var(--pf-v6-global--spacer--2xl) |
| 3xl |
var(--pf-v6-global--spacer--3xl) |
| 4xl |
var(--pf-v6-global--spacer--4xl) |
사용법 (Usage)
| 클래스 (Class) |
적용 대상 (Applied to) |
결과 (Outcome) |
.pf-v6-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]} |
* |
margin top, right, bottom, left 또는 margin-left & right, margin-top & bottom을 스페이서 값으로 설정해요. |
.pf-v6-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]} |
* |
padding top, right, bottom, left 또는 padding-left & right, padding-top & bottom을 스페이서 값으로 설정해요. |
더 알아보기 (Learn more)
