CSS 압축/정리

CSS 코드를 압축하거나 보기 좋게 정리합니다. 파일 크기를 줄이거나 가독성을 높일 수 있습니다.

들여쓰기
입력
출력

CSS 압축/정리 도구 가이드

CSS 압축(Minify)에 대해서

CSS 압축은 스타일시트에서 불필요한 공백, 줄바꿈, 주석, 중복 세미콜론 등을 제거하여 파일 크기를 줄이는 최적화 과정입니다. 브라우저는 공백이나 주석 없이도 CSS를 완벽하게 해석하기 때문에, 압축된 CSS는 기능적으로 동일하면서도 전송 용량이 크게 줄어듭니다. 반대로 CSS 정리(Beautify)는 한 줄로 뭉쳐진 코드를 적절한 들여쓰기와 줄바꿈으로 펼쳐서 사람이 읽기 편한 형태로 되돌리는 작업입니다. 개발 중에는 정리된 CSS로 작업하고, 배포할 때는 압축된 CSS를 사용하는 것이 웹 성능 최적화의 기본입니다. CSS 압축의 역사는 2000년대 중반 웹 성능에 대한 관심이 높아지면서 시작되었습니다. Yahoo의 YUI Compressor와 Google의 Closure Stylesheets가 초기 도구였으며, 이후 cssnano, clean-css, esbuild 같은 현대적인 도구들이 등장했습니다. 현재는 대부분의 프론트엔드 빌드 시스템에 CSS 압축이 기본 단계로 포함되어 있지만, 빌드 환경 없이 빠르게 CSS를 압축하거나 외부 CSS를 분석할 때는 이런 온라인 도구가 여전히 유용합니다.

작동 원리

CSS 압축기는 입력된 CSS 코드를 문자 단위로 순회하면서 여러 단계의 처리를 수행합니다. 먼저 /* ... */ 형태의 주석 블록을 감지하여 제거합니다. 다음으로 줄바꿈, 탭, 연속 공백을 하나의 공백으로 축소하거나 완전히 삭제합니다. 셀렉터와 속성 사이, 중괄호 앞뒤, 세미콜론 뒤의 공백처럼 CSS 문법상 불필요한 공백도 제거 대상입니다. 예를 들어 .header { margin: 0; padding: 0; }는 .header{margin:0;padding:0}로 변환됩니다. 마지막 세미콜론 제거, 0px를 0으로 단축, 색상값 축약(#ffffff를 #fff) 같은 추가 최적화도 적용할 수 있습니다. 정리(Beautify) 모드에서는 반대로 중괄호, 세미콜론 등의 위치를 기준으로 줄바꿈과 들여쓰기를 삽입하여 코드의 계층 구조를 시각적으로 표현합니다.

함께 쓰면 좋은 도구

더 읽어볼 만한 글