🗜️ CSS 압축기
CSS를 붙여넣으면 주석과 불필요한 공백이 제거된 압축 코드가 나옵니다. 빌드 도구 설치가 필요 없습니다.
사용 방법
- 압축할 CSS 코드를 입력란에 붙여넣습니다.
- 주석·공백·줄바꿈이 제거된 결과가 즉시 표시됩니다.
- 복사 버튼으로 압축된 CSS를 가져가 배포 파일에 사용합니다.
이럴 때 유용해요
- 빌드 파이프라인이 없는 소규모 사이트의 style.css를 배포 전에 압축할 때
- 티스토리·워드프레스 스킨 편집기에 넣을 커스텀 CSS 용량을 줄일 때
- HTML 이메일이나 인라인 스타일 블록을 최대한 가볍게 만들 때
알아두면 좋은 팁
- 압축 전 원본은 반드시 따로 보관하세요. 압축된 코드는 사람이 읽기 어려워 유지보수용으로는 부적합합니다.
- calc() 안의 연산자 공백은 보존되도록 처리하지만, 압축 후에는 꼭 페이지 렌더링을 한 번 확인하는 것이 안전합니다.
자주 묻는 질문
압축하면 용량이 얼마나 줄어드나요?
주석과 들여쓰기가 많은 코드는 보통 20~40% 줄어듭니다. 이미 압축된 코드나 주석이 없는 코드는 절감 폭이 작습니다.
압축한 CSS가 원본과 동일하게 동작하나요?
주석·공백 제거는 CSS 문법상 의미가 없는 부분만 건드리므로 대부분 동일하게 동작합니다. 다만 주석 기반 핵이나 특수한 문법을 쓰는 경우가 있으니 적용 후 화면을 확인하세요.
SCSS나 LESS도 압축할 수 있나요?
이 도구는 순수 CSS 전용입니다. SCSS/LESS는 중첩 문법이 있어 컴파일이 먼저 필요하며, 컴파일된 결과 CSS를 붙여넣으면 압축할 수 있습니다.
코드가 외부로 유출될 위험은 없나요?
없습니다. 압축은 전부 브라우저 자바스크립트로 처리되고 서버에 코드가 전송·저장되지 않으므로 사내 코드를 넣어도 안전합니다.
