units

Atomic CSS에서 지원하는 모든 CSS 단위와 핵심 단위 규칙입니다. 올바른 단위 선택은 일관된 디자인 시스템의 기초입니다.

단위 규칙

Atomic CSS는 html { font-size: 10px } 기준으로 동작합니다. 따라서 1rem = 10px입니다.

핵심 규칙

20px 미만→px사용

20px 이상→rem사용

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기	단위	예시	값
4px	`px`	`gap4px`	gap: 4px
8px	`px`	`p8px`	padding: 8px
12px	`px`	`br12px`	border-radius: 12px
16px	`px`	`mb16px`	margin-bottom: 16px
20px	`rem`	`gap2rem`	gap: 2rem (20px)
32px	`rem`	`p3-2rem`	padding: 3.2rem (32px)
48px	`rem`	`mt4-8rem`	margin-top: 4.8rem (48px)
100px	`rem`	`w10rem`	width: 10rem (100px)

<!-- Under 20px: use px -->
<div class="gap8px p12px br4px mb16px">Small values use px</div>

<!-- 20px and above: use rem -->
<div class="gap2rem p3-2rem mt4-8rem w10rem">Large values use rem</div>

<!-- Mixed usage (common) -->
<div class="p2rem gap8px br8px mb3-2rem">
  <p class="fs14px mb8px">Properly mixing px and rem</p>
</div>

