소개

Atomic CSS는 HTML 클래스명을 기반으로 자동으로 CSS 규칙을 생성합니다. 사전 정의된 패턴을 인식하여 각 클래스에 대응하는 스타일을 즉시 생성함으로써 CSS 작성의 번거로움을 획기적으로 줄여줍니다. 이를 통해 Utility-Frist CSS 프레임워크를 쉽게 구축할 수 있으며, 개발 속도와 효율성을 극대화할 수 있습니다.

핵심 기능

HTML, JS, PHP 등과 같이 처리할 파일 확장자를 지정하여, 지정된 단일 또는 복수의 파일 내 클래스명을 기반으로 자동으로 CSS 규칙을 생성합니다.
.atomic.json 설정 파일을 통해 프로젝트별 처리할 파일 확장자 설정 및 처리된 파일의 경로를 개별적으로 설정할 수 있습니다.
HEX 컬러 자동 대문자 변환: 소문자로 입력한 HEX 컬러 코드(cffffff, bgffffff 등)를 자동으로 대문자(cFFFFFF, bgFFFFFF)로 변환하여 일관성을 유지합니다.

사용법

1. 확장 설치

VSCode Marketplace에서 "Atomic CSS"를 검색하여 설치합니다.

2. 설정 파일 구성 (선택 사항)

프로젝트 루트에 .atomic.json 파일을 생성하여 프로젝트별 설정을 커스터마이징할 수 있습니다.

기본 설정 (파일 없을 시)

{
    "cssDirectoryPath": "/assets/css/common/",
    "extensions": [".html"]
}

커스텀 설정 예시

{
    "cssDirectoryPath": "/src/assets/css/",
    "extensions": [".html", ".tsx", ".vue", ".jsx", ".php"],
    "selectedLanguages": ["html", "typescriptreact", "vue", "javascriptreact", "php"]
}

설정 옵션 상세

옵션	타입	설명	예시
`cssDirectoryPath`	string	생성된 CSS 파일 저장 경로	`"/src/styles/"`
`extensions`	string[]	처리할 파일 확장자 목록	`[".html", ".tsx"]`
`selectedLanguages`	string[]	VSCode 언어 모드 지정 (자동 업데이트 활성화)	`["html", "typescriptreact"]`

3. HTML에 CSS 파일 연결

생성된 CSS 파일을 HTML에서 불러옵니다:

<!DOCTYPE html>
<html>
    <head>
        <!-- Atomic CSS 생성 파일 -->
        <link rel="stylesheet" href="/assets/css/common/atomic.css" />
    </head>
    <body>
        <div class="w100p h100vh df aic jcc bg007BFF cFFFFFF">Hello Atomic CSS!</div>
    </body>
</html>

4. 명령어

Ctrl + Shift + P (Mac: Cmd + Shift + P)로 명령 팔레트를 열어 다음 명령어를 사용할 수 있습니다:

명령어	설명	사용 시나리오
Update Atomic CSS	현재 열린 파일의 클래스를 분석하여 CSS 생성	파일 저장 없이 즉시 CSS 업데이트가 필요할 때
Apply Atomic CSS to Directory	지정한 디렉토리 내 모든 파일을 일괄 처리	프로젝트 전체 또는 특정 폴더의 CSS를 한 번에 생성할 때

5. 클래스 작성 및 자동 생성

방법 1: 자동 생성 (저장 시)

selectedLanguages에 지정된 언어 모드에서 파일을 저장하면 자동으로 CSS가 생성됩니다:

<div class="w300px h200px bg007BFF br10px"></div>

저장 시 atomic.css에 자동 생성:

.w300px {
    width: 300px;
}
.h200px {
    height: 200px;
}
.bg007BFF {
    background-color: #007bff;
}
.br10px {
    border-radius: 10px;
}

방법 2: 수동 생성 (명령어 실행)

파일 저장 없이 즉시 CSS를 업데이트하려면:

Ctrl + Shift + P (Mac: Cmd + Shift + P)
"Update Atomic CSS" 입력 및 실행
현재 열린 파일의 클래스가 즉시 분석되어 CSS 파일에 추가됩니다

방법 3: 디렉토리 전체 처리 (일괄 생성)

프로젝트 전체 또는 특정 폴더의 모든 파일을 한 번에 처리:

Ctrl + Shift + P → "Apply Atomic CSS to Directory" 실행
디렉토리 경로 입력
- 절대 경로: C:\Users\project\src
- 상대 경로: /src 또는 ./components
처리할 확장자 입력
- 예: html, tsx, vue, jsx, php
- 쉼표로 구분하여 여러 확장자 지정 가능
지정된 디렉토리 내 모든 해당 파일을 분석하여 CSS 생성 완료

사용 예시:

디렉토리 경로: /src/components
확장자: tsx, jsx
→ src/components 폴더 내 모든 .tsx, .jsx 파일의 클래스를 분석하여 CSS 생성

6. 실전 예제

반응형 버튼

<button
    class="
    p12px-24px
    bg007BFF
    cFFFFFF
    br8px
    fs16px
    fw600
    cp
    tall300ms
    hover-bg0056B3
    hover-bs0px4px12px0px0-0-0-20
    active-ts0_98
    md-p10px-20px
    md-fs14px
"
>
    클릭하세요
