Utilities
값 직접 지정
길이 또는 숫자 속성에 정적 숫자 하나를 전달합니다.
이 페이지의 내용
클래스
| 클래스 | 선언 |
|---|---|
m(<number>) | margin: calc(<number> * 1px); |
p(<number>) | padding: calc(<number> * 1px); |
gap(<number>) | gap: calc(<number> * 1px); |
w(<number>) | width: calc(<number> * 1px); |
h(<number>) | height: calc(<number> * 1px); |
r(<number>) | border-radius: calc(<number> * 1px); |
b(<number>) | border-width: calc(<number> * 1px); |
grow(<number>) | flex-grow: <number>; |
shrink(<number>) | flex-shrink: <number>; |
order(<integer>) | order: <integer>; |
함수 90개 더 보기
| 클래스 | 선언 |
|---|---|
mt(<number>) | margin-top: calc(<number> * 1px); |
mr(<number>) | margin-right: calc(<number> * 1px); |
mb(<number>) | margin-bottom: calc(<number> * 1px); |
ml(<number>) | margin-left: calc(<number> * 1px); |
mx(<number>) | margin-inline: calc(<number> * 1px); |
mxs(<number>) | margin-inline-start: calc(<number> * 1px); |
mxe(<number>) | margin-inline-end: calc(<number> * 1px); |
my(<number>) | margin-block: calc(<number> * 1px); |
mys(<number>) | margin-block-start: calc(<number> * 1px); |
mye(<number>) | margin-block-end: calc(<number> * 1px); |
pt(<number>) | padding-top: calc(<number> * 1px); |
pr(<number>) | padding-right: calc(<number> * 1px); |
pb(<number>) | padding-bottom: calc(<number> * 1px); |
pl(<number>) | padding-left: calc(<number> * 1px); |
px(<number>) | padding-inline: calc(<number> * 1px); |
pxs(<number>) | padding-inline-start: calc(<number> * 1px); |
pxe(<number>) | padding-inline-end: calc(<number> * 1px); |
py(<number>) | padding-block: calc(<number> * 1px); |
pys(<number>) | padding-block-start: calc(<number> * 1px); |
pye(<number>) | padding-block-end: calc(<number> * 1px); |
scroll-m(<number>) | scroll-margin: calc(<number> * 1px); |
scroll-mt(<number>) | scroll-margin-top: calc(<number> * 1px); |
scroll-mr(<number>) | scroll-margin-right: calc(<number> * 1px); |
scroll-mb(<number>) | scroll-margin-bottom: calc(<number> * 1px); |
scroll-ml(<number>) | scroll-margin-left: calc(<number> * 1px); |
scroll-mx(<number>) | scroll-margin-inline: calc(<number> * 1px); |
scroll-mxs(<number>) | scroll-margin-inline-start: calc(<number> * 1px); |
scroll-mxe(<number>) | scroll-margin-inline-end: calc(<number> * 1px); |
scroll-my(<number>) | scroll-margin-block: calc(<number> * 1px); |
scroll-mys(<number>) | scroll-margin-block-start: calc(<number> * 1px); |
scroll-mye(<number>) | scroll-margin-block-end: calc(<number> * 1px); |
scroll-p(<number>) | scroll-padding: calc(<number> * 1px); |
scroll-pt(<number>) | scroll-padding-top: calc(<number> * 1px); |
scroll-pr(<number>) | scroll-padding-right: calc(<number> * 1px); |
scroll-pb(<number>) | scroll-padding-bottom: calc(<number> * 1px); |
scroll-pl(<number>) | scroll-padding-left: calc(<number> * 1px); |
scroll-px(<number>) | scroll-padding-inline: calc(<number> * 1px); |
scroll-pxs(<number>) | scroll-padding-inline-start: calc(<number> * 1px); |
scroll-pxe(<number>) | scroll-padding-inline-end: calc(<number> * 1px); |
scroll-py(<number>) | scroll-padding-block: calc(<number> * 1px); |
scroll-pys(<number>) | scroll-padding-block-start: calc(<number> * 1px); |
scroll-pye(<number>) | scroll-padding-block-end: calc(<number> * 1px); |
top(<number>) | top: calc(<number> * 1px); |
right(<number>) | right: calc(<number> * 1px); |
bottom(<number>) | bottom: calc(<number> * 1px); |
left(<number>) | left: calc(<number> * 1px); |
inset(<number>) | inset: calc(<number> * 1px); |
ix(<number>) | inset-inline: calc(<number> * 1px); |
ixs(<number>) | inset-inline-start: calc(<number> * 1px); |
ixe(<number>) | inset-inline-end: calc(<number> * 1px); |
iy(<number>) | inset-block: calc(<number> * 1px); |
iys(<number>) | inset-block-start: calc(<number> * 1px); |
iye(<number>) | inset-block-end: calc(<number> * 1px); |
col-gap(<number>) | column-gap: calc(<number> * 1px); |
row-gap(<number>) | row-gap: calc(<number> * 1px); |
border-spacing(<number>) | border-spacing: calc(<number> * 1px); |
outline-offset(<number>) | outline-offset: calc(<number> * 1px); |
shape-margin(<number>) | shape-margin: calc(<number> * 1px); |
translate(<number>) | translate: calc(<number> * 1px); |
word-spacing(<number>) | word-spacing: calc(<number> * 1px); |
size-x(<number>) | inline-size: calc(<number> * 1px); |
size-y(<number>) | block-size: calc(<number> * 1px); |
min-w(<number>) | min-width: calc(<number> * 1px); |
min-h(<number>) | min-height: calc(<number> * 1px); |
min-size-x(<number>) | min-inline-size: calc(<number> * 1px); |
min-size-y(<number>) | min-block-size: calc(<number> * 1px); |
max-w(<number>) | max-width: calc(<number> * 1px); |
max-h(<number>) | max-height: calc(<number> * 1px); |
max-size-x(<number>) | max-inline-size: calc(<number> * 1px); |
max-size-y(<number>) | max-block-size: calc(<number> * 1px); |
basis(<number>) | flex-basis: calc(<number> * 1px); |
rtl(<number>) | border-top-left-radius: calc(<number> * 1px); |
rtr(<number>) | border-top-right-radius: calc(<number> * 1px); |
rbl(<number>) | border-bottom-left-radius: calc(<number> * 1px); |
rbr(<number>) | border-bottom-right-radius: calc(<number> * 1px); |
rss(<number>) | border-start-start-radius: calc(<number> * 1px); |
rse(<number>) | border-start-end-radius: calc(<number> * 1px); |
res(<number>) | border-end-start-radius: calc(<number> * 1px); |
ree(<number>) | border-end-end-radius: calc(<number> * 1px); |
bt(<number>) | border-top-width: calc(<number> * 1px); |
br(<number>) | border-right-width: calc(<number> * 1px); |
bb(<number>) | border-bottom-width: calc(<number> * 1px); |
bl(<number>) | border-left-width: calc(<number> * 1px); |
bx(<number>) | border-inline-width: calc(<number> * 1px); |
bxs(<number>) | border-inline-start-width: calc(<number> * 1px); |
bxe(<number>) | border-inline-end-width: calc(<number> * 1px); |
by(<number>) | border-block-width: calc(<number> * 1px); |
bys(<number>) | border-block-start-width: calc(<number> * 1px); |
bye(<number>) | border-block-end-width: calc(<number> * 1px); |
outline(<number>) | outline-width: calc(<number> * 1px); |
길이 함수는 숫자에 1px를 곱하고, grow(), shrink(), order()는 숫자를 그대로 전달합니다. 다른 단위나 동적 값에는 (margin:1rem) 같은 네이티브 선언을 사용하세요.
숫자의 의미는 속성에 따라 달라집니다
p(12)는 padding: calc(12 * 1px)를 출력하므로 숫자는 픽셀 수를 뜻합니다. 간격 척도의 키나 테마 간격 토큰의 배수가 아닙니다. p(1.5) 같은 소수도 허용됩니다.
직접 지정한 숫자는 픽셀 길이나 단위 없는 계수가 됩니다
왼쪽 숫자는 픽셀 길이가 됩니다. 오른쪽 숫자는 flex 계수입니다. 기준 크기가 0이고 콘텐츠 최소 크기 제약이 없어 1:2 분배만 보여 줍니다. 다른 기준 크기나 최소 크기는 최종 너비를 바꿀 수 있습니다.
텍스트 설명
- padding 예제는 실제 p(12)를 적용해 콘텐츠와 각 바깥 가장자리 사이에 정확히 12px를 둡니다. 파란색 주석이 이 안쪽 여백을 보여 줍니다.
- flex 예제는 너비 252px, gap 12px의 행에서 flex 기준 크기와 최소 너비가 모두 0인 두 항목에 grow(1)과 grow(2)를 적용합니다.
- 남은 240px는 80px와 160px로 분배됩니다. 계수는 여전히 단위가 없으며 픽셀 너비가 아닙니다.
- 이 비교는 다른 조건을 통제합니다. 기준 크기가 0이 아니거나 콘텐츠 최소 크기가 있으면 최종 너비가 확장 비율과 일치하지 않을 수 있습니다. 각 함수의 선언은 문서에 나와 있습니다.
grow(1)과 shrink(1)은 단위가 없는 flex 계수입니다. 확장은 남은 여유 공간을 분배합니다. 그림에서는 기준 크기를 0으로 하고 콘텐츠의 최소 크기 제약을 없애 1:2 비율만 보여 줍니다. 다른 기준 크기나 최소 크기를 사용하면 계수만으로 최종 너비가 결정되지는 않습니다. 축소 분배에는 각 항목의 flex 기준 크기도 반영됩니다.
order()는 숫자를 그대로 출력하지만 CSS 속성은 정수를 요구합니다. 음수 값에는 각 속성의 규칙이 적용됩니다. m(-4)는 유효한 음수 마진이지만 음수 padding이나 음수 flex 계수로 음수 사용값을 요청할 수는 없습니다.
정적 숫자 하나만 전달할 수 있습니다. 단위, var(), 산술식은 (padding:var(--panel-space)) 같은 네이티브 선언에 작성하세요. 이름을 붙여 공유하는 길이에는 p-card 같은 테마 토큰을 사용합니다.
이 함수들은 표에 나열된 선언만 설정합니다. b(1)에는 테두리 스타일이, top(4)에는 inset이 적용되는 위치 지정 방식이, gap(12)에는 간격이 적용되는 레이아웃이 필요합니다. 표에서는 논리 속성과 물리 속성을 구분합니다.
관련 문서: 간격 토큰, 네이티브 선언, flex 계수.
사용 예
정확한 픽셀 길이를 지정하고 상자 하나가 남은 공간을 차지하도록 합니다.
Fixed
Grows to fill
<div class="… flex flex-wrap gap(12)"> <div class="… p(12) r(10) b(1) b-solid">Fixed</div> <div class="… grow(1) p(12) r(10) b(1) b-dashed">Grows to fill</div></div>생성된 CSS
@layer utilities { .r\(10\) { border-radius: calc(10 * 1px) } .b-dashed { border-style: dashed } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .flex { display: flex } .grow\(1\) { flex-grow: 1 } .flex-wrap { flex-wrap: wrap } .gap\(12\) { gap: calc(12 * 1px) } .p\(12\) { padding: calc(12 * 1px) }}사용자 정의
프리셋은 이 클래스를 @utility로 정의합니다. 스타일시트에서 같은 이름을 정의하면 기존 정의를 대체합니다.
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}정의 100개 모두 보기
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}@utility mt(--value <number>) { margin-top: calc(var(--value) * 1px);}@utility mr(--value <number>) { margin-right: calc(var(--value) * 1px);}@utility mb(--value <number>) { margin-bottom: calc(var(--value) * 1px);}@utility ml(--value <number>) { margin-left: calc(var(--value) * 1px);}@utility mx(--value <number>) { margin-inline: calc(var(--value) * 1px);}@utility mxs(--value <number>) { margin-inline-start: calc(var(--value) * 1px);}@utility mxe(--value <number>) { margin-inline-end: calc(var(--value) * 1px);}@utility my(--value <number>) { margin-block: calc(var(--value) * 1px);}@utility mys(--value <number>) { margin-block-start: calc(var(--value) * 1px);}@utility mye(--value <number>) { margin-block-end: calc(var(--value) * 1px);}@utility p(--value <number>) { padding: calc(var(--value) * 1px);}@utility pt(--value <number>) { padding-top: calc(var(--value) * 1px);}@utility pr(--value <number>) { padding-right: calc(var(--value) * 1px);}@utility pb(--value <number>) { padding-bottom: calc(var(--value) * 1px);}@utility pl(--value <number>) { padding-left: calc(var(--value) * 1px);}@utility px(--value <number>) { padding-inline: calc(var(--value) * 1px);}@utility pxs(--value <number>) { padding-inline-start: calc(var(--value) * 1px);}@utility pxe(--value <number>) { padding-inline-end: calc(var(--value) * 1px);}@utility py(--value <number>) { padding-block: calc(var(--value) * 1px);}@utility pys(--value <number>) { padding-block-start: calc(var(--value) * 1px);}@utility pye(--value <number>) { padding-block-end: calc(var(--value) * 1px);}@utility scroll-m(--value <number>) { scroll-margin: calc(var(--value) * 1px);}@utility scroll-mt(--value <number>) { scroll-margin-top: calc(var(--value) * 1px);}@utility scroll-mr(--value <number>) { scroll-margin-right: calc(var(--value) * 1px);}@utility scroll-mb(--value <number>) { scroll-margin-bottom: calc(var(--value) * 1px);}@utility scroll-ml(--value <number>) { scroll-margin-left: calc(var(--value) * 1px);}@utility scroll-mx(--value <number>) { scroll-margin-inline: calc(var(--value) * 1px);}@utility scroll-mxs(--value <number>) { scroll-margin-inline-start: calc(var(--value) * 1px);}@utility scroll-mxe(--value <number>) { scroll-margin-inline-end: calc(var(--value) * 1px);}@utility scroll-my(--value <number>) { scroll-margin-block: calc(var(--value) * 1px);}@utility scroll-mys(--value <number>) { scroll-margin-block-start: calc(var(--value) * 1px);}@utility scroll-mye(--value <number>) { scroll-margin-block-end: calc(var(--value) * 1px);}@utility scroll-p(--value <number>) { scroll-padding: calc(var(--value) * 1px);}@utility scroll-pt(--value <number>) { scroll-padding-top: calc(var(--value) * 1px);}@utility scroll-pr(--value <number>) { scroll-padding-right: calc(var(--value) * 1px);}@utility scroll-pb(--value <number>) { scroll-padding-bottom: calc(var(--value) * 1px);}@utility scroll-pl(--value <number>) { scroll-padding-left: calc(var(--value) * 1px);}@utility scroll-px(--value <number>) { scroll-padding-inline: calc(var(--value) * 1px);}@utility scroll-pxs(--value <number>) { scroll-padding-inline-start: calc(var(--value) * 1px);}@utility scroll-pxe(--value <number>) { scroll-padding-inline-end: calc(var(--value) * 1px);}@utility scroll-py(--value <number>) { scroll-padding-block: calc(var(--value) * 1px);}@utility scroll-pys(--value <number>) { scroll-padding-block-start: calc(var(--value) * 1px);}@utility scroll-pye(--value <number>) { scroll-padding-block-end: calc(var(--value) * 1px);}@utility top(--value <number>) { top: calc(var(--value) * 1px);}@utility right(--value <number>) { right: calc(var(--value) * 1px);}@utility bottom(--value <number>) { bottom: calc(var(--value) * 1px);}@utility left(--value <number>) { left: calc(var(--value) * 1px);}@utility inset(--value <number>) { inset: calc(var(--value) * 1px);}@utility ix(--value <number>) { inset-inline: calc(var(--value) * 1px);}@utility ixs(--value <number>) { inset-inline-start: calc(var(--value) * 1px);}@utility ixe(--value <number>) { inset-inline-end: calc(var(--value) * 1px);}@utility iy(--value <number>) { inset-block: calc(var(--value) * 1px);}@utility iys(--value <number>) { inset-block-start: calc(var(--value) * 1px);}@utility iye(--value <number>) { inset-block-end: calc(var(--value) * 1px);}@utility gap(--value <number>) { gap: calc(var(--value) * 1px);}@utility col-gap(--value <number>) { column-gap: calc(var(--value) * 1px);}@utility row-gap(--value <number>) { row-gap: calc(var(--value) * 1px);}@utility border-spacing(--value <number>) { border-spacing: calc(var(--value) * 1px);}@utility outline-offset(--value <number>) { outline-offset: calc(var(--value) * 1px);}@utility shape-margin(--value <number>) { shape-margin: calc(var(--value) * 1px);}@utility translate(--value <number>) { translate: calc(var(--value) * 1px);}@utility word-spacing(--value <number>) { word-spacing: calc(var(--value) * 1px);}@utility w(--value <number>) { width: calc(var(--value) * 1px);}@utility h(--value <number>) { height: calc(var(--value) * 1px);}@utility size-x(--value <number>) { inline-size: calc(var(--value) * 1px);}@utility size-y(--value <number>) { block-size: calc(var(--value) * 1px);}@utility min-w(--value <number>) { min-width: calc(var(--value) * 1px);}@utility min-h(--value <number>) { min-height: calc(var(--value) * 1px);}@utility min-size-x(--value <number>) { min-inline-size: calc(var(--value) * 1px);}@utility min-size-y(--value <number>) { min-block-size: calc(var(--value) * 1px);}@utility max-w(--value <number>) { max-width: calc(var(--value) * 1px);}@utility max-h(--value <number>) { max-height: calc(var(--value) * 1px);}@utility max-size-x(--value <number>) { max-inline-size: calc(var(--value) * 1px);}@utility max-size-y(--value <number>) { max-block-size: calc(var(--value) * 1px);}@utility basis(--value <number>) { flex-basis: calc(var(--value) * 1px);}@utility r(--value <number>) { border-radius: calc(var(--value) * 1px);}@utility rtl(--value <number>) { border-top-left-radius: calc(var(--value) * 1px);}@utility rtr(--value <number>) { border-top-right-radius: calc(var(--value) * 1px);}@utility rbl(--value <number>) { border-bottom-left-radius: calc(var(--value) * 1px);}@utility rbr(--value <number>) { border-bottom-right-radius: calc(var(--value) * 1px);}@utility rss(--value <number>) { border-start-start-radius: calc(var(--value) * 1px);}@utility rse(--value <number>) { border-start-end-radius: calc(var(--value) * 1px);}@utility res(--value <number>) { border-end-start-radius: calc(var(--value) * 1px);}@utility ree(--value <number>) { border-end-end-radius: calc(var(--value) * 1px);}@utility b(--value <number>) { border-width: calc(var(--value) * 1px);}@utility bt(--value <number>) { border-top-width: calc(var(--value) * 1px);}@utility br(--value <number>) { border-right-width: calc(var(--value) * 1px);}@utility bb(--value <number>) { border-bottom-width: calc(var(--value) * 1px);}@utility bl(--value <number>) { border-left-width: calc(var(--value) * 1px);}@utility bx(--value <number>) { border-inline-width: calc(var(--value) * 1px);}@utility bxs(--value <number>) { border-inline-start-width: calc(var(--value) * 1px);}@utility bxe(--value <number>) { border-inline-end-width: calc(var(--value) * 1px);}@utility by(--value <number>) { border-block-width: calc(var(--value) * 1px);}@utility bys(--value <number>) { border-block-start-width: calc(var(--value) * 1px);}@utility bye(--value <number>) { border-block-end-width: calc(var(--value) * 1px);}@utility outline(--value <number>) { outline-width: calc(var(--value) * 1px);}@utility grow(--value <number>) { flex-grow: var(--value);}@utility shrink(--value <number>) { flex-shrink: var(--value);}@utility order(--value <integer>) { order: var(--value);}관련 문서: 유틸리티 정의.