CSS 압축기
CSS 용량을 줄여 줍니다 — 주석과 공백을 제거하고 규칙을 한 줄로 압축하며, 100% 브라우저에서 실행되고 업로드되지 않습니다.
/*! MyApp v1.0 | MIT License */ .btn{color:#ffffff;background:#0070f3;padding:8px 16px;border-radius:6px}141 → 105 바이트 (26% 절감)
🔒 브라우저에서 처리되며 업로드되지 않습니다.
이 CSS 압축기의 기능
스타일시트를 붙여넣으면 배포에 바로 쓸 수 있는 간결한 버전을 돌려줍니다. /* */ 주석을 제거하고 연속된 공백·탭·줄바꿈을 합치며, 중괄호·콜론·세미콜론·쉼표 주변의 불필요한 공백을 없앱니다. 또한 각 규칙에서 닫는 중괄호 앞의 불필요한 마지막 세미콜론도 제거합니다. 입력하는 즉시 결과가 갱신되고, 절감된 바이트 수를 알려 주는 용량 표시가 함께 나오므로 결과를 곧바로 빌드에 넣거나 인라인으로 붙여넣을 수 있습니다.
안전하고 예측 가능한 압축
CSS가 작아지면 전송 바이트가 줄어 특히 모바일 환경에서 첫 화면 표시가 빨라집니다. 이 압축기는 의도적으로 보수적으로 동작합니다. 따옴표 문자열과 url() 안의 내용은 그대로 보존하고, 선택자의 의미가 바뀌지 않도록 자손 결합자 공백(.a .b 같은)을 유지하며, calc(100% - 30px) 같은 calc() 식 안의 공백도 그대로 둡니다. 같은 입력은 항상 같은 결과를 내며 서버를 거치지 않습니다.
자주 묻는 질문
제 CSS가 서버로 업로드되나요?
아니요. 모든 압축은 브라우저 안에서 JavaScript로 처리됩니다. 스타일시트가 전송·저장·업로드되지 않으므로 공개 전이거나 비공개인 CSS도 안전하게 유지됩니다.
압축하면 스타일 동작이 바뀌나요?
아니요. 이 도구는 주석과 불필요한 공백, 그리고 각 규칙의 불필요한 마지막 세미콜론만 제거합니다. 문자열과 url() 내용, 자손 결합자 공백, calc() 안의 공백을 보존하므로 렌더링 결과는 동일합니다.
용량이 얼마나 줄어드나요?
원본에 주석과 들여쓰기가 얼마나 많은지에 따라 다릅니다. 주석이 많고 잘 들여쓰기된 소스는 보통 20~50% 정도 줄어듭니다. 도구가 압축 전후의 정확한 바이트 수와 절감 비율을 보여 줍니다.