</button>

글래스모피즘 카드

<div
    class="
    bfb10px
    bg255-255-255-20
    br16px
    p24px
    bs0px8px32px0px0-0-0-10
"
>
    <h2 class="fs24px fw700 mb16px">제목</h2>
    <p class="fs16px lh1-6 c333333">내용</p>
</div>

3컬럼 그리드 레이아웃

<div
    class="
    dg
    gtcrepeat-3-1fr
    gap20px
    md-gtcrepeat-2-1fr
    sm-gtcrepeat-1-1fr
"
>
    <div class="bgF0F0F0 p20px br8px">카드 1</div>
    <div class="bgF0F0F0 p20px br8px">카드 2</div>
    <div class="bgF0F0F0 p20px br8px">카드 3</div>
</div>

동작 방식

파일을 저장할 때마다 지정된 확장자의 파일에서 클래스명을 추출합니다.
추출된 클래스명에 대한 CSS 규칙을 생성하여 지정된 경로에 CSS 파일로 저장합니다.

장점

Utility-Frist CSS 방법론을 사용하여, 미리 정의되지 않은 클래스를 동적으로 생성하여 사용합니다. 핵심은 반복적으로 사용되는 원자 단위의 스타일 조각들을 유틸리티 클래스 규칙으로 사용하여 빠르고 유연하게 스타일을 적용할 수 있습니다.
특히 재사용 가능한 유틸리티 클래스를 사용하며, 클래스 이름이 곧 스타일 자체를 설명하기 때문에 누구나 쉽고 빠르게 클래스들을 조합하여 다양한 디자인을 만들 수 있습니다.
협업 시 HTML에서 바로 디자인 변경 및 조정이 가능하기 때문에 복잡하게 요청하고 처리하는 등의 작업 시간이 대폭 감소합니다.
전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용함으로써 스타일의 일관성을 유지할 수 있고 매번 새로운 클래스명을 고민하고 정의하는 대신 이미 만들어진 유틸리티 클래스를 사용하여 더욱 빠르고 효율적인 개발이 가능해 집니다.
다른 라이브러리와 종속성이 없기 때문에 확장팩 설치 이외 요구되는 까다로운 조건이 없습니다.
다른 라이브러리와는 달리 무제한의 값과 단위를 자유롭게 조합하여 사용할 수 있습니다.
또한, 총 14가지 해상도에 대응하는 미디어 쿼리 접두사를 이용하여 아주 간편하게 반응형 웹 어플리케이션을 구축할 수 있습니다.
별도의 학습없이 논리적으로 클래스명을 이해하고 예측하여 사용할 수 있도록 러닝커브를 최소화 하였습니다.
사용자가 저장한 클래스를 동적으로 스타일이 생성되며, CSS에서 가능한 모든 단위체계를 사용할 수 있으며 폭 넓은 자유도로 어떠한 환경에서도 사용할 수 있습니다.

특징

재사용 가능한 유틸리티 클래스
직관적인 스타일링
유지보수의 용이성
코드의 일관성
빠른 개발 속도

주요 기능 (v2.4.1)

🎨 Shadow 시스템

Box Shadow: bs0px2px4px0px000000 → box-shadow 즉시 생성
Text Shadow: ts0px0px10pxFF00FF → 텍스트 그림자 효과
Text Stroke: ts2px000000 → 텍스트 외곽선

✨ Pseudo-Class (33개 지원)

인터랙션: hover-, focus-, active-, focus-visible-, focus-within-
입력 상태: disabled-, enabled-, checked-, indeterminate-
검증 상태: valid-, invalid-, required-, optional-
링크 상태: link-, visited-, any-link-, target-
기타: empty-, first-child-, last-child-, nth-child- 등

<button
    class="
  bg007BFF
  hover-bg0056B3
  active-ts0_98
  disabled-o50p
"
>
    버튼
</button>

🌟 Backdrop Filter

10가지 필터 타입: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow
글래스모피즘 효과 간편 구현

<div class="bfb10px bg255-255-255-20">글래스 효과</div>

📐 Grid Template & Calc

Grid Template: repeat, minmax 지원
Calc 연산: calc-sub, calc-add, calc-mul, calc-div

<div class="gtcrepeat-3-1fr gap20px">3컬럼 그리드</div>
<div class="wcalc-sub100p-40px">계산된 너비</div>

📦 Padding/Margin Shorthand

CSS 표준 shorthand 지원 (1~4개 값)

<div class="p10px-20px">padding: 10px 20px</div>
<div class="m10px-20px-30px-40px">4방향 개별 설정</div>

📱 14가지 미디어 쿼리

QHD(2560px) → Ultra Small(420px)까지 세밀한 반응형 대응

<div class="w100p md-w50p sm-w100p">반응형 너비</div>

사용 예시

<!-- 간단한 카드 컴포넌트 -->
<div
    class="
  bgFFFFFF
  br12px
  p20px
  bs0px4px12px0px0-0-0-10
  hover-bs0px8px24px0px0-0-0-15
  tall300ms
"
>
    <h3 class="fs18px fw700 mb10px">제목</h3>
    <p class="fs14px c666666 lh1-6">내용</p>
</div>

지원 및 문의

eorud0713@gmail.com

Atomic CSS

Drangon-Knight

소개