소개
Atomic CSS는 CSS 속성과 값의 앞글자를 조합하여 클래스명을 생성하는 유틸리티 퍼스트 CSS 프레임워크입니다.
핵심 규칙: 클래스명 = CSS 속성의 앞글자 + CSS 값의 앞글자
수백 개의 임의 클래스명을 외워야 하는 다른 프레임워크와 달리, Atomic CSS는 하나의 일관된 패턴을 따릅니다. 규칙을 한 번 배우면 문서 없이도 어떤 클래스명이든 유추할 수 있습니다.
작동 방식
모든 CSS 속성-값 쌍은 예측 가능한 클래스명에 매핑됩니다:
| CSS | 클래스 | 규칙 |
|---|---|---|
| display: flex | df | d(isplay) + f(lex) |
| justify-content: center | jcc | j(ustify)-c(ontent) + c(enter) |
| align-items: flex-start | aifs | a(lign)-i(tems) + f(lex)-s(tart) |
| flex-direction: column | fdc | f(lex)-d(irection) + c(olumn) |
| position: absolute | pa | p(osition) + a(bsolute) |
| overflow: hidden | oh | o(verflow) + h(idden) |
| cursor: pointer | cp | c(ursor) + p(ointer) |
| display: none | dn | d(isplay) + n(one) |
숫자 값이 있는 경우
숫자가 있는 속성은 값과 단위를 바로 붙입니다:
| CSS | 클래스 |
|---|---|
| padding: 16px | p16px |
| gap: 2rem (20px) | gap2rem |
| font-size: 1.4rem (14px) | fs1-4rem |
| width: 50% | w50p |
| border-radius: 8px | br8px |
| margin-top: 2.4rem (24px) | mt2-4rem |
| height: 100vh | h100vh |
| max-width: 80rem (800px) | maxw80rem |
빠른 예제
반응형 카드 그리드 — 커스텀 CSS 없이, 설정 없이:
<div class="dg gtcrfit-minmax28rem-1fr gap2rem p2-4rem">
<article class="p2rem bgFFFFFF br8px">
<h2 class="fs2rem fw700 mb8px c1a1a2e">카드 제목</h2>
<p class="fs14px c71717a">카드 설명 텍스트.</p>
</article>
</div>핵심 원칙
제로 설정
설정 파일, CSS 빌드 과정 없음. VS Code 확장을 설치하고 바로 클래스 작성.
예측 가능한 이름
CSS를 알면 Atomic CSS를 이미 아는 것. 같은 CSS는 항상 같은 클래스명을 생성.
그리드 우선 레이아웃
gtcrfit-minmax 같은 CSS Grid 유틸리티로 반응형 레이아웃을 간단하게.
반응형 기본 제공
us-(420px)부터 qh-(2560px)까지 14개 브레이크포인트.
완전한 CSS 커버리지
트랜스폼, 트랜지션, 의사 클래스를 포함한 모든 CSS 속성을 약어 시스템으로 지원.
VS Code 자동완성
에디터에서 자동완성, 호버 프리뷰, CSS 출력 미리보기를 제공.
어떤 클래스든 추론 가능
문서에 없는 속성도 같은 규칙으로 유추할 수 있습니다:
table-layout: fixed → tlf border-collapse: collapse → bcc object-fit: cover → ofc white-space: nowrap → wsn text-overflow: ellipsis → toe backface-visibility: hidden → bfvh