CSS 압축기

압축과 정렬, 무엇이 다른가요?

압축은 주석과 불필요한 공백을 제거하고 중복 규칙을 안전하게 병합해 가능한 한 가장 작은 CSS를 만듭니다 — 스타일시트를 배포하기 전에 크기를 줄일 때 유용합니다. 정렬은 그 반대로, 선언마다 한 줄씩 다시 들여써서 압축되거나 지저분한 파일을 다시 읽기 좋게 만듭니다. 두 기능 모두 실제 CSS 파서(csso와 js-beautify)로 동작하므로, content: 문자열 안의 주석처럼 보이는 텍스트, calc() 내부의 공백, data: URI 같은 까다로운 내용도 단순 찾아 바꾸기로 깨뜨리지 않고 그대로 보존합니다.

CSS 압축기 사용 방법

1. 붙여넣기 — 압축하거나 정렬할 CSS를 위쪽 입력창에 붙여넣습니다.
2. 들여쓰기 선택 — 공백 2칸·4칸·탭 중에서 고릅니다(정렬 결과에만 적용되며 압축에는 영향이 없습니다).
3. 실행 — ‘압축’ 또는 ‘정렬’ 버튼을 누르면 브라우저 안에서 즉시 처리됩니다.
4. 복사 — 줄어든 크기 표시를 확인하고 ‘복사’ 버튼으로 결과를 클립보드에 담습니다.

압축하면 스타일이 바뀔 위험은 없나요?

없습니다. 이 도구는 문자열을 무작정 찾아 바꾸는 방식이 아니라 실제 CSS 파서(csso)로 스타일시트를 구문 트리로 이해한 뒤 안전하게 최적화합니다. 그래서 content: 안의 주석처럼 보이는 문자열, calc() 안의 의미 있는 공백, data: URI, 벤더 프리픽스 등이 그대로 보존되어 렌더링 결과가 달라지지 않습니다.

얼마나 용량이 줄어드나요?

원본 상태에 따라 다르지만, 주석과 들여쓰기가 많은 사람이 읽기 좋은 CSS라면 보통 30~60% 정도 작아집니다. 이미 압축된 파일이라면 줄어드는 폭이 작습니다. 변환이 끝나면 원본 대비 몇 바이트, 몇 퍼센트를 줄였는지 크기 표시로 바로 확인할 수 있습니다. 서버 전송 시 gzip·brotli 압축까지 더해지면 실제 전송량은 더 줄어듭니다.

정렬(beautify)은 언제 쓰나요?

이미 한 줄로 압축된 CSS나 들여쓰기가 엉망인 파일을 읽거나 수정해야 할 때 정렬이 유용합니다. 선언마다 한 줄씩 일관된 들여쓰기로 다시 배치해 주므로, 배포된 스타일시트를 디버깅하거나 남의 코드를 이해할 때 편리합니다. 다시 배포할 때는 ‘압축’으로 되돌리면 됩니다.

제 CSS가 어딘가로 업로드되나요?

아니요. 압축과 정렬 모두 자체 호스팅 라이브러리를 이용해 전적으로 브라우저 안에서 실행되므로, 여러분의 CSS가 어떤 서버로도 전송되거나 저장되지 않습니다. 변환 후에는 압축으로 몇 바이트를 줄였는지 크기 표시가 나타나며, 복사 버튼을 누르면 결과가 곧바로 클립보드에 담깁니다.