지원 단위

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">단위	설명	예시	CSS
`px`	픽셀 (절대 단위)	`w100px`	width: 100px
`p`	퍼센트 (% → p)	`w50p`	width: 50%
`rem`	root em (1rem = 10px)	`fs1-5rem`	font-size: 1.5rem
`em`	부모 font-size 기준	`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

rem 환산표

html { font-size: 10px } 기준으로 1rem = 10px입니다. 이 표를 외워두면 클래스명을 빠르게 작성할 수 있습니다.

클래스 표기법

소수점은 하이픈(-)으로 표기합니다. 예: 0.4rem → 0-4rem, 1.6rem → 1-6rem, 3.2rem → 3-2rem

rem	px	클래스 표기	예시
0.4rem	4px	`0-4rem`	`p0-4rem`
0.8rem	8px	`0-8rem`	`gap0-8rem`
1.2rem	12px	`1-2rem`	`mt1-2rem`
1.6rem	16px	`1-6rem`	`mb1-6rem`
2rem	20px	`2rem`	`gap2rem`
2.4rem	24px	`2-4rem`	`p2-4rem`
3.2rem	32px	`3-2rem`	`mt3-2rem`
4rem	40px	`4rem`	`w4rem`
4.8rem	48px	`4-8rem`	`mt4-8rem`
6.4rem	64px	`6-4rem`	`p6-4rem`
8rem	80px	`8rem`	`w8rem`
10rem	100px	`10rem`	`w10rem`
12rem	120px	`12rem`	`maxw12rem`

간격 수치 규칙

margin, padding, gap 등 간격 값은 4의 배수를 사용합니다. 일관된 리듬감을 유지하기 위한 디자인 원칙입니다.

권장 간격 값 (4의 배수)

4px8px12px16px20px24px32px40px48px64px80px100px

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">값	단위	gap	padding	margin-top
4px	px	`gap4px`	`p4px`	`mt4px`
8px	px	`gap8px`	`p8px`	`mt8px`
12px	px	`gap12px`	`p12px`	`mt12px`
16px	px	`gap16px`	`p16px`	`mt16px`
20px	rem	`gap2rem`	`p2rem`	`mt2rem`
24px	rem	`gap2-4rem`	`p2-4rem`	`mt2-4rem`
32px	rem	`gap3-2rem`	`p3-2rem`	`mt3-2rem`
40px	rem	`gap4rem`	`p4rem`	`mt4rem`
48px	rem	`gap4-8rem`	`p4-8rem`	`mt4-8rem`
64px	rem	`gap6-4rem`	`p6-4rem`	`mt6-4rem`
80px	rem	`gap8rem`	`p8rem`	`mt8rem`
100px	rem	`gap10rem`	`p10rem`	`mt10rem`

소수점 표기

CSS의 소수점(.)은 클래스명에서 하이픈(-)으로 표현합니다. 클래스명에 점(.)을 사용할 수 없기 때문입니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">CSS 값	클래스 표기	예시 클래스	CSS 출력
0.8rem	`0-8rem`	`gap0-8rem`	gap: 0.8rem
1.5rem	`1-5rem`	`fs1-5rem`	font-size: 1.5rem
2.4rem	`2-4rem`	`p2-4rem`	padding: 2.4rem
3.2rem	`3-2rem`	`mt3-2rem`	margin-top: 3.2rem
4.8rem	`4-8rem`	`mb4-8rem`	margin-bottom: 4.8rem

<!-- Decimal point: use hyphen -->
<p class="fs1-5rem lh1-7 mb1-6rem">1.5rem, line-height 1.7, margin-bottom 1.6rem</p>

<!-- Same for gap, padding -->
<div class="df gap0-8rem p2-4rem">
  <span>Gap 0.8rem, Padding 2.4rem</span>
</div>

단위별 상세

`px`pixel

절대 단위입니다. 정밀한 소형 값에 적합합니다. 20px 미만의 border-radius, gap, padding 등에 사용합니다.

언제 사용하나요?

- 보더 두께: b1pxsolidDDDDDD, bw2px

- 작은 간격: gap4px, gap8px, p12px

- 작은 border-radius: br4px, br8px

- 정밀한 font-size: fs12px, fs14px

<!-- Borders, small gaps, border-radius -->
<div class="b1pxsolidDDDDDD br4px p8px gap4px">
  <span class="fs12px">Small text</span>
</div>

<!-- Small margins and gaps -->
<div class="df gap8px mb16px">
  <button class="py8px px16px br8px fs14px">Button 1</button>
  <button class="py8px px16px br8px fs14px">Button 2</button>
</div>

`rem`root em (1rem = 10px)

루트 요소의 font-size에 비례하는 단위입니다. html { font-size: 10px } 설정 덕분에 1rem = 10px으로 계산이 간단합니다. 20px 이상의 레이아웃, 간격, 크기에 사용합니다.

언제 사용하나요?

- 레이아웃 간격: gap2rem(20px), gap3-2rem(32px)

- 큰 패딩: p2rem(20px), p4rem(40px)

- 큰 font-size: fs2-4rem(24px), fs3-6rem(36px)

- 너비/높이: w25rem(250px), maxw120rem(1200px)

<!-- Large layout gaps -->
<div class="dg gtcr3-1fr gap2rem p3-2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
</div>

<!-- Large typography -->
<h1 class="fs3-6rem fw800 mb2-4rem">Title (36px)</h1>
<p class="fs1-6rem lh1-7 mb2rem">Body text (16px)</p>

<!-- Center aligned container -->
<div class="mxa maxw120rem px2rem">
  Max 1200px, center aligned
</div>

`p`percent (% → p)

CSS의 %를 Atomic CSS에서는 p로 표기합니다. 부모 요소 기준의 상대적 크기를 지정할 때 사용합니다.

언제 사용하나요?

- 반응형 너비: w50p(50%), w100p(100%)

- 높이: h100p(100%)

- border-radius: br50p(원형)

- position: t50p, l50p

<!-- Responsive Width -->
<div class="w100p">Full width</div>
<div class="w50p">Half width</div>

<!-- Circular avatar -->
<img class="w6rem h6rem br50p ofc" src="avatar.jpg" alt="Avatar" />

<!-- Center aligned (position) -->
<div class="pa t50p l50p" >
  Absolute position center
</div>

`vhvw`viewport height / viewport width

뷰포트(브라우저 창)의 높이와 너비를 기준으로 하는 단위입니다. 전체 화면 레이아웃에 주로 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">단위	설명	예시	CSS
`vh`	뷰포트 높이의 %	`h100vh`	height: 100vh
`vw`	뷰포트 너비의 %	`w100vw`	width: 100vw
`vmin`	vh, vw 중 작은 값	`w50vmin`	width: 50vmin
`vmax`	vh, vw 중 큰 값	`w50vmax`	width: 50vmax

<!-- Fullscreen hero -->
<div class="h100vh df jcc aic">
  <h1>Fullscreen hero section</h1>
</div>

<!-- Fullscreen layout (header-main-footer) -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header>Header</header>
  <main>Content (takes up all remaining space)</main>
  <footer>Footer</footer>
</div>

<!-- Full width banner -->
<div class="w100vw bg18181B p2rem">
  Banner spanning full screen width
</div>

`fr`fraction (Grid 전용)

fr은 CSS Grid에서만 사용하는 비율 단위입니다. 남은 공간을 비율로 나눠 배분합니다. gtc(grid-template-columns), gtr(grid-template-rows)와 함께 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`gtc1fr`	grid-template-columns: 1fr	1열 (전체 너비)
`gtc1fr-1fr`	grid-template-columns: 1fr 1fr	2열 균등
`gtc1fr-2fr`	grid-template-columns: 1fr 2fr	1:2 비율
`gtc1fr-2fr-1fr`	grid-template-columns: 1fr 2fr 1fr	1:2:1 비율 (사이드바 레이아웃)
`gtcr3-1fr`	grid-template-columns: repeat(3, 1fr)	3열 균등 반복
`gtc25rem-1fr`	grid-template-columns: 25rem 1fr	고정 사이드바 + 유연 메인

<!-- 3-column equal cards -->
<div class="dg gtcr3-1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- 1:2 ratio sidebar + main -->
<div class="dg gtc1fr-2fr gap2rem">
  <aside>Sidebar (1fr)</aside>
  <main>Main Content (2fr)</main>
</div>

<!-- Fixed sidebar + flexible main -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside>Sidebar (250px Fixed)</aside>
  <main>Main (all remaining)</main>
</div>

팁 & 주의사항

rem을 기본 단위로 사용하세요

20px 이상의 크기에는 rem을 사용합니다. 1rem = 10px이므로 계산이 간단하고, 확장 가능한 레이아웃을 만들 수 있습니다.

px는 작은 정밀 값에만

border 두께, 작은 gap/padding, 작은 border-radius 등 20px 미만 값에 사용합니다. 큰 값에 px를 쓰면 유지보수가 어려워집니다.

간격은 4의 배수

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 100... 일관된 수치를 사용하면 디자인의 리듬감이 살아납니다.

rem 환산표를 외우세요

자주 쓰는 값: 2rem=20px, 2-4rem=24px, 3-2rem=32px, 4rem=40px, 4-8rem=48px. 이 5개만 외우면 대부분 커버됩니다.

spacing font-size width height naming-convention

units

단위 규칙

지원 단위

rem 환산표

간격 수치 규칙

소수점 표기

단위별 상세

pxpixel

remroot em (1rem = 10px)

ppercent (% → p)

vhvwviewport height / viewport width

frfraction (Grid 전용)

팁 & 주의사항

관련 속성

`px`pixel

`rem`root em (1rem = 10px)

`p`percent (% → p)

`vhvw`viewport height / viewport width

`fr`fraction (Grid 전용)