🗜️
무료 CSS 압축기 & 정리기
파일 크기를 줄이기 위해 CSS를 압축하거나, 가독성을 위해 압축된 CSS를 정리합니다. 브라우저에서 즉각적으로 처리됩니다.
한 번 로드하면 오프라인에서도 작동
또는 아래에 .css 파일을 놓으세요
.css 파일을 여기에 놓거나 클릭해서 선택하세요
CSS · 기기에서 처리됨
또는 Ctrl+V를 눌러 클립보드에서 붙여넣기
CSS 입력
CSS 출력
여기에 출력이 표시됩니다…
주요 용도
- 프로덕션 배포용 CSS 축소프로덕션에 배포하기 전에 CSS 파일 크기를 줄입니다. 더 빠른 페이지 로드 및 낮은 대역폭 비용.
- 디버깅용 축소된 CSS 미화압축되거나 축소된 CSS를 읽을 수 있는 코드로 포맷합니다. 스타일을 검사하고 디버깅할 수 있습니다.
- 이메일 템플릿용 CSS 축소파일 크기 및 인라인 스타일 부풀림이 중요한 HTML 이메일 템플릿용 CSS를 압축합니다.
- WordPress 테마용 CSS 축소더 나은 PageSpeed 점수를 위해 사용자 정의 WordPress 테마 스타일시트 크기를 줄입니다.
- 코드 검토용 CSS 미화모든 CSS 파일을 검토 및 협업 준비가 된 깔끔하고 들여쓰기된 읽을 수 있는 코드로 포맷합니다.
사용 방법
이 도구는 전적으로 JavaScript로 만든 직접 작성한 무의존성 CSS 토크나이저를 사용합니다. 외부 라이브러리도 서버 호출도 없습니다. 토크나이저는 변환을 적용하기 전에 모든 문자를 코드, 주석, 따옴표 문자열, url() 값으로 분류하므로, 공백 규칙이 문자열 내용, 데이터 URI, calc() 표현식을 손상시키지 않습니다.
- 1토큰화 단계입력 CSS를 한 글자씩 훑어 유형별 토큰으로 나눕니다: 원시 코드 조각, /* ... */ 주석, 따옴표 문자열(이스케이프 시퀀스 유지), url(...) 블록입니다. 이렇게 하면 다음 단계의 변환이 문자열 리터럴이나 데이터 URI의 내용이 아닌 실제 CSS 구문에만 적용됩니다.
- 2압축 또는 보기 좋게 정리압축 모드에서는 일반 주석을 제거하고(/*! license */ 주석은 유지), 코드 토큰의 연속 공백을 공백 하나로 줄이며, { } : ; , > ~ 주변 공백을 제거합니다. + 와 - 주변 공백은 calc() 표현식을 망가뜨리지 않도록 의도적으로 그대로 둡니다. 정리 모드에서는 먼저 코드를 깨끗하게 압축한 뒤 다시 토큰화하고, 2칸 깊이 추적과 선언 콜론 감지로 들여쓰기해 property: value의 콜론과 a:hover 같은 선택자 콜론을 구분합니다.
- 3Gzip 크기 추정출력을 만든 뒤 브라우저 기본 CompressionStream API로 결과를 gzip 압축해 바이트 수를 측정합니다. 이는 gzip 압축을 사용하는 웹 서버가 네트워크로 보낼 크기와 일치하는 현실적인 전송 크기 추정치입니다.
- 4복사 또는 다운로드처리된 CSS는 Clipboard API로 클립보드에 쓰거나, MIME 형식 text/css의 Blob으로 styles.min.css(압축 모드) 또는 styles.css(정리 모드)로 다운로드할 수 있습니다. 크기 감소율은 입력하는 대로 실시간 표시됩니다.
관련 도구
SVG 최적화기 & 압축기
메타데이터를 제거하고, 공백을 압축하고, 소수점을 반올림하여 SVG 파일 크기를 대폭 줄입니다 — 일반적으로 30-70% 감소. 시각적 미리보기로 변형이 없음을 확인합니다.
시도해보기파일이 로컬에 유지됨
CSS 정리기
압축된 CSS를 일관된 들여쓰기로 보기 좋게 정리하거나 압축합니다. 속성을 알파벳순으로 정렬하는 옵션으로 변경 내역(diff)을 더 일정하게 비교할 수 있습니다.
시도해보기
JSON 포맷터
JSON 데이터의 형식을 지정하고, 검증하고, 축소하고 탐색합니다. 트리 보기, 구문 강조, 원클릭 복사.
시도해보기