CSS 압축기

CSS 압축기는 스타일시트에서 주석을 제거하고 공백을 축소하여 프로덕션용 파일 크기를 줄입니다 — 더 작은 다운로드, 더 빠른 파싱과 렌더링. 읽기 쉬운 CSS를 붙여넣으면 즉시 압축된 결과를 얻을 수 있으며, 실시간 전후 크기 비교와 조절 가능한 압축 수준도 제공됩니다.

• •공백 축소: 따옴표와 주석을 인식하는 압축기가 문자열 내용은 그대로 두고 공백, 줄바꿈, 빈 줄을 제거
• •주석 제거: /* ... */ 주석을 제거하거나, 라이선스 헤더 등을 위해 주석 보존 토글로 유지
• •색상 최적화: 채널이 허용하는 경우 6자리 16진수 색상과 rgb() 값을 3자리 16진수 축약형으로 단축
• •압축 수준: 일반 모드는 안전한 공백, 주석, 색상 압축을 수행합니다. 적극 모드는 불필요한 선행 0도 제거하고(0.5px → .5px), 0 값 길이에서 숫자를 제거합니다(0px → 0)
• •크기 비교: 원본 크기, 압축 크기, 감소율을 나란히 확인
• •다운로드 가능한 출력: 압축된 결과를 .css 파일로 직접 저장

• •페이지 로드 시간을 줄이기 위해 프로덕션에 배포하기 전에 스타일시트 축소
• •<style> 태그나 HTML 이메일에 인라인으로 삽입할 작은 CSS 조각을 부풀리지 않고 준비
• •전체 PostCSS나 빌드 파이프라인을 구축하기 전에 스타일시트가 얼마나 축소될지 빠르게 확인
• •빌드 단계가 실용적이지 않은 CodePen, gist, 정적 프로토타입용 일회성 스타일시트 압축
• •Core Web Vitals나 Lighthouse 감사를 위해 성능 예산과 압축된 크기 비교

1. 1.CSS를 입력 편집기에 붙여넣거나 .css 파일을 업로드하세요
2. 2.일반 또는 적극 압축을 선택하고, 주석을 보존할지 결정하세요
3. 3.압축된 출력과 크기 감소율이 자동으로 나타납니다
4. 4.결과를 복사하거나 .css 파일로 다운로드하세요
5. 5.배포 전에 전후 바이트 수를 확인하여 크기 절감을 확인하세요

• •적극적인 0 제거(0px → 0)는 길이 단위에 대해 안전하지만, 문자열과 주석 내용은 건너뛰고 calc() 표현식 내부의 계산은 건드리지 않습니다
• •따옴표로 묶인 문자열 내부의 공백 — font-family 이름, content: "...", url() 경로 — 은 항상 정확하게 보존됩니다. 문자열과 주석 외부의 구조적 공백만 제거됩니다
• •이 압축기는 클래스 이름을 바꾸거나, 중복된 선택자를 병합하거나, 사용하지 않는 규칙을 제거하지 않습니다 — 이를 위해서는 cssnano나 PurgeCSS 같은 빌드 도구 통합 최적화 도구가 필요합니다

• •이것은 공백, 주석, 색상 압축이지 완전한 최적화가 아닙니다 — 최대 크기 감소(선택자 병합, 중복 규칙 제거, 사용하지 않는 CSS 제거)를 위해서는 cssnano나 PurgeCSS 같은 빌드 도구 통합 압축기를 사용하세요
• •압축된 출력은 가독성을 완전히 잃습니다 — 항상 원본 소스를 버전 관리 하에 보관하세요
• •매우 큰 스타일시트는 브라우저에서 완전히 처리하는 데 시간이 걸릴 수 있습니다 — 프로덕션 빌드 파이프라인에서는 일회성 브라우저 도구 대신 PostCSS나 번들러에 압축을 통합하세요

압축된 CSS가 있고 이를 읽거나 디버깅해야 한다면, 대신 CSS 뷰티파이어를 사용하세요. 들여쓰기, 정렬된 속성, 일관된 간격을 복원하여 스타일시트를 실제로 읽을 수 있게 만듭니다.