CSS 압축기(Minifier)
브라우저에서 CSS를 안전하게 압축합니다. 주석과 공백을 지우고 색상과 0 단위를 줄이며, 문자열, url(), calc()는 그대로 둡니다. 줄어든 바이트를 보여 줍니다.
주석 1개를 제거하고, 라이선스 주석 1개는 유지, 빈 규칙 1개 제거 · 값 4개 단축했습니다.
문자열, url() 내용, calc() 안의 공백, 사용자 지정 속성(--name) 값은 쓴 그대로 둡니다. 선택자는 절대 다시 쓰지 않습니다.
압축한 CSS는 더 빨리 불러와집니다. 주석, 들여쓰기, 줄바꿈은 브라우저에는 아무 의미가 없지만 스타일시트 크기의 3분의 1을 차지하기도 합니다. 이 압축기는 CSS를 제대로 토큰으로 나누므로 안전한 것만 제거합니다. 문자열, url() 경로, .sm\:p-4 같은 이스케이프된 클래스 이름, calc()에 필요한 공백은 건드리지 않으며, 압축 전후 크기를 알려 줍니다.
사용 방법
- 스타일시트를 상자에 붙여 넣습니다.
- CSS에 프레임워크 라이선스가 들어 있다면 /*! 라이선스 주석 유지를 켜 둡니다.
- #abc 색상, 단위 없는 0, 0.5 대신 .5를 쓰려면 값 줄이기를 켜 둡니다.
- 압축된 CSS를 복사하고 줄어든 바이트를 확인합니다.
계산식
절감 % = (원본 바이트 − 압축 후 바이트) ÷ 원본 바이트 × 100
크기는 UTF-8 바이트로 셉니다. 공백은 { } ; : , 주위와 선택자의 결합자 > + ~ 주위에서 제거하지만, 의미가 있는 곳에서는 남깁니다. div :first-child의 자손 공백, 미디어 쿼리에서 and와 ( 사이의 공백, calc() 안의 +와 − 주위 공백이 그런 곳입니다.
예시
예제 스타일시트에는 라이선스 주석, 일반 주석, 빈 .unused { } 규칙, 미디어 쿼리가 있습니다. 압축기는 라이선스를 남기고 나머지를 지우며, #FFFFFF를 #fff로, 0px 0.75rem을 0 .75rem으로, calc( 100% - 2px )를 calc(100% - 2px)로 쓰고, 시간 값은 단위가 필요하므로 0s는 그대로 둡니다. 362바이트의 예제가 279바이트로 약 23% 줄어듭니다.
자주 묻는 질문
서비스에 써도 안전한가요?
공백과 주석을 제거하고 의미를 바꾸지 않는 몇 가지 값 줄이기만 적용합니다. 규칙을 합치거나 속성 순서를 바꾸지 않는데, 더 공격적인 압축기가 레이아웃을 깨뜨리는 일은 보통 그런 곳에서 생깁니다.
0%는 왜 0으로 줄이지 않나요?
단위가 필요한 곳이 있습니다. hsl(0, 0%, 0%)와 flex 단축 속성의 백분율, transition의 0s, calc() 안의 모든 값이 그렇습니다. flex 단축 속성에서는 0px도 단위를 유지하는데, 단위 없는 0은 flex 비율이기 때문입니다. 수학 함수 밖의 다른 길이만 단위 없는 0이 됩니다.
SCSS나 Less도 처리하나요?
중첩, @media, @supports, @layer를 포함한 일반 CSS는 처리합니다. SCSS의 // 주석과 믹스인은 CSS가 아니어서 지원하지 않으니, 먼저 컴파일한 뒤 압축하세요.
내 CSS가 업로드되나요?
아닙니다. 모든 작업이 브라우저 안에서 이뤄집니다.
출처
최종 업데이트:
이 입력값이 담긴 페이지 주소: https://kakao.mobile/ko/tools/css-minifier/
인용·퍼가기
kakaoCalc. (2026, November 8). CSS 압축기(Minifier). https://kakao.mobile/ko/tools/css-minifier/
“CSS 압축기(Minifier).” kakaoCalc, 8 Nov. 2026, kakao.mobile/ko/tools/css-minifier/.