CSS 포맷터, 정리 도구 & 최소화

CSS 포맷팅이란 무엇인가요?

주요 기능

예시

body{margin:0;padding:0;font-family:system-ui}.card{display:flex;gap:1rem;padding:16px;border-radius:12px;background:#fff}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}

@media(max-width:640px){.nav{flex-direction:column}.nav a{padding:8px 0}}

:root{--primary:#6366f1;--gap:8px}.btn{color:var(--primary);margin:var(--gap)}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

주요 사용 사례

상속된 CSS 정리

최소화되거나 일관성 없는 스타일시트를 정리하여 읽고 편집할 수 있게 만드세요.

코드 리뷰

풀 리퀘스트 전에 CSS를 포맷하여 리뷰어가 일관되고 비교하기 쉬운 스타일을 볼 수 있게 하세요.

더 작게 배포

프로덕션 CSS를 최소화하여 바이트를 줄이고 페이지 로드 속도를 높이세요.

예시 학습

사이트에서 복사한 스니펫을 붙여넣고 포맷하여 구조를 이해하세요.

기술 세부 정보

js-beautify로 정리

예측 가능하고 설정 가능한 출력을 위해 인기 있는 온라인 정리 도구의 검증된 엔진을 사용합니다.

CSSO로 최소화

공백을 병합하고 주석을 제거하되 스타일 렌더링 방식을 변경하지 않고 안전하게 압축합니다.

브라우저 기반

완전히 클라이언트 측에서 실행됩니다. CSS는 기기를 벗어나거나 서버에 도달하지 않습니다.

모범 사례

소스는 포맷, 프로덕션은 최소화

저장소에는 읽기 쉬운 CSS를 유지하고, 빌드·배포 단계에서만 최소화하세요.

들여쓰기 스타일 하나로 통일

깔끔한 diff를 위해 팀 전체에서 2칸·4칸·탭 중 하나를 합의하세요.

마지막에 최소화

모든 편집이 끝난 후 최소화하세요 — 최소화된 CSS는 직접 유지 관리하기 어렵습니다.

자주 묻는 질문