atomic-css-cli 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +348 -120
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,144 +6,186 @@ HTML 클래스명을 기반으로 CSS 규칙을 자동 생성하는 CLI 도구
|
|
|
6
6
|
|
|
7
7
|
> **VSCode 확장도 있습니다**: [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Drangon-Knight.atomicss)에서 설치하면 파일 저장 시 자동으로 CSS가 생성됩니다.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
---
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
- **무제한 자유도**: 다른 유틸리티 프레임워크와 달리 미리 정해진 값에 제한받지 않습니다. `gap37px`, `w847px`, `fs1-3rem` 등 어떤 수치와 단위든 자유롭게 조합할 수 있습니다.
|
|
13
|
-
- **직관적 네이밍**: CSS 속성과 값의 앞글자를 조합하는 규칙 하나만 알면, 문서 없이도 대부분의 클래스명을 추론할 수 있습니다.
|
|
14
|
-
- **14단계 반응형**: QHD(2560px)부터 Ultra Small(420px)까지 14개 브레이크포인트를 지원하여 세밀한 반응형 대응이 가능합니다.
|
|
15
|
-
- **32개 의사 클래스**: hover, focus, disabled, valid 등 32개 의사 클래스를 프리픽스 방식으로 간편하게 적용합니다.
|
|
16
|
-
- **협업 효율**: HTML에서 바로 디자인 변경 및 조정이 가능하여, CSS 파일을 오가며 작업하는 시간이 대폭 줄어듭니다.
|
|
17
|
-
- **제로 의존성**: 외부 CSS 라이브러리 없이 사용 가능합니다.
|
|
18
|
-
- **스타일 일관성**: 전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용하므로 스타일의 일관성이 자연스럽게 유지됩니다.
|
|
11
|
+
## 설치
|
|
19
12
|
|
|
20
|
-
|
|
13
|
+
```bash
|
|
14
|
+
# 글로벌 설치 (어디서든 atomic-css 명령 사용)
|
|
15
|
+
npm install -g atomic-css-cli
|
|
21
16
|
|
|
22
|
-
|
|
17
|
+
# 또는 프로젝트 로컬 설치
|
|
18
|
+
npm install --save-dev atomic-css-cli
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
로컬 설치 시에는 `npx`를 붙여 실행합니다:
|
|
23
22
|
|
|
23
|
+
```bash
|
|
24
|
+
npx atomic-css build
|
|
25
|
+
npx atomic-css watch
|
|
24
26
|
```
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
text-overflow: ellipsis → toe
|
|
31
|
-
object-fit: cover → ofc
|
|
27
|
+
|
|
28
|
+
설치 확인:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
atomic-css --version
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
---
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
## 빠른 시작
|
|
37
|
+
|
|
38
|
+
### 1단계: 프로젝트에서 설정 파일 생성
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
cd my-project
|
|
42
|
+
atomic-css init
|
|
38
43
|
```
|
|
39
44
|
|
|
40
|
-
|
|
45
|
+
프로젝트 루트에 `.atomic.json` 파일이 생성됩니다:
|
|
41
46
|
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
.aic {
|
|
50
|
-
align-items: center;
|
|
51
|
-
}
|
|
52
|
-
.gap2rem {
|
|
53
|
-
gap: 2rem;
|
|
54
|
-
}
|
|
55
|
-
.p2rem {
|
|
56
|
-
padding: 2rem;
|
|
57
|
-
}
|
|
58
|
-
.bgFFFFFF {
|
|
59
|
-
background-color: #ffffff;
|
|
60
|
-
}
|
|
61
|
-
.br8px {
|
|
62
|
-
border-radius: 8px;
|
|
47
|
+
```json
|
|
48
|
+
{
|
|
49
|
+
"selectedLanguages": ["html"],
|
|
50
|
+
"cssDirectoryPath": "/assets/css/common/",
|
|
51
|
+
"extensions": [".html"],
|
|
52
|
+
"projects": []
|
|
63
53
|
}
|
|
64
54
|
```
|
|
65
55
|
|
|
66
|
-
|
|
56
|
+
### 2단계: HTML에 Atomic CSS 클래스 작성
|
|
67
57
|
|
|
68
|
-
|
|
58
|
+
```html
|
|
59
|
+
<!-- index.html -->
|
|
60
|
+
<!DOCTYPE html>
|
|
61
|
+
<html>
|
|
62
|
+
<head>
|
|
63
|
+
<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
<div class="df jcc aic h100vh">
|
|
67
|
+
<h1 class="fs3-2rem fw700 c333333">Hello Atomic CSS!</h1>
|
|
68
|
+
</div>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### 3단계: CSS 빌드
|
|
69
74
|
|
|
70
75
|
```bash
|
|
71
|
-
|
|
76
|
+
# 일괄 빌드 (1회)
|
|
77
|
+
atomic-css build
|
|
72
78
|
```
|
|
73
79
|
|
|
74
|
-
|
|
80
|
+
실행하면 `.atomic.json`의 `cssDirectoryPath`에 `atomic.min.css`가 생성됩니다:
|
|
75
81
|
|
|
76
|
-
|
|
82
|
+
```
|
|
83
|
+
my-project/
|
|
84
|
+
├── index.html
|
|
85
|
+
├── .atomic.json
|
|
86
|
+
└── assets/css/common/
|
|
87
|
+
└── atomic.min.css ← 자동 생성!
|
|
88
|
+
```
|
|
77
89
|
|
|
78
|
-
|
|
79
|
-
| --- | --- |
|
|
80
|
-
| `atomic-css build [dir]` | 파일을 스캔하고 CSS를 일괄 생성 (1회) |
|
|
81
|
-
| `atomic-css watch [dir]` | 파일 변경을 감지하여 CSS 자동 생성 |
|
|
82
|
-
| `atomic-css init` | `.atomic.json` 설정 파일 생성 |
|
|
90
|
+
### 4단계: 개발 중에는 워치 모드
|
|
83
91
|
|
|
84
|
-
|
|
92
|
+
```bash
|
|
93
|
+
# 파일 변경을 감지하여 CSS 자동 재생성
|
|
94
|
+
atomic-css watch
|
|
95
|
+
```
|
|
85
96
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
| `-c, --config <path>` | `.atomic.json`이 위치한 프로젝트 루트 경로 |
|
|
97
|
+
워치 모드는:
|
|
98
|
+
- 시작 시 초기 빌드를 자동 실행합니다
|
|
99
|
+
- HTML 파일이 수정/추가/삭제될 때마다 자동으로 CSS를 재생성합니다
|
|
100
|
+
- 300ms 디바운스가 적용되어 연속 변경 시 불필요한 빌드를 방지합니다
|
|
101
|
+
- `Ctrl+C`로 종료합니다
|
|
92
102
|
|
|
93
|
-
|
|
103
|
+
출력 예시:
|
|
94
104
|
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
atomic-css init
|
|
105
|
+
```
|
|
106
|
+
atomic-css watch
|
|
98
107
|
|
|
99
|
-
|
|
100
|
-
|
|
108
|
+
Watching: /Users/you/my-project
|
|
109
|
+
Extensions: .html
|
|
110
|
+
Debug: OFF (atomic.min.css only)
|
|
101
111
|
|
|
102
|
-
|
|
103
|
-
|
|
112
|
+
Initial build: 5 files, 42 classes, 42 new rules
|
|
113
|
+
|
|
114
|
+
[14:30:15] Rebuilding... +3 rules
|
|
115
|
+
[14:30:22] Rebuilding... no changes
|
|
104
116
|
```
|
|
105
117
|
|
|
106
|
-
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## 명령어 상세
|
|
121
|
+
|
|
122
|
+
### `atomic-css build [dir]`
|
|
123
|
+
|
|
124
|
+
지정된 디렉토리(기본: 현재 디렉토리)의 파일을 스캔하고 CSS를 일괄 생성합니다.
|
|
107
125
|
|
|
108
126
|
```bash
|
|
109
|
-
# 현재
|
|
127
|
+
# 현재 디렉토리 빌드
|
|
110
128
|
atomic-css build
|
|
111
129
|
|
|
112
|
-
#
|
|
130
|
+
# 특정 디렉토리 빌드
|
|
131
|
+
atomic-css build src
|
|
132
|
+
|
|
133
|
+
# 출력 경로 지정
|
|
113
134
|
atomic-css build src -o dist/css
|
|
114
135
|
|
|
115
|
-
#
|
|
116
|
-
atomic-css build src -e tsx,jsx
|
|
136
|
+
# 스캔할 확장자 지정 (쉼표 구분)
|
|
137
|
+
atomic-css build src -e html,tsx,jsx
|
|
117
138
|
|
|
118
|
-
# 디버그
|
|
139
|
+
# 디버그 모드: atomic.min.css + atomic.css(원본) 모두 생성
|
|
119
140
|
atomic-css build -d
|
|
120
141
|
|
|
121
|
-
#
|
|
122
|
-
atomic-css
|
|
142
|
+
# 설정 파일 경로 지정 (.atomic.json이 다른 위치에 있을 때)
|
|
143
|
+
atomic-css build src -c /path/to/project-root
|
|
144
|
+
|
|
145
|
+
# 옵션 조합
|
|
146
|
+
atomic-css build src -o dist/css -e html,tsx,jsx -d
|
|
123
147
|
```
|
|
124
148
|
|
|
125
|
-
|
|
149
|
+
| 옵션 | 설명 | 기본값 |
|
|
150
|
+
| --- | --- | --- |
|
|
151
|
+
| `-o, --output <path>` | CSS 출력 디렉토리 | `.atomic.json`의 `cssDirectoryPath` |
|
|
152
|
+
| `-d, --debug` | 미니파이되지 않은 `atomic.css`도 함께 생성 | `false` |
|
|
153
|
+
| `-e, --extensions <exts>` | 스캔할 파일 확장자 (쉼표 구분, `.` 생략 가능) | `.atomic.json`의 `extensions` |
|
|
154
|
+
| `-c, --config <path>` | `.atomic.json`이 위치한 프로젝트 루트 경로 | 소스 디렉토리와 동일 |
|
|
126
155
|
|
|
127
|
-
|
|
128
|
-
const {
|
|
129
|
-
generateCSSRules,
|
|
130
|
-
parseClassName,
|
|
131
|
-
build,
|
|
132
|
-
watch,
|
|
133
|
-
extractClassesFromText,
|
|
134
|
-
loadConfig
|
|
135
|
-
} = require("atomic-css-cli");
|
|
156
|
+
### `atomic-css watch [dir]`
|
|
136
157
|
|
|
137
|
-
|
|
138
|
-
const classes = extractClassesFromText('<div class="df jcc aic">');
|
|
158
|
+
파일 변경을 실시간으로 감지하여 CSS를 자동 재생성합니다. `build`와 동일한 옵션을 지원합니다.
|
|
139
159
|
|
|
140
|
-
|
|
141
|
-
|
|
160
|
+
```bash
|
|
161
|
+
# 현재 디렉토리 워치
|
|
162
|
+
atomic-css watch
|
|
142
163
|
|
|
143
|
-
|
|
144
|
-
|
|
164
|
+
# 특정 디렉토리 워치 + 출력 경로 지정
|
|
165
|
+
atomic-css watch src -o dist/css
|
|
166
|
+
|
|
167
|
+
# React 프로젝트 워치
|
|
168
|
+
atomic-css watch src -e html,tsx,jsx
|
|
169
|
+
|
|
170
|
+
# 디버그 모드 워치
|
|
171
|
+
atomic-css watch -d
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
감시 대상에서 자동 제외되는 파일:
|
|
175
|
+
- `atomic.css`, `atomic.min.css` (출력 파일)
|
|
176
|
+
- `.atomic.json` (설정 파일)
|
|
177
|
+
- `node_modules/` 하위 전체
|
|
178
|
+
|
|
179
|
+
### `atomic-css init`
|
|
180
|
+
|
|
181
|
+
현재 디렉토리에 `.atomic.json` 기본 설정 파일을 생성합니다. 이미 존재하면 생성하지 않습니다.
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
atomic-css init
|
|
145
185
|
```
|
|
146
186
|
|
|
187
|
+
---
|
|
188
|
+
|
|
147
189
|
## 설정 파일 (.atomic.json)
|
|
148
190
|
|
|
149
191
|
프로젝트 루트에 `.atomic.json` 파일을 생성하면 프로젝트별로 동작을 커스터마이징할 수 있습니다. 파일이 없으면 기본 설정으로 동작합니다.
|
|
@@ -152,12 +194,14 @@ await build("./src", { output: "./dist/css" });
|
|
|
152
194
|
|
|
153
195
|
| 옵션 | 타입 | 기본값 | 설명 |
|
|
154
196
|
| --- | --- | --- | --- |
|
|
155
|
-
| `cssDirectoryPath` | `string` | `"/assets/css/common/"` | 생성될 CSS 파일의 저장 경로.
|
|
197
|
+
| `cssDirectoryPath` | `string` | `"/assets/css/common/"` | 생성될 CSS 파일의 저장 경로. 프로젝트 루트 기준 상대 경로 |
|
|
156
198
|
| `extensions` | `string[]` | `[".html"]` | 클래스를 추출할 대상 파일 확장자 |
|
|
157
199
|
| `selectedLanguages` | `string[]` | `["html"]` | VSCode 확장 전용 옵션 (CLI에서는 미사용) |
|
|
158
200
|
| `projects` | `array` | — | 멀티프로젝트 설정. 파일 경로에 따라 서로 다른 위치에 CSS를 생성 |
|
|
159
201
|
|
|
160
|
-
###
|
|
202
|
+
### 프레임워크별 설정 예시
|
|
203
|
+
|
|
204
|
+
#### 기본 HTML 프로젝트
|
|
161
205
|
|
|
162
206
|
```json
|
|
163
207
|
{
|
|
@@ -166,7 +210,7 @@ await build("./src", { output: "./dist/css" });
|
|
|
166
210
|
}
|
|
167
211
|
```
|
|
168
212
|
|
|
169
|
-
|
|
213
|
+
#### React / Next.js
|
|
170
214
|
|
|
171
215
|
```json
|
|
172
216
|
{
|
|
@@ -175,7 +219,7 @@ await build("./src", { output: "./dist/css" });
|
|
|
175
219
|
}
|
|
176
220
|
```
|
|
177
221
|
|
|
178
|
-
|
|
222
|
+
#### Vue / Nuxt
|
|
179
223
|
|
|
180
224
|
```json
|
|
181
225
|
{
|
|
@@ -184,7 +228,7 @@ await build("./src", { output: "./dist/css" });
|
|
|
184
228
|
}
|
|
185
229
|
```
|
|
186
230
|
|
|
187
|
-
|
|
231
|
+
#### PHP (Laravel, WordPress 등)
|
|
188
232
|
|
|
189
233
|
```json
|
|
190
234
|
{
|
|
@@ -193,9 +237,9 @@ await build("./src", { output: "./dist/css" });
|
|
|
193
237
|
}
|
|
194
238
|
```
|
|
195
239
|
|
|
196
|
-
|
|
240
|
+
#### 멀티프로젝트 (다국어/멀티 출력)
|
|
197
241
|
|
|
198
|
-
`projects` 배열을 사용하면 파일 경로에 따라 CSS 출력 위치를 분리할 수 있습니다.
|
|
242
|
+
`projects` 배열을 사용하면 파일 경로에 따라 CSS 출력 위치를 분리할 수 있습니다. `sources`에 해당하는 경로의 파일은 `output` 경로로, 매칭되지 않는 파일은 `cssDirectoryPath`로 CSS가 생성됩니다.
|
|
199
243
|
|
|
200
244
|
```json
|
|
201
245
|
{
|
|
@@ -218,14 +262,216 @@ await build("./src", { output: "./dist/css" });
|
|
|
218
262
|
|
|
219
263
|
| projects 옵션 | 타입 | 설명 |
|
|
220
264
|
| --- | --- | --- |
|
|
221
|
-
| `name` | `string` | 프로젝트 식별 이름 (
|
|
265
|
+
| `name` | `string` | 프로젝트 식별 이름 (콘솔 출력에 표시) |
|
|
222
266
|
| `sources` | `string[]` | 이 프로젝트에 속하는 소스 디렉토리 경로 목록 |
|
|
223
267
|
| `output` | `string` | 이 프로젝트의 CSS 출력 경로 |
|
|
224
268
|
|
|
225
|
-
|
|
269
|
+
---
|
|
270
|
+
|
|
271
|
+
## 출력 파일
|
|
272
|
+
|
|
273
|
+
| 파일 | 생성 조건 | 설명 |
|
|
274
|
+
| --- | --- | --- |
|
|
275
|
+
| `atomic.min.css` | 항상 | 미니파이된 CSS (프로덕션용) |
|
|
276
|
+
| `atomic.css` | `-d` 플래그 사용 시 | 포매팅된 CSS (디버그/확인용) |
|
|
277
|
+
|
|
278
|
+
HTML에서 연결:
|
|
226
279
|
|
|
227
280
|
```html
|
|
281
|
+
<!-- 프로덕션 -->
|
|
228
282
|
<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
|
|
283
|
+
|
|
284
|
+
<!-- 디버그 (개발 중 확인용) -->
|
|
285
|
+
<link rel="stylesheet" href="/assets/css/common/atomic.css" />
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
290
|
+
## 실전 워크플로우 예시
|
|
291
|
+
|
|
292
|
+
### HTML 프로젝트
|
|
293
|
+
|
|
294
|
+
```bash
|
|
295
|
+
mkdir my-site && cd my-site
|
|
296
|
+
npm init -y
|
|
297
|
+
npm install --save-dev atomic-css-cli
|
|
298
|
+
|
|
299
|
+
# 설정 생성
|
|
300
|
+
npx atomic-css init
|
|
301
|
+
|
|
302
|
+
# index.html 작성 후
|
|
303
|
+
npx atomic-css watch
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
`package.json`에 스크립트 추가:
|
|
307
|
+
|
|
308
|
+
```json
|
|
309
|
+
{
|
|
310
|
+
"scripts": {
|
|
311
|
+
"css": "atomic-css build",
|
|
312
|
+
"css:watch": "atomic-css watch",
|
|
313
|
+
"css:debug": "atomic-css build -d"
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
```bash
|
|
319
|
+
npm run css:watch # 개발 중
|
|
320
|
+
npm run css # 배포 전 빌드
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
### React / Next.js 프로젝트
|
|
324
|
+
|
|
325
|
+
```bash
|
|
326
|
+
cd my-react-app
|
|
327
|
+
npm install --save-dev atomic-css-cli
|
|
328
|
+
|
|
329
|
+
# .atomic.json 생성 후 수정
|
|
330
|
+
npx atomic-css init
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
`.atomic.json` 수정:
|
|
334
|
+
|
|
335
|
+
```json
|
|
336
|
+
{
|
|
337
|
+
"cssDirectoryPath": "/src/assets/css/",
|
|
338
|
+
"extensions": [".html", ".tsx", ".jsx"]
|
|
339
|
+
}
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
```bash
|
|
343
|
+
# tsx/jsx 파일의 className에서 클래스 추출
|
|
344
|
+
npx atomic-css watch src -e html,tsx,jsx
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
CSS import (React):
|
|
348
|
+
|
|
349
|
+
```tsx
|
|
350
|
+
// src/App.tsx
|
|
351
|
+
import "./assets/css/atomic.min.css";
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
### Vue / Nuxt 프로젝트
|
|
355
|
+
|
|
356
|
+
`.atomic.json`:
|
|
357
|
+
|
|
358
|
+
```json
|
|
359
|
+
{
|
|
360
|
+
"cssDirectoryPath": "/src/assets/css/",
|
|
361
|
+
"extensions": [".html", ".vue"]
|
|
362
|
+
}
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
```bash
|
|
366
|
+
npx atomic-css watch src -e html,vue
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### CI/CD 파이프라인
|
|
370
|
+
|
|
371
|
+
```yaml
|
|
372
|
+
# GitHub Actions 예시
|
|
373
|
+
- name: Generate Atomic CSS
|
|
374
|
+
run: npx atomic-css-cli build src -o dist/css -e html,tsx,jsx
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
---
|
|
378
|
+
|
|
379
|
+
## Programmatic API
|
|
380
|
+
|
|
381
|
+
Node.js에서 직접 import하여 사용할 수 있습니다.
|
|
382
|
+
|
|
383
|
+
```js
|
|
384
|
+
const {
|
|
385
|
+
generateCSSRules,
|
|
386
|
+
parseClassName,
|
|
387
|
+
build,
|
|
388
|
+
watch,
|
|
389
|
+
extractClassesFromText,
|
|
390
|
+
loadConfig,
|
|
391
|
+
minifyCss
|
|
392
|
+
} = require("atomic-css-cli");
|
|
393
|
+
|
|
394
|
+
// 텍스트에서 클래스 추출
|
|
395
|
+
const classes = extractClassesFromText('<div class="df jcc aic gap2rem">');
|
|
396
|
+
// → ["df", "jcc", "aic", "gap2rem"]
|
|
397
|
+
|
|
398
|
+
// 클래스명 → CSS 규칙 생성
|
|
399
|
+
const rules = generateCSSRules(["df", "jcc", "aic"]);
|
|
400
|
+
|
|
401
|
+
// CSS 미니파이
|
|
402
|
+
const minified = minifyCss(rules);
|
|
403
|
+
|
|
404
|
+
// 프로그래밍 방식으로 빌드
|
|
405
|
+
await build("./src", {
|
|
406
|
+
output: "./dist/css",
|
|
407
|
+
debug: false,
|
|
408
|
+
extensions: [".html", ".tsx"]
|
|
409
|
+
});
|
|
410
|
+
|
|
411
|
+
// 프로그래밍 방식으로 워치
|
|
412
|
+
const watcher = watch("./src", {
|
|
413
|
+
output: "./dist/css",
|
|
414
|
+
extensions: [".html", ".tsx"]
|
|
415
|
+
});
|
|
416
|
+
```
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
420
|
+
## 왜 Atomic CSS인가?
|
|
421
|
+
|
|
422
|
+
- **제로 CSS 작성**: 별도 CSS 파일 작성이 불필요합니다. HTML 클래스명만으로 모든 시각적 스타일을 처리합니다.
|
|
423
|
+
- **무제한 자유도**: 다른 유틸리티 프레임워크와 달리 미리 정해진 값에 제한받지 않습니다. `gap37px`, `w847px`, `fs1-3rem` 등 어떤 수치와 단위든 자유롭게 조합할 수 있습니다.
|
|
424
|
+
- **직관적 네이밍**: CSS 속성과 값의 앞글자를 조합하는 규칙 하나만 알면, 문서 없이도 대부분의 클래스명을 추론할 수 있습니다.
|
|
425
|
+
- **14단계 반응형**: QHD(2560px)부터 Ultra Small(420px)까지 14개 브레이크포인트를 지원하여 세밀한 반응형 대응이 가능합니다.
|
|
426
|
+
- **32개 의사 클래스**: hover, focus, disabled, valid 등 32개 의사 클래스를 프리픽스 방식으로 간편하게 적용합니다.
|
|
427
|
+
- **협업 효율**: HTML에서 바로 디자인 변경 및 조정이 가능하여, CSS 파일을 오가며 작업하는 시간이 대폭 줄어듭니다.
|
|
428
|
+
- **제로 의존성**: 외부 CSS 라이브러리 없이 사용 가능합니다.
|
|
429
|
+
- **스타일 일관성**: 전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용하므로 스타일의 일관성이 자연스럽게 유지됩니다.
|
|
430
|
+
|
|
431
|
+
## 핵심 컨셉
|
|
432
|
+
|
|
433
|
+
CSS 속성과 값의 **앞글자를 조합**하여 클래스명을 만듭니다.
|
|
434
|
+
|
|
435
|
+
```
|
|
436
|
+
display: flex → df
|
|
437
|
+
justify-content: center → jcc
|
|
438
|
+
align-items: center → aic
|
|
439
|
+
flex-direction: column → fdc
|
|
440
|
+
white-space: nowrap → wsn
|
|
441
|
+
text-overflow: ellipsis → toe
|
|
442
|
+
object-fit: cover → ofc
|
|
443
|
+
```
|
|
444
|
+
|
|
445
|
+
이 규칙만 알면 문서에 없는 속성도 추론할 수 있습니다.
|
|
446
|
+
|
|
447
|
+
```html
|
|
448
|
+
<div class="df jcc aic gap2rem p2rem bgFFFFFF br8px">Hello Atomic CSS!</div>
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
생성되는 CSS:
|
|
452
|
+
|
|
453
|
+
```css
|
|
454
|
+
.df {
|
|
455
|
+
display: flex;
|
|
456
|
+
}
|
|
457
|
+
.jcc {
|
|
458
|
+
justify-content: center;
|
|
459
|
+
}
|
|
460
|
+
.aic {
|
|
461
|
+
align-items: center;
|
|
462
|
+
}
|
|
463
|
+
.gap2rem {
|
|
464
|
+
gap: 2rem;
|
|
465
|
+
}
|
|
466
|
+
.p2rem {
|
|
467
|
+
padding: 2rem;
|
|
468
|
+
}
|
|
469
|
+
.bgFFFFFF {
|
|
470
|
+
background-color: #ffffff;
|
|
471
|
+
}
|
|
472
|
+
.br8px {
|
|
473
|
+
border-radius: 8px;
|
|
474
|
+
}
|
|
229
475
|
```
|
|
230
476
|
|
|
231
477
|
---
|
|
@@ -543,21 +789,7 @@ await build("./src", { output: "./dist/css" });
|
|
|
543
789
|
|
|
544
790
|
> **AI가 Atomic CSS를 완벽하게 이해합니다.**
|
|
545
791
|
|
|
546
|
-
Atomic CSS는 AI 코딩 도구를 위한 전용 **MCP(Model Context Protocol) 서버**를 제공합니다.
|
|
547
|
-
|
|
548
|
-
### 왜 MCP인가?
|
|
549
|
-
|
|
550
|
-
일반적인 CSS 프레임워크를 AI와 사용할 때의 문제:
|
|
551
|
-
|
|
552
|
-
- AI가 클래스명을 **추측**하거나 **잘못된 클래스**를 생성
|
|
553
|
-
- 문서를 매번 컨텍스트에 넣어야 하는 **토큰 낭비**
|
|
554
|
-
- 프레임워크 업데이트 시 AI가 **구버전 정보**를 사용
|
|
555
|
-
|
|
556
|
-
**Atomic CSS + MCP는 이 문제를 완전히 해결합니다:**
|
|
557
|
-
|
|
558
|
-
- AI가 클래스명을 추측하지 않고 MCP 서버에 **직접 질의**
|
|
559
|
-
- 항상 **최신 데이터** 기반으로 정확한 클래스 반환
|
|
560
|
-
- 컨텍스트 오염 없이 **필요한 순간에만** 정보를 가져옴
|
|
792
|
+
Atomic CSS는 AI 코딩 도구를 위한 전용 **MCP(Model Context Protocol) 서버**를 제공합니다. AI가 Atomic CSS의 모든 클래스 체계를 **실시간으로 조회하고, 검색하고, 생성**할 수 있도록 설계된 AI 전용 인터페이스입니다.
|
|
561
793
|
|
|
562
794
|
### 제공 도구 (Tools)
|
|
563
795
|
|
|
@@ -582,10 +814,6 @@ Atomic CSS는 AI 코딩 도구를 위한 전용 **MCP(Model Context Protocol)
|
|
|
582
814
|
}
|
|
583
815
|
```
|
|
584
816
|
|
|
585
|
-
> `https://mcp.atomiccss.dev`는 Atomic CSS 전용 원격 MCP 서버입니다. 로컬 설치가 필요 없으며, 인터넷 연결만으로 모든 AI 도구에서 사용할 수 있습니다.
|
|
586
|
-
|
|
587
|
-
### 지원 도구
|
|
588
|
-
|
|
589
817
|
| AI 도구 | 설정 파일 | 비고 |
|
|
590
818
|
| --- | --- | --- |
|
|
591
819
|
| **Claude Code** | `.mcp.json` | 프로젝트 루트에 배치 |
|