CSS 압축기

공백, 줄바꿈, 주석을 지워 CSS를 압축하고 스타일시트 용량을 줄여 페이지를 빠르게 만드세요. 압축 전후 크기를 보여 주는 무료 CSS minifier.

스타일시트 용량 줄이기

CSS는 렌더링을 막습니다. 브라우저는 <head>의 스타일시트를 내려받아 해석하기 전까지 페이지를 그리지 않습니다. 그래서 CSS 용량은 페이지가 얼마나 빨리 보이는지에 직접 영향을 줍니다. CSS 압축기는 주석, 공백, 줄바꿈 등 브라우저에 필요 없는 문자를 지우고 압축 전후의 글자 수를 보여 줍니다.

스타일은 그대로 똑같이 작동하고 파일만 작아집니다. 워드프레스, 쇼피파이, AltumCode 테마의 사용자 정의 CSS, 빌드 도구가 없는 작은 프로젝트, 인라인 핵심(critical) CSS에 알맞습니다.

나중에 수정할 수 있게 읽기 쉬운 원본은 보관하고, 압축한 사본을 배포하세요.

CSS 압축기 사용법

CSS를 붙여 넣습니다.
제출 버튼을 눌러 압축합니다.
압축 전후의 글자 수를 비교합니다.
압축된 CSS를 사이트나 파일에 복사해 넣습니다.

예시

버튼 스타일

입력:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

결과:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

주석과 공백이 사라지고, #ffffff는 #fff로, 0px는 0으로 줄고, 반복된 margin 값이 합쳐지며, 0.80은 .8이 됩니다.

주요 활용 사례

테마나 CMS 설정 화면에 넣는 사용자 정의 CSS 압축하기.
작은 사이트와 랜딩 페이지의 스타일시트 줄이기.
첫 화면을 빨리 그리기 위한 인라인 핵심 CSS 준비하기.
HTML 이메일 템플릿 속 CSS 압축하기.
작은 정적 사이트나 랜딩 페이지처럼 빌드 과정이 없는 사이트의 스타일시트 줄이기.
페이지 에 인라인으로 넣을 핵심 CSS 준비하기.
CMS나 웹사이트 빌더에 붙여 넣는 사용자 정의 CSS 용량 줄이기.

알아두면 좋은 팁

먼저 쓰지 않는 규칙을 지우세요. CSS를 삭제하는 것이 압축보다 더 많이 줄여 줍니다.
라이선스 고지처럼 꼭 필요한 주석은 원본 파일에 남기고, 압축 후에도 유지되는지 확인하세요.
특히 특이한 핵(hack)이 들어간 CSS라면 배포 후 페이지를 테스트하세요.
HTML과 스크립트도 HTML 압축기와 자바스크립트 압축기로 압축하고, 색상 값은 색상 코드 변환기로 확인하세요.

특수한 경우와 제한 사항

결과는 긴 한 줄이라 오류를 찾기 어렵습니다. 읽기 쉬운 원본 파일은 보관하고 사본을 압축하세요.
라이선스 주석을 포함해 주석이 모두 지워집니다. 남겨야 하는 저작권 표기는 다시 추가하세요.
잘못된 CSS는 빠지거나 바뀔 수 있습니다. 압축 후 이상해 보이면 원본에 빠진 중괄호나 세미콜론이 없는지 확인하세요.

자주 묻는 질문

CSS 압축기는 무슨 일을 하나요?

스타일이 작동하는 방식은 바꾸지 않고 공백, 주석처럼 필요 없는 문자를 CSS에서 지웁니다.

압축한 CSS가 더 빠른가요?

네. 파일이 작을수록 더 빨리 내려받고 해석해 페이지가 더 일찍 그려집니다.

압축한 CSS를 다시 풀 수 있나요?

코드 정리 도구로 다시 보기 좋게 만들 수는 있지만, 지워진 주석은 복구할 수 없습니다. 원본 파일을 보관하세요.

gzip이나 Brotli를 쓰는데도 CSS를 압축해야 하나요?

네. 서버 압축과 코드 압축을 함께 쓰면 전송 용량이 가장 작아집니다.

압축하면 사이트 모양이 바뀌나요?

그렇지 않아야 정상입니다. 브라우저가 무시하는 문자만 지우고, 값은 #fff처럼 동일한 의미의 짧은 형태로 바꿉니다.

유사한 도구

HTML 압축기

공백, 줄바꿈, 주석을 지워 HTML을 압축하고 페이지 용량을 줄여 로딩 속도를 높이세요. 압축 전후 글자 수도 보여 주는 무료 HTML minifier.

자바스크립트 압축기

공백, 주석, 줄바꿈을 지워 자바스크립트를 압축하고 파일 크기를 줄여 사이트를 빠르게 만드세요. 압축 전후 글자 수를 보여 주는 무료 JS minifier.