CSS 속성의 앞글자를 조합하면 클래스가 됩니다.
display: flex → df, gap: 2rem → gap2rem.
설정 없이, 빌드 없이, 바로 사용하세요.
<div class="df jcc aic
gap2rem p2-4rem
bgFFFFFF br12px">
<h1 class="fs4-8rem fw900">
Hello World
</h1>
</div>/* auto-generated */
.df { display: flex }
.jcc { justify-content: center }
.aic { align-items: center }
.gap2rem { gap: 2rem }
.p2-4rem { padding: 2.4rem }
.bgFFFFFF { background: #FFF }
.br12px { border-radius: 12px }별도의 CSS 파일 작성 없이, HTML 클래스만으로 모든 스타일을 처리합니다.
.card {
display: flex;
flex-direction: column;
padding: 24px;
background: #ffffff;
border-radius: 12px;
gap: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}<div class="df fdc p2-4rem
bgFFFFFF br12px
gap16px">
<!-- CSS 파일이 필요 없습니다 -->
<!-- 저장하면 자동 생성됩니다 -->
</div>CSS 속성과 값의 앞글자를 조합하면 클래스명이 됩니다.
새로운 어휘를 외울 필요가 없습니다.
display: flex→dfjustify-content: center→jccalign-items: flex-start→aifsflex-direction: column→fdcgap: 2rem→gap2rempadding: 24px→p2-4remfont-size: 1.6rem→fs1-6rembackground: #FF5733→bgFF5733border-radius: 8px→br8pxwidth: 100%→w100pposition: absolute→pawhite-space: nowrap→wsn규칙 하나만 익히면 어떤 CSS 속성이든 클래스명을 추론할 수 있습니다.
복잡한 설정이 필요 없습니다.
VS Code 확장 또는 CLI를 설치하세요. 설정 파일도, 의존성도 필요 없습니다.
npm i -g atomic-css-cliCSS 속성의 앞글자를 조합해 클래스를 작성하세요. 어떤 에디터에서든 동작합니다.
class="df jcc aic gap2rem"저장하면 atomic.css가 자동 생성됩니다. VS Code는 즉시, CLI는 watch 모드로.
atomic-css watch src/프로덕션 레벨의 유틸리티 CSS 프레임워크.
df jcc aic빌드 도구, 설정 파일, 의존성 모두 불필요. VS Code 확장 또는 CLI 하나로 즉시 시작.
gap37px미리 정의된 값에 갇히지 않습니다. gap37px, w847px, fs1-3rem 어떤 값이든 사용 가능.
gtcrfitrepeat, auto-fit, minmax 등 강력한 Grid 유틸리티로 복잡한 레이아웃을 클래스 하나로.
sm-dn420px부터 2560px까지 14개 브레이크포인트. 프리픽스만 붙이면 완벽한 반응형.
hover-bghover, focus, disabled, checked 등 32개 의사 클래스를 프리픽스로 지원.
watchVS Code에서는 자동완성과 호버 프리뷰. CLI로는 어떤 에디터에서든 watch 모드로 동작.
calc-addwcalc100p-200px 같은 calc 연산을 클래스로 직접 표현. 복잡한 계산도 간단하게.
.atomic.json모노레포, 멀티 프로젝트 환경에서도 .atomic.json으로 프로젝트별 독립 설정.
MCP공식 MCP 서버로 Claude, Cursor, Windsurf 등 AI 도구가 Atomic CSS를 완벽 이해.
프리픽스만 붙이면 해당 브레이크포인트 이하에서 적용됩니다.
<!-- Desktop 3col → Tablet 2col → Mobile 1col -->
<div class="dg gtcr3-1fr gap2rem
md-gtcr2-1fr
sm-gtc1fr">
<!-- Desktop only -->
<div class="db sm-dn">...</div>
<!-- Mobile only -->
<div class="dn sm-db">...</div>
</div>기존 유틸리티 프레임워크들은 자체 어휘를 외워야 합니다.
Atomic CSS는 CSS를 아는 사람이라면 러닝 커브 제로로 바로 쓸 수 있습니다.
| CSS 속성 | 타사 프레임워크 | Atomic CSS | 차이점 |
|---|---|---|---|
| display: flex | d-flex, flex통상적 관행 | df | CSS 약어 그대로, 외울 것 없음 |
| justify-content: center | justify-center, jc-center통상적 관행 | jcc | 앞글자 3자로 끝 — 직관적 |
| padding: 2.4rem | p-3, pa3 (고정 단계)대부분 프레임워크 | p2-4rem | 원하는 값 그대로 — 단계 제한 없음 |
| font-size: 18px | text-lg, f5 (고정 단계)대부분 프레임워크 | fs18px | px, rem 어떤 단위든 자유롭게 |
| gap: 37px | gap-[37px], g-4 (특수 문법)일부 프레임워크 | gap37px | 별도 문법 없이 바로 입력 |
| width: calc(100% - 200px) | w-[calc(100%-200px)]일부 프레임워크 | wcalc100p-200px | calc도 별도 문법 없이 클래스 하나 |
| grid: repeat(auto-fit, ...) | 미지원 또는 설정 필요대부분 프레임워크 | gtcrfit-minmax28rem-1fr | 복잡한 Grid도 설정 없이 바로 |
| background: #FF5733 | bg-danger, bg-[#FF5733]통상적 관행 | bgFF5733 | HEX 코드 직접 입력 — 제한 없음 |
| hover + opacity | hover:opacity-80, :hover 별도일부 프레임워크 | hover-o80 | 의사 클래스도 프리픽스로 통일 |
| 768px 이하 숨김 | d-md-none, hidden-sm통상적 관행 | sm-dn | 이하 기준 — 14단계 브레이크포인트 |
d-flex, flexdfCSS 약어 그대로, 외울 것 없음
justify-center, jc-centerjcc앞글자 3자로 끝 — 직관적
p-3, pa3 (고정 단계)p2-4rem원하는 값 그대로 — 단계 제한 없음
text-lg, f5 (고정 단계)fs18pxpx, rem 어떤 단위든 자유롭게
gap-[37px], g-4 (특수 문법)gap37px별도 문법 없이 바로 입력
w-[calc(100%-200px)]wcalc100p-200pxcalc도 별도 문법 없이 클래스 하나
미지원 또는 설정 필요gtcrfit-minmax28rem-1fr복잡한 Grid도 설정 없이 바로
bg-danger, bg-[#FF5733]bgFF5733HEX 코드 직접 입력 — 제한 없음
hover:opacity-80, :hover 별도hover-o80의사 클래스도 프리픽스로 통일
d-md-none, hidden-smsm-dn이하 기준 — 14단계 브레이크포인트
CSS를 알면 바로 사용 가능. 새 어휘를 외울 필요 없음.
클래스명이 CSS 속성 그 자체. 별도 문서 없이 추론 가능.
고정 단계 없이 37px, 2.4rem 등 원하는 값 그대로.
빌드 설정, config 파일, 플러그인 모두 불필요.
VS Code 확장 뿐만 아니라 CLI로도 동작합니다.
메모장이든, 전자정부 프레임워크든, STS든 — 터미널만 있으면 됩니다.
# 설치
npm install -g atomic-css-cli
# 한 번 빌드
atomic-css build src/ -o assets/css
# 파일 변경 감지 — 어떤 에디터에서 저장해도 자동 생성
atomic-css watch src/ -o assets/css터미널에서 atomic-css watch를 실행하면 어떤 에디터에서 저장해도 CSS가 자동 생성됩니다.
class 속성을 쓸 수 있는 곳이라면 어디든 동작합니다.
공식 MCP 서버와 AI 가이드를 제공합니다.
AI에게 규칙을 던져주면 사람처럼 Atomic CSS를 완벽하게 작성합니다.
프로젝트에 CLAUDE.md나 프롬프트로 Atomic CSS 가이드를 넣어주면, AI가 네이밍 규칙, 단위, 반응형, 의사클래스까지 모두 학습합니다.
AI에게 이렇게 말하세요:
"이 프로젝트는 Atomic CSS를 사용해. CSS 파일이나 style 태그 쓰지 말고, 모든 스타일은 Atomic 클래스로 처리해."
AI가 작성하는 코드:
<div class="dg gtcrfit-minmax28rem-1fr
gap2rem p2-4rem">
<div class="bg111113 br12px p2rem
hover-bc6366F1 tall200msease">MCP를 연결하면 AI가 클래스를 조회하고, CSS를 변환하고, 유효성까지 검증합니다.
// 1. 전체 규칙 학습
get_guide()
// 2. 클래스 → CSS 확인
lookup_class("gtcrfit-minmax28rem-1fr")
// → repeat(auto-fit, minmax(28rem, 1fr))
// 3. CSS → 클래스 변환
css_to_classes("display: flex; gap: 20px;")
// → df gap2rem
// 4. 유효성 검증 + 추천
validate_classes("dfflex jc-center")
// ✗ dfflex → 추천: df
// ✗ jc-center → 추천: jccget_guide전체 규칙을 AI에게 학습시킴
lookup_class클래스명 → CSS 출력 확인
search_by_cssCSS 속성/값으로 클래스 검색
css_to_classesCSS 코드 → 클래스 자동 변환
validate_classes클래스 유효성 검증 + 추천
list_classes카테고리별 클래스 목록 조회
연결 방법:
// Remote (설치 불필요)
url: "https://atomiccss.dev/mcp"
// Local
command: "npx atomic-css-mcp"VS Code든, 터미널이든 — 30초 안에 첫 번째 Atomic 클래스를 작성하세요.
ext install Drangon-Knight.atomicssnpm install -g atomic-css-cli