🗜️ CSS 압축기

소개

이 CSS 압축기는 토큰화 방식을 사용하여 엣지 케이스를 올바르게 처리하며 완전히 브라우저 내에서 실행됩니다. 한 줄(//) 및 여러 줄(/* */) 주석을 제거하고, 연속된 공백을 단일 공백으로 축소하거나 { } : ; , > 등 구두점 주변의 공백을 제거합니다. 따옴표로 묶인 문자열과 url() 값의 내용은 보존하므로 데이터 URI나 폰트 이름 안의 공백이 손상되지 않습니다. 완전한 AST 파서가 아닌 기본 토크나이저이므로 빠르고 의존성이 없으며, 수작업 또는 전처리기로 생성된 대부분의 CSS에 적합합니다. 원본 크기·압축 크기·절감 바이트를 표시하여 추가 최적화 여부를 판단할 수 있습니다.

사용 방법

1. 왼쪽 입력 영역에 CSS를 붙여넣으세요.
2. Minify 버튼을 클릭하면 도구가 CSS를 토큰화하여 오른쪽에 압축된 결과를 출력합니다.
3. 크기 요약에서 원본 크기, 압축 크기, 절감된 바이트 수를 확인하세요.
4. Copy 버튼으로 압축된 CSS를 클립보드에 복사하거나, Download로 .css 파일로 저장하세요.

자주 묻는 질문

이 도구는 서버에서 CSS를 처리하나요?

아니요. 압축은 JavaScript를 사용하여 브라우저 안에서만 실행됩니다. CSS가 어디에도 전송되지 않습니다.

압축하면 CSS가 깨질 수 있나요?

토크나이저가 따옴표 문자열과 url() 값을 보호하므로 유효한 CSS는 그대로 유지됩니다. 다만 완전한 AST 파서가 아니므로 비표준 구문의 드문 엣지 케이스는 완벽하게 처리되지 않을 수 있습니다.

한 줄 // 주석도 제거되나요?

네. // 한 줄 주석과 /* */ 여러 줄 주석 모두 제거됩니다. // 는 CSS 표준 사양에는 없지만 전처리기 소스 파일에서 흔히 사용됩니다.

CSS가 얼마나 작아지나요?

일반적인 수작업 CSS는 20~40% 정도 줄어듭니다. 주석이 많거나 공백이 넓으면 더 많이 절감됩니다. 최대 압축을 위해서는 서버의 gzip 또는 Brotli와 함께 사용하세요.

변수(var())나 calc() 식이 있는 CSS도 압축할 수 있나요?

네. 사용자 정의 속성(--var), var(), calc() 및 기타 최신 CSS 함수는 일반 토큰 값으로 처리되어 안전하게 통과됩니다.