CSS 압축·정리
CSS Minify · Beautify
🔒 이 도구는 입력한 데이터를 서버로 전송하지 않습니다. 모든 변환·계산은 여러분의 브라우저 안에서만 실행되므로 민감한 데이터도 안전하게 처리할 수 있습니다.
CSS 압축·정리란?
배포용 CSS는 주석과 공백을 없애 파일 크기를 줄이는 것(minify)이 로딩 속도에 유리합니다. 반대로 남이 압축해 둔 CSS를 읽거나 수정하려면 보기 좋게 펼치는 것(beautify)이 필요합니다. 이 도구는 두 가지를 모두 수행하며, 압축 후 원본 대비 몇 % 줄었는지도 함께 보여 줍니다.
사용 방법
- 입력창에 CSS 코드를 붙여넣습니다.
- 압축(Minify)을 누르면 주석·공백을 제거한 한 줄 결과가 나옵니다.
- 정렬(Beautify)을 누르면 규칙마다 줄바꿈·들여쓰기가 들어간 읽기 좋은 형태가 됩니다.
- 원본·결과 용량과 절감률을 확인하고 결과를 복사합니다.
실무 활용 예시
- 배포 최적화 — 빌드 도구 없이 소규모 페이지의 CSS를 빠르게 압축해 인라인으로 넣습니다.
- 코드 판독 — 한 줄로 압축된 서드파티 CSS를 펼쳐 어떤 규칙이 있는지 살펴봅니다.
- 용량 점검 — 스타일이 얼마나 무거운지, 압축으로 얼마나 줄어드는지 가늠합니다.
팁과 주의점
- 이 도구는 안전한 범위의 공백·주석 제거에 집중합니다. 속성 병합·색상 축약 같은 고급 최적화는 전문 빌드 도구(cssnano 등)를 쓰세요.
- 주석 안에 라이선스 표기가 있으면 압축 시 사라지므로, 필요하면 결과에 다시 넣으세요.
- 처리는 브라우저에서만 이뤄지므로 비공개 스타일도 외부로 나가지 않습니다.
자주 묻는 질문
Minify와 Beautify는 어떻게 다른가요?
Minify는 주석과 공백을 없애 파일 크기를 최소화한 한 줄로 만들고, Beautify는 규칙마다 줄바꿈과 들여쓰기를 넣어 사람이 읽기 좋게 펼칩니다. 스타일 결과는 동일합니다.
얼마나 용량이 줄어드나요?
주석과 여백이 많은 CSS일수록 절감폭이 큽니다. 도구가 원본과 압축본의 바이트 수, 절감률(%)을 함께 표시하므로 효과를 바로 확인할 수 있습니다.
압축이 스타일을 망가뜨리지 않나요?
문자열·주석을 인식해 안전한 공백만 제거하도록 처리합니다. 다만 매우 특이한 해킹성 문법이 있다면 결과를 한 번 확인하는 것이 좋습니다.
입력한 CSS가 서버로 전송되나요?
아니요. 압축·정렬은 브라우저에서만 실행되며 입력 코드는 전송·저장되지 않습니다.