Atomic CSS
HTML 클래스명을 기반으로 CSS 규칙을 자동 생성하는 VSCode 확장입니다.
사전 정의된 패턴을 인식하여 각 클래스에 대응하는 스타일을 즉시 생성함으로써 CSS 작성의 번거로움을 획기적으로 줄여줍니다. 클래스 이름이 곧 스타일 자체를 설명하기 때문에 누구나 쉽고 빠르게 클래스를 조합하여 다양한 디자인을 만들 수 있습니다.
왜 Atomic CSS인가?
- 제로 CSS 작성: 별도 CSS 파일 작성이 불필요합니다. HTML 클래스명만으로 모든 시각적 스타일을 처리합니다.
- 무제한 자유도: 다른 유틸리티 프레임워크와 달리 미리 정해진 값에 제한받지 않습니다.
gap37px, w847px, fs1-3rem 등 어떤 수치와 단위든 자유롭게 조합할 수 있습니다.
- 직관적 네이밍: CSS 속성과 값의 앞글자를 조합하는 규칙 하나만 알면, 문서 없이도 대부분의 클래스명을 추론할 수 있습니다.
- 14단계 반응형: QHD(2560px)부터 Ultra Small(420px)까지 14개 브레이크포인트를 지원하여 세밀한 반응형 대응이 가능합니다.
- 32개 의사 클래스: hover, focus, disabled, valid 등 32개 의사 클래스를 프리픽스 방식으로 간편하게 적용합니다.
- 협업 효율: HTML에서 바로 디자인 변경 및 조정이 가능하여, CSS 파일을 오가며 작업하는 시간이 대폭 줄어듭니다.
- 제로 의존성: 외부 라이브러리 없이 확장 설치만으로 즉시 사용 가능합니다.
- 스타일 일관성: 전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용하므로 스타일의 일관성이 자연스럽게 유지됩니다.
핵심 컨셉
CSS 속성과 값의 앞글자를 조합하여 클래스명을 만듭니다.
display: flex → df
justify-content: center → jcc
align-items: center → aic
flex-direction: column → fdc
white-space: nowrap → wsn
text-overflow: ellipsis → toe
object-fit: cover → ofc
이 규칙만 알면 문서에 없는 속성도 추론할 수 있습니다.
<div class="df jcc aic gap2rem p2rem bgFFFFFF br8px">Hello Atomic CSS!</div>
생성되는 CSS:
.df {
display: flex;
}
.jcc {
justify-content: center;
}
.aic {
align-items: center;
}
.gap2rem {
gap: 2rem;
}
.p2rem {
padding: 2rem;
}
.bgFFFFFF {
background-color: #ffffff;
}
.br8px {
border-radius: 8px;
}
설치 및 설정
1. 설치
VSCode Marketplace에서 "Atomic CSS" 검색 후 설치
2. 설정 파일 (.atomic.json)
프로젝트 루트에 .atomic.json 파일을 생성하면 프로젝트별로 동작을 커스터마이징할 수 있습니다. 파일이 없으면 기본 설정으로 동작합니다.
옵션 상세
| 옵션 |
타입 |
기본값 |
설명 |
cssDirectoryPath |
string |
"/assets/css/common/" |
생성될 atomic.css 파일의 저장 경로. 워크스페이스 루트 기준 상대 경로 |
extensions |
string[] |
[".html"] |
클래스를 추출할 대상 파일 확장자. 이 확장자의 파일만 스캔하여 CSS를 생성 |
selectedLanguages |
string[] |
["html"] |
파일 저장 시 자동으로 CSS를 업데이트할 VSCode 언어 모드 ID |
projects |
array |
— |
멀티프로젝트 설정. 파일 경로에 따라 서로 다른 위치에 CSS를 생성 |
우선순위: .atomic.json > VSCode 설정(atomic.*) > 기본값
.atomic.json에 값이 없으면 VSCode의 설정 > atomic.cssDirectoryPath, atomic.selectedLanguages를 참고하고, 그것도 없으면 기본값을 사용합니다.
기본 설정 (HTML 프로젝트)
{
"cssDirectoryPath": "/assets/css/common/",
"extensions": [".html"],
"selectedLanguages": ["html"]
}
React / Next.js
{
"cssDirectoryPath": "/src/assets/css/",
"extensions": [".html", ".tsx", ".jsx"],
"selectedLanguages": ["html", "typescriptreact", "javascriptreact"]
}
Vue / Nuxt
{
"cssDirectoryPath": "/src/assets/css/",
"extensions": [".html", ".vue"],
"selectedLanguages": ["html", "vue"]
}
PHP (Laravel, WordPress 등)
{
"cssDirectoryPath": "/public/css/",
"extensions": [".html", ".php", ".blade.php"],
"selectedLanguages": ["html", "php"]
}
멀티프로젝트 (다국어/멀티 출력)
projects 배열을 사용하면 파일 경로에 따라 CSS 출력 위치를 분리할 수 있습니다. sources에 해당하는 경로의 파일은 output 경로로, 매칭되지 않는 파일은 cssDirectoryPath로 CSS가 생성됩니다.
{
"cssDirectoryPath": "/assets/css/common/",
"extensions": [".html", ".php"],
"selectedLanguages": ["html", "php"],
"projects": [
{
"name": "korean",
"sources": ["/src/ko/", "/pages/ko/"],
"output": "/assets/css/ko/"
},
{
"name": "english",
"sources": ["/src/en/", "/pages/en/"],
"output": "/assets/css/en/"
}
]
}
| projects 옵션 |
타입 |
설명 |
name |
string |
프로젝트 식별 이름 (CSS 파일 상단에 표시) |
sources |
string[] |
이 프로젝트에 속하는 소스 디렉토리 경로 목록 |
output |
string |
이 프로젝트의 CSS 출력 경로 |
selectedLanguages 주요 언어 ID 참조
| 언어/프레임워크 |
VSCode 언어 ID |
| HTML |
html |
| React (TSX) |
typescriptreact |
| React (JSX) |
javascriptreact |
| Vue |
vue |
| PHP |
php |
| Svelte |
svelte |
| EJS |
ejs |
| Twig |
twig |
3. HTML에 연결
<link rel="stylesheet" href="/assets/css/common/atomic.css" />
4. 동작 방식
파일을 저장하면 지정된 확장자의 파일에서 클래스명을 자동 추출하고, 각 클래스에 대응하는 CSS 규칙을 생성하여 지정 경로에 atomic.css 파일로 저장합니다. 사용하지 않는 클래스가 저장되면 자동으로 제거되어 항상 최적화된 CSS를 유지합니다.
5. 명령어
Ctrl + Shift + P (Mac: Cmd + Shift + P)로 명령 팔레트를 열어 실행:
| 명령어 |
설명 |
사용 시나리오 |
| Update Atomic CSS |
현재 열린 파일의 CSS 즉시 생성 |
파일 저장 없이 즉시 CSS 업데이트가 필요할 때 |
| Apply Atomic CSS to Directory |
지정 디렉토리 내 전체 파일 일괄 처리 |
프로젝트 전체의 CSS를 한 번에 생성할 때 |
네이밍 규칙
단위
| 단위 |
표기 |
예시 |
| px |
px |
w100px, gap8px |
| % |
p |
w50p → width: 50% |
| rem |
rem |
fs1-5rem → font-size: 1.5rem |
| em |
em |
p1em |
| vh / vw |
vh, vw |
h100vh, w100vw |
| vmin / vmax |
vmin, vmax |
w50vmin |
| fr |
fr |
gtc1fr-2fr |
html { font-size: 10px } 기준: 1rem = 10px → 2rem = 20px, 10rem = 100px
하이픈(-) 사용
| 용도 |
예시 |
결과 |
| 소수점 |
gap1-5rem |
1.5rem |
| 값 구분 |
gtc1fr-2fr-1fr |
1fr 2fr 1fr |
| 미디어 쿼리 |
sm-dn |
@media(max-width:768px) |
| 의사 클래스 |
hover-bg000000 |
:hover |
특수 표기
| 표기 |
설명 |
예시 |
결과 |
i 접미사 |
!important |
w100pxi |
width: 100px !important |
neg- 접두사 |
음수값 |
neg-mt10px |
margin-top: -10px |
Display
| 클래스 |
CSS |
df |
display: flex |
dif |
display: inline-flex |
dg |
display: grid |
db |
display: block |
dib |
display: inline-block |
di |
display: inline |
dn |
display: none |
dt |
display: table |
dtc |
display: table-cell |
Flexbox
| 클래스 |
CSS |
fdr / fdrr |
flex-direction: row / row-reverse |
fdc / fdcr |
flex-direction: column / column-reverse |
fwn / fww / fwr |
flex-wrap: nowrap / wrap / wrap-reverse |
jcfs / jcfe / jcc |
justify-content: flex-start / flex-end / center |
jcsb / jcsa / jcse |
justify-content: space-between / space-around / space-evenly |
ais / aifs / aife / aic |
align-items: stretch / flex-start / flex-end / center |
fs0 / fs1 |
flex-shrink: 0 / 1 |
fg1 / fg2 |
flex-grow: 1 / 2 |
fa / fi |
flex: auto / initial |
Grid
| 패턴 |
예시 |
CSS |
| 직접 지정 |
gtc1fr-2fr-1fr |
grid-template-columns: 1fr 2fr 1fr |
| repeat |
gtcr3-1fr |
repeat(3, 1fr) |
| auto-fit |
gtcrfit-minmax28rem-1fr |
repeat(auto-fit, minmax(28rem, 1fr)) |
| auto-fill |
gtcrfill-minmax250px-1fr |
repeat(auto-fill, minmax(250px, 1fr)) |
| rows |
gtrauto-1fr-auto |
grid-template-rows: auto 1fr auto |
| rows repeat |
gtrr3-1fr |
repeat(3, 1fr) |
| minmax |
gtcminmax100px-1fr |
minmax(100px, 1fr) |
| calc |
gtccalc100p-200px-1fr |
calc(100% - 200px) 1fr |
Spacing
| 패턴 |
속성 |
m, mt, mr, mb, ml |
margin (방향) |
p, pt, pr, pb, pl |
padding (방향) |
gap, rg, cg |
gap, row-gap, column-gap |
mta, mra, mba, mla |
margin-방향: auto |
p10px-20px |
padding shorthand (2~4값) |
간격값은 4의 배수 권장: 4px, 8px, 12px, 16px, 2rem, 2-4rem...
Color
| 패턴 |
예시 |
CSS |
c + HEX 6자리 |
cFFFFFF |
color: #FFFFFF |
bg + HEX 6자리 |
bg000000 |
background-color: #000000 |
bc + HEX 6자리 |
bcDDDDDD |
border-color: #DDDDDD |
| RGBA |
c255-0-0-50 |
color: rgba(255,0,0,0.5) |
| RGBA 배경 |
bg0-0-0-80 |
background-color: rgba(0,0,0,0.8) |
| Opacity |
o50, o80 |
opacity: 0.5, opacity: 0.8 |
소문자 HEX 입력 시 자동 대문자 변환: cffffff → cFFFFFF
Border
| 패턴 |
예시 |
CSS |
| 단축 |
b1pxsolidDDDDDD |
border: 1px solid #DDDDDD |
| 방향 |
bt2pxdashed000000 |
border-top: 2px dashed #000000 |
| radius |
br8px, br1rem |
border-radius |
| none |
bn |
border: none |
| 방향 제거 |
bt0, br0, bb0, bl0 |
border-방향: 0 |
Shadow
| 패턴 |
예시 |
CSS |
| Box Shadow (HEX) |
bs0px4px12px0px0-0-0-10 |
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1) |
| Box Shadow (RGBA) |
bs2px4px10px0pxFF0000 |
box-shadow: 2px 4px 10px 0px #FF0000 |
| Inset |
bsi... |
box-shadow: inset ... |
| Text Shadow |
ts0px0px10pxFF00FF |
text-shadow: 0px 0px 10px #FF00FF |
| None |
bsn |
box-shadow: none |
| 클래스 |
CSS |
ttx10px |
transform: translateX(10px) |
tty20px |
transform: translateY(20px) |
tr45deg |
transform: rotate(45deg) |
ts1-5 |
transform: scale(1.5) |
ts1-5_2 |
transform: scale(1.5, 2) |
Transition
| 클래스 |
CSS |
tall200msease |
transition: all 200ms ease |
tall300ms |
transition: all 300ms |
topacity500ms |
transition: opacity 500ms |
tall200mscb0-50-50-100 |
transition: all 200ms cubic-bezier(...) |
tnone |
transition: none |
Filter
| 클래스 |
CSS |
fb5px |
filter: blur(5px) |
fbr120p |
filter: brightness(120%) |
fc80p |
filter: contrast(80%) |
fg100p |
filter: grayscale(100%) |
fhr90deg |
filter: hue-rotate(90deg) |
fi100p |
filter: invert(100%) |
fo80p |
filter: opacity(80%) |
fsa150p |
filter: saturate(150%) |
fse50p |
filter: sepia(50%) |
fds2px4px8pxFF0000 |
filter: drop-shadow(2px 4px 8px #FF0000) |
Backdrop Filter: bf 접두사 동일 (예: bfb10px → backdrop-filter: blur(10px))
미디어 쿼리 (14개 Breakpoint)
모든 클래스에 프리픽스를 붙여 반응형 적용:
| 프리픽스 |
Breakpoint |
|
프리픽스 |
Breakpoint |
qh- |
2560px |
|
rg- |
1080px |
uh- |
2160px |
|
md- |
1024px |
kk- |
2048px |
|
sm- |
768px |
fh- |
1920px |
|
es- |
640px |
hl- |
1800px |
|
us- |
420px |
sl- |
1700px |
|
|
|
ul- |
1600px |
|
|
|
el- |
1440px |
|
|
|
lg- |
1280px |
|
|
|
<!-- 3열 → 2열 → 1열 반응형 -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
<!-- 반응형 숨김 -->
<div class="db sm-dn">데스크탑만</div>
<div class="dn sm-db">모바일만</div>
</div>
Pseudo Class (32개)
모든 클래스에 프리픽스를 붙여 상태별 스타일 적용:
| 카테고리 |
프리픽스 |
| 인터랙션 |
hover-, focus-, active-, focus-within-, focus-visible- |
| 입력 상태 |
disabled-, enabled-, checked-, indeterminate- |
| 폼 검증 |
valid-, invalid-, required-, optional-, in-range-, out-of-range- |
| 링크 |
link-, visited-, any-link-, target- |
| 기타 |
placeholder-shown-, empty-, read-only-, fullscreen-, autofill-, modal- 등 |
<button class="bg007BFF hover-bg0056B3 active-ts0_98 disabled-o50 tall200msease cp">버튼</button>
Pseudo Element
| 키워드 |
CSS |
before |
::before |
after |
::after |
관계 선택자
부모 요소의 상태에 따라 자식/형제 요소를 스타일링:
| 결합자 |
키워드 |
CSS |
> 직접 자식 |
child |
.trigger:hover > target |
모든 자손 |
children |
.trigger:hover target |
+ 인접 형제 |
next |
.trigger:hover + target |
~ 일반 형제 |
siblings |
.trigger:hover ~ target |
<!-- card에 hover 시 자식 img에 scale 적용 -->
<div class="card-hover-child-img-ts1-1"></div>
기타 클래스
| 클래스 |
CSS |
ar16-9 |
aspect-ratio: 16/9 |
lc3-1-5rem |
3줄 제한 (line-clamp) |
fw100~fw900 |
font-weight |
zi10, zi999 |
z-index |
w100p, h100vh |
width: 100%, height: 100vh |
wa, ha |
width: auto, height: auto |
mxa |
margin-left: auto; margin-right: auto |
cp |
cursor: pointer |
usn |
user-select: none |
pen |
pointer-events: none |
oh |
overflow: hidden |
wsn |
white-space: nowrap |
toe |
text-overflow: ellipsis |
실전 예제
Flexbox 센터 정렬
<div class="df jcc aic gap2rem p2rem">
<span>센터 정렬된 콘텐츠</span>
</div>
반응형 그리드 카드
<div class="dg gtcrfit-minmax28rem-1fr gap2rem p2rem">
<div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10">카드 1</div>
<div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10">카드 2</div>
<div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10">카드 3</div>
</div>
글래스모피즘
<div class="bfb10px bg255-255-255-20 br16px p2-4rem">
<h2 class="fs2-4rem fw700 mb16px cFFFFFF">제목</h2>
<p class="fs1-6rem lh1-6 c255-255-255-80">내용</p>
</div>
호버 버튼
<button
class="
p12px-2-4rem bg007BFF cFFFFFF br8px fs1-6rem fw600
cp tall200msease hover-bg0056B3 active-ts0_98
md-p8px-2rem md-fs1-4rem
"
>
클릭하세요
</button>
풀스크린 레이아웃
<div class="dg gtrauto-1fr-auto h100vh">
<header class="p16px bg000000 cFFFFFF">헤더</header>
<main class="p2rem oa">콘텐츠</main>
<footer class="p16px bgF0F0F0">푸터</footer>
</div>
사이드바 레이아웃
<div class="dg gtc25rem-1fr gap2rem md-gtc1fr">
<aside class="p2rem bgF5F5F5 md-order2">사이드바</aside>
<main class="p2rem md-order1">콘텐츠</main>
</div>
텍스트 말줄임
<p class="lc3-1-5rem">이 텍스트는 3줄까지만 표시되고 나머지는 ...으로 말줄임 처리됩니다.</p>
AI Integration — MCP Server
AI가 Atomic CSS를 완벽하게 이해합니다.
Atomic CSS는 AI 코딩 도구를 위한 전용 MCP(Model Context Protocol) 서버를 제공합니다. 이것은 단순한 문서 참조가 아닙니다. AI가 Atomic CSS의 모든 클래스 체계를 실시간으로 조회하고, 검색하고, 생성할 수 있도록 설계된 AI 전용 인터페이스입니다.
왜 MCP인가?
일반적인 CSS 프레임워크를 AI와 사용할 때의 문제:
- AI가 클래스명을 추측하거나 잘못된 클래스를 생성
- 문서를 매번 컨텍스트에 넣어야 하는 토큰 낭비
- 프레임워크 업데이트 시 AI가 구버전 정보를 사용
Atomic CSS + MCP는 이 문제를 완전히 해결합니다:
- AI가 클래스명을 추측하지 않고 MCP 서버에 직접 질의
- 항상 최신 데이터 기반으로 정확한 클래스 반환
- 컨텍스트 오염 없이 필요한 순간에만 정보를 가져옴
| 도구 |
설명 |
예시 입력 |
lookup_class |
클래스명 → CSS 변환 결과 조회 |
df jcc aic gap2rem |
search_by_css |
CSS 속성/값으로 클래스 역검색 |
justify-content, hidden, shadow |
list_classes |
카테고리별 전체 클래스 목록 |
flexbox, grid, pseudo, media |
설정 방법
프로젝트 루트에 .mcp.json 파일을 생성하면 설정 없이 즉시 연동됩니다:
{
"mcpServers": {
"atomic-css": {
"type": "sse",
"url": "https://mcp.atomiccss.dev/sse"
}
}
}
https://mcp.atomiccss.dev는 Atomic CSS 전용 원격 MCP 서버입니다. 로컬 설치가 필요 없으며, 인터넷 연결만으로 모든 AI 도구에서 사용할 수 있습니다.
지원 도구
| AI 도구 |
설정 파일 |
비고 |
| Claude Code |
.mcp.json |
프로젝트 루트에 배치 |
| Cursor |
.cursor/mcp.json |
SSE 타입 지원 |
| Windsurf |
.windsurf/mcp.json |
SSE 타입 지원 |
문서 및 링크
지원 및 문의
eorud0713@gmail.com
