units
Atomic CSS에서 지원하는 모든 CSS 단위와 핵심 단위 규칙입니다. 올바른 단위 선택은 일관된 디자인 시스템의 기초입니다.
단위 규칙
Atomic CSS는 html { font-size: 10px } 기준으로 동작합니다. 따라서 1rem = 10px입니다.
핵심 규칙
px사용rem사용| 크기 | 단위 | 예시 | 값 |
|---|---|---|---|
| 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) |
<!-- 20px 미만 → px 사용 -->
<div class="gap8px p12px br4px mb16px">작은 값은 px</div>
<!-- 20px 이상 → rem 사용 -->
<div class="gap2rem p3-2rem mt4-8rem w10rem">큰 값은 rem</div>
<!-- 혼합 사용 (일반적) -->
<div class="p2rem gap8px br8px mb3-2rem">
<p class="fs14px mb8px">px와 rem을 적절히 혼합</p>
</div>지원 단위
Atomic CSS는 모든 표준 CSS 단위를 지원합니다. 단위는 숫자 값 뒤에 바로 붙입니다.
| 단위 | 설명 | 예시 | 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의 배수)
| 값 | 단위 | 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의 소수점(.)은 클래스명에서 하이픈(-)으로 표현합니다. 클래스명에 점(.)을 사용할 수 없기 때문입니다.
| 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 |
<!-- 소수점 → 하이픈 -->
<p class="fs1-5rem lh1-7 mb1-6rem">1.5rem, line-height 1.7, margin-bottom 1.6rem</p>
<!-- gap, padding에도 동일 -->
<div class="df gap0-8rem p2-4rem">
<span>간격 0.8rem, 패딩 2.4rem</span>
</div>단위별 상세
pxpixel
절대 단위입니다. 정밀한 소형 값에 적합합니다. 20px 미만의 border-radius, gap, padding 등에 사용합니다.
언제 사용하나요?
- 보더 두께: b1pxsolidDDDDDD, bw2px
- 작은 간격: gap4px, gap8px, p12px
- 작은 border-radius: br4px, br8px
- 정밀한 font-size: fs12px, fs14px
<!-- 보더, 작은 간격, border-radius -->
<div class="b1pxsolidDDDDDD br4px p8px gap4px">
<span class="fs12px">작은 텍스트</span>
</div>
<!-- 작은 여백과 간격 -->
<div class="df gap8px mb16px">
<button class="py8px px16px br8px fs14px">버튼 1</button>
<button class="py8px px16px br8px fs14px">버튼 2</button>
</div>remroot 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)
<!-- 큰 레이아웃 간격 -->
<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>
<!-- 큰 타이포그래피 -->
<h1 class="fs3-6rem fw800 mb2-4rem">제목 (36px)</h1>
<p class="fs1-6rem lh1-7 mb2rem">본문 텍스트 (16px)</p>
<!-- 가운데 정렬 컨테이너 -->
<div class="mxa maxw120rem px2rem">
최대 1200px, 가운데 정렬
</div>ppercent (% → p)
CSS의 %를 Atomic CSS에서는 p로 표기합니다. 부모 요소 기준의 상대적 크기를 지정할 때 사용합니다.
언제 사용하나요?
- 반응형 너비: w50p(50%), w100p(100%)
- 높이: h100p(100%)
- border-radius: br50p(원형)
- position: t50p, l50p
<!-- 반응형 너비 -->
<div class="w100p">전체 너비</div>
<div class="w50p">반 너비</div>
<!-- 원형 아바타 -->
<img class="w6rem h6rem br50p ofc" src="avatar.jpg" alt="아바타" />
<!-- 가운데 정렬 (position) -->
<div class="pa t50p l50p" >
절대 위치 가운데
</div>vhvwviewport height / viewport width
뷰포트(브라우저 창)의 높이와 너비를 기준으로 하는 단위입니다. 전체 화면 레이아웃에 주로 사용합니다.
| 단위 | 설명 | 예시 | CSS |
|---|---|---|---|
vh | 뷰포트 높이의 % | h100vh | height: 100vh |
vw | 뷰포트 너비의 % | w100vw | width: 100vw |
vmin | vh, vw 중 작은 값 | w50vmin | width: 50vmin |
vmax | vh, vw 중 큰 값 | w50vmax | width: 50vmax |
<!-- 풀스크린 히어로 -->
<div class="h100vh df jcc aic">
<h1>전체 화면 히어로 섹션</h1>
</div>
<!-- 풀스크린 레이아웃 (헤더-메인-푸터) -->
<div class="dg gtrauto-1fr-auto h100vh">
<header>헤더</header>
<main>콘텐츠 (남은 공간 전부 차지)</main>
<footer>푸터</footer>
</div>
<!-- 전체 너비 배너 -->
<div class="w100vw bg18181B p2rem">
화면 전체 너비를 차지하는 배너
</div>frfraction (Grid 전용)
fr은 CSS Grid에서만 사용하는 비율 단위입니다. 남은 공간을 비율로 나눠 배분합니다. gtc(grid-template-columns), gtr(grid-template-rows)와 함께 사용합니다.
| 클래스 | 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열 균등 카드 -->
<div class="dg gtcr3-1fr gap2rem">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
<!-- 1:2 비율 사이드바 + 메인 -->
<div class="dg gtc1fr-2fr gap2rem">
<aside>사이드바 (1fr)</aside>
<main>메인 콘텐츠 (2fr)</main>
</div>
<!-- 고정 사이드바 + 유연 메인 -->
<div class="dg gtc25rem-1fr gap2rem">
<aside>사이드바 (250px 고정)</aside>
<main>메인 (나머지 전부)</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개만 외우면 대부분 커버됩니다.