CSS 압축기 (CSS Minifier)
스타일시트를 붙여넣으면 공백과 주석을 제거하고, #ff0000 → red처럼 값을 줄이며, CSSO의 구조 최적화로 중복 규칙을 병합합니다.
브라우저에서 실행가입 불필요업로드 없음
압축 결과
CSS 압축기 사용 방법
- CSS를 붙여넣거나
.css파일을 엽니다. - 규칙과 선언을 병합하려면 재구성을 켜 두고, 공백만 안전하게 정리하려면 끕니다.
- 라이선스 주석 유지를 켜 두면
/*! … */고지가 보존됩니다. - 원본, 압축, gzip 크기를 비교합니다.
- 결과를 복사하거나
output.min.css를 다운로드합니다.
CSS 압축의 원리
이 도구는 CSSO(CSS Optimizer)를 사용합니다. CSSO는 스타일시트를 구문 트리로 파싱한 뒤 의미가 같은 가장 짧은 형태로 다시 출력합니다. 공백과 주석 제거 외에도 안전한 값 변환을 적용합니다.
#ffffff→#fff,#ff0000→red0px→0,0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- 빈 규칙과 중복 선언 제거
“재구성(restructure)”은 무엇을 하나요?
재구성은 스타일시트 전체를 살펴봅니다. 선언이 동일한 규칙은 하나의 선택자 목록(.a,.b{color:red})으로 합치고, 반복되는 선택자도 결합합니다. 실제 스타일시트에서 보통 5~15%를 추가로 줄여 줍니다. CSSO는 캐스케이드 순서가 유지될 때만 병합하지만, 특이한 덮어쓰기에 의존한다면 이 옵션을 끄고 순수 구문 수준의 압축만 할 수 있습니다.
CSS를 압축하는 이유
CSS는 렌더링을 차단합니다. 브라우저는 <head>의 스타일시트를 다운로드하고 파싱하기 전까지 페이지를 그릴 수 없습니다. CSS가 작을수록 First Contentful Paint가 빨라지고 Core Web Vitals가 좋아져 사용자 경험과 검색 순위 모두에 도움이 됩니다. 최상의 결과를 위해 서버의 gzip 또는 Brotli 압축과 함께 사용하세요.
자주 묻는 질문
CSS를 압축해도 안전한가요?
네. 공백과 주석은 CSS 렌더링에 영향을 주지 않으며, CSSO의 값 변환은 명세상 동일합니다. 재구성은 캐스케이드 순서를 유지하며, 가장 보수적인 결과를 원하면 끄면 됩니다.
사용자 정의 속성, 중첩, @layer 같은 최신 CSS도 지원하나요?
네. 사용자 정의 속성(
--var), @media, @supports, @layer, @container, 그리드 문법이 모두 보존됩니다.압축한 CSS를 나중에 되돌릴 수 있나요?
압축된 CSS는 어떤 포매터로든 다시 들여쓰기할 수 있지만, 제거된 주석은 복구할 수 없습니다. 원본 소스 파일은 보관하고 압축 파일은 빌드 결과물로 취급하세요.
스타일시트가 어딘가에 업로드되나요?
아니요. 압축은 브라우저에서 실행되며 서버로는 아무것도 전송되지 않습니다.