CSS 압축기

CSS 파일을 줄이고 얼마나 절감됐는지 바로 확인하세요.

브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.

CSS 압축 방법

  1. CSS를 붙여넣으세요.
  2. 통계 줄에서 절감된 크기를 확인하세요.
  3. 압축된 CSS를 복사하거나 다운로드하세요.

제거되는 것

  • /* ... */로 쓴 주석
  • 규칙과 선언 사이의 공백과 줄바꿈
  • 닫는 중괄호 바로 앞의 마지막 세미콜론
  • csso가 안전하게 합칠 수 있는 중복되거나 불필요한 규칙
  • 여분의 세미콜론과 안에 선언이 없는 빈 규칙 블록

일반적인 용량 절감

시작 상태대략적인 절감량
주석이 있는 손으로 쓴 CSS20~30%
이미 간결한 CSS5~10%
전처리기가 생성한 CSS10~20%

압축해야 할 때와 하지 말아야 할 때

  • 편집하는 동안이 아니라 배포 직전에 압축하세요. 읽기 쉬운 스타일시트가 디버깅하기 훨씬 빠릅니다.
  • 이미 gzip으로 작게 전송되는 파일은 추가 빌드 단계를 들일 만큼 차이가 크지 않으므로 압축을 건너뛰어도 됩니다.

압축 효과가 가장 큰 경우

  • 여러 페이지에서 공유하는 스타일시트. 절감된 바이트가 페이지 로드마다 곱해집니다.
  • 합칠 수 있는 반복 규칙이 많은 대규모 디자인 시스템이나 컴포넌트 라이브러리.
  • 빌드 파이프라인 없이 손으로 쓴 CSS가 다른 압축 과정 없이 그대로 제공되는 사이트.
  • 페이지에서 실제로 쓰는 유틸리티 클래스만 남긴 CSS 프레임워크.

CSS 압축기 자주 묻는 질문

제 CSS가 얼마나 작아지나요?

보통 10~30% 줄어듭니다. 원본에 주석과 공백이 많으면 더 많이 줄고, 이미 간결하다면 그보다 적게 줄어듭니다.

압축하면 페이지 모양이 바뀌나요?

아니요. 압축은 공백, 주석, 중복 구문만 제거합니다. 페이지에 적용되는 규칙은 그대로입니다.

중복된 규칙도 합쳐주나요?

네, 안전하게 합칠 수 있는 경우에 합쳐지며, 공백 제거만으로는 줄지 않는 부분까지 더 줄일 수 있습니다.

원본 파일을 남겨둬야 하나요?

네. 편집용으로 읽기 쉬운 버전을 남기고 압축본은 운영 환경에서만 쓰세요.

어떤 압축기를 쓰나요?

여러 번들러 플러그인에서도 쓰이는 CSS 압축기인 csso입니다. 단순한 공백 제거를 넘어 일부 중복·불필요한 규칙도 합쳐줍니다.

압축된 CSS를 그대로 스타일시트에 붙여넣어도 안전한가요?

네, 공백만 제거된 표준 CSS입니다. 어떤 브라우저나 빌드 도구도 원본과 완전히 똑같이 읽어들입니다.

-webkit- 같은 아직 필요한 벤더 접두사도 제거되나요?

아니요. 벤더 접두사가 붙은 속성과 값은 그대로 남습니다. 압축은 공백, 주석, 안전하게 합칠 수 있는 규칙만 제거하며 CSS가 실제로 선언한 속성은 절대 지우지 않습니다.

CSS 커스텀 속성(변수)은 어떻게 되나요?

--로 시작하는 이름과 값을 포함해 그대로 유지됩니다. 압축은 커스텀 속성의 이름을 바꾸거나 값을 해석하지 않습니다.

관련 도구