단위

Atomic CSS는 모든 표준 CSS 단위를 지원합니다. 단위는 숫자 값 뒤에 바로 붙입니다.

지원 단위

단위	설명	예시	CSS
`px`	픽셀	`w100px`	width: 100px
`p`	퍼센트 (%)	`w50p`	width: 50%
`rem`	root em (1rem=10px)	`fs1-5rem`	font-size: 1.5rem
`em`	em	`p1em`	padding: 1em
`vh`	뷰포트 높이	`h100vh`	height: 100vh
`vw`	뷰포트 너비	`w100vw`	width: 100vw
`vmin`	뷰포트 최솟값	`w50vmin`	width: 50vmin
`vmax`	뷰포트 최댓값	`w50vmax`	width: 50vmax
`fr`	비율 (Grid)	`gtc1fr-2fr`	grid-template-columns: 1fr 2fr

단위 선택 가이드

어떤 단위든 자유롭게 사용할 수 있습니다. 권장 기준: 20px 미만은 px, 20px 이상은 rem.

크기	단위	예시
20px 미만	`px`	gap8px, p12px, br4px, mb16px
20px 이상	`rem`	gap2rem(20px), p3-2rem(32px), w10rem(100px)

rem 환산표

html { font-size: 10px } 기준으로 1rem = 10px입니다:

px	rem	클래스 예시
20px	2rem	`gap2rem`
24px	2.4rem	`p2-4rem`
32px	3.2rem	`mt3-2rem`
40px	4rem	`w4rem`
48px	4.8rem	`fs4-8rem`
100px	10rem	`maxw10rem`
240px	24rem	`w24rem`
1200px	120rem	`maxw120rem`

소수점 표기

소수점은 하이픈(-)으로 표현합니다:

값	클래스 표기
0.4rem	`0-4rem`
0.8rem	`0-8rem`
1.5rem	`1-5rem`
2.4rem	`2-4rem`
3.2rem	`3-2rem`