설치
Atomic CSS는 자동완성, 호버 프리뷰, 실시간 CSS 생성을 제공하는 VS Code 확장으로 제공됩니다. 빌드 과정이나 설정 파일이 필요 없습니다.
VS Code 확장
마켓플레이스에서 설치
- VS Code를 엽니다
- 확장(
Ctrl+Shift+X)으로 이동합니다 - "Atomic CSS" (niceplugin)를 검색합니다
- Install을 클릭합니다
또는 터미널에서 설치:
code --install-extension niceplugin.atomicss설치 확인
설치 후, 아무 HTML 파일을 열고 class 속성 안에 입력해보세요. CSS 프리뷰와 함께 자동완성이 나타납니다.
기능
자동완성
class="" 속성에 입력하면 CSS 출력과 함께 실시간 제안을 받습니다.
호버 프리뷰
Atomic CSS 클래스명 위에 마우스를 올리면 생성되는 CSS를 툴팁으로 확인합니다.
유효성 검사
잘못된 클래스명은 에디터에서 자동으로 표시됩니다.
지원 파일 형식
HTML, Vue (.vue), React/JSX (.jsx, .tsx), Svelte (.svelte), PHP, Twig 등.
기본 HTML 설정
정확한 rem 계산을 위해 루트 폰트 크기를 10px로 설정합니다:
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 10px; }</style>
</head>
<body>
<div class="df jcc aic h100vh">
<h1 class="fs4-8rem fw900 c333333">Hello Atomic CSS</h1>
</div>
</body>
</html>위 클래스들이 생성하는 CSS:
| 클래스 | 생성 CSS |
|---|---|
df | display: flex |
jcc | justify-content: center |
aic | align-items: center |
h100vh | height: 100vh |
fs4-8rem | font-size: 4.8rem |
fw900 | font-weight: 900 |
c333333 | color: #333333 |
rem 규칙: html { font-size: 10px } 설정 시, 1rem = 10px. 따라서 4.8rem = 48px.
프레임워크 연동
Atomic CSS는 어떤 프레임워크에서든 사용 가능합니다 — CSS 클래스명일 뿐입니다.
Vue / Nuxt
<template>
<div class="df fdc gap2rem p2-4rem maxw80rem mxa">
<h1 class="fs3-2rem fw800">{{ title }}</h1>
<p class="fs16px c71717a">{{ description }}</p>
</div>
</template>React / Next.js
<div className="df fdc gap2rem p2-4rem maxw80rem mxa">
<h1 className="fs3-2rem fw800">{title}</h1>
<p className="fs16px c71717a">{description}</p>
</div>각 클래스는 정확히 하나의 CSS 규칙을 생성합니다:
| 클래스 | 생성 CSS |
|---|---|
fdc | flex-direction: column |
gap2rem | gap: 2rem |
p2-4rem | padding: 2.4rem |
maxw80rem | max-width: 80rem |
mxa | margin-left: auto; margin-right: auto |
fs3-2rem | font-size: 3.2rem |
fw800 | font-weight: 800 |
fs16px | font-size: 16px |
c71717a | color: #71717A |
MCP 서버 (AI 연동)
확장에는 AI 어시스턴트를 위한 MCP(Model Context Protocol) 서버가 포함되어 있습니다. Claude 같은 도구가 Atomic CSS 클래스를 프로그래밍 방식으로 조회할 수 있습니다.
| 도구 | 설명 |
|---|---|
list_classes | 카테고리별 사용 가능한 클래스 목록 조회 |
lookup_class | 특정 클래스명의 CSS 출력 조회 |
search_by_css | CSS 속성이나 값으로 클래스 검색 |