CSS 압축기
CSS 코드를 압축해 파일 크기를 줄입니다
CSS 압축기
이 도구는 정규식으로 CSS 소스를 여러 단계에 걸쳐 치환하는 방식으로 압축합니다. 주석 블록을 통째로 삭제하고, 연속된 공백·줄바꿈을 하나의 공백으로 합친 뒤 { } : ; , > ~ + 같은 구분자 앞뒤 공백을 제거하며, 마지막 세미콜론과 0px·0em 같은 0값의 단위, #ffffff처럼 각 자리가 반복되는 색상 코드를 #fff로 축약하는 규칙까지 순차적으로 적용합니다. 실제 브라우저 렌더링에는 전혀 영향을 주지 않는 부분(공백, 주석, 불필요한 세미콜론)만 골라 제거하기 때문에, 압축 전후로 화면에 보이는 스타일은 완전히 동일합니다. 정적 사이트의 로딩 속도를 개선하거나, 빌드 도구 없이 손으로 짠 CSS 파일 하나를 배포 전에 가볍게 최적화할 때 활용됩니다.
자주 묻는 질문
CSS 미니파이어란?
CSS 코드에서 브라우저가 실제로 해석하는 데 필요 없는 부분—주석, 들여쓰기, 줄바꿈, 중복 공백—을 정규식으로 찾아 제거해서 파일 용량만 줄이고 렌더링 결과는 그대로 유지하는 도구입니다.
압축 후 스타일이 바뀌나요?
바뀌지 않습니다. 이 도구가 적용하는 규칙(주석 삭제, 공백 정리, 세미콜론 정리, 0값 단위 제거, 색상 축약)은 모두 CSS 파서가 값을 해석하는 방식과 무관한 표면적인 문자만 다루기 때문에, 압축 전후 렌더링 결과는 화면상으로 완전히 동일합니다.
0px를 0으로 바꾸는 이유는?
CSS 명세상 0은 단위가 있든 없든 동일하게 해석되므로(0px = 0em = 0%), 단위를 떼어내도 의미가 전혀 바뀌지 않으면서 margin: 0px 같은 선언마다 2~3바이트씩 절약할 수 있습니다.
#ffffff를 #fff로 줄이는 방법은?
이 도구는 정규식으로 #rrggbb에서 r, g, b 각 쌍의 두 글자가 서로 같은 경우(예: #ff0000의 ff, 00, 00)만 찾아 #f00처럼 세 글자로 압축합니다. #ff9933처럼 각 쌍이 다른 값이면 이 규칙에 걸리지 않아 원래 6자리 그대로 유지됩니다.
프로덕션에서 권장하는 도구는?
이 도구는 브라우저에서 즉석으로 확인하거나 소규모 CSS를 빠르게 다듬을 때 유용하지만, 대규모 빌드 파이프라인에는 CSS 파서를 기반으로 더 정교하게 최적화하는 cssnano, clean-css, PostCSS의 압축 플러그인을 사용하는 것이 안전합니다.
SCSS/LESS도 압축 가능한가요?
아니요. 이 도구는 순수 CSS 문법만 인식하는 정규식 기반이라, $variable이나 &:hover 같은 SCSS/LESS 전용 문법이 들어있으면 예상치 못하게 손상될 수 있습니다. 먼저 각각의 컴파일러로 순수 CSS로 변환한 뒤 이 도구에 넣어야 합니다.
CSS 변수는 압축 시 문제없나요?
네. --primary-color 같은 CSS 커스텀 프로퍼티는 일반 선언과 동일한 구조(속성명: 값;)를 가지므로 공백·세미콜론 정리 규칙이 안전하게 적용되며, 변수명 자체가 손상되지 않습니다.
미디어 쿼리도 압축되나요?
네. @media (max-width: 600px){ ... } 블록도 결국 중괄호와 세미콜론으로 이루어진 CSS 구문이기 때문에, 이 도구의 공백·주석 제거 규칙이 블록 내부까지 동일하게 적용됩니다.