이렇게 사용하세요
원본 칸에 CSS를 붙여 넣으면 입력하는 동안 결과가 바로 바뀌어요. 배포용 파일을 가볍게 만들 때는 "압축", 남이 압축해 둔 CSS를 읽거나 고칠 때는 "정리"를 고르세요. 정리 모드에서는 공백 2칸, 4칸, 탭 중 원하는 들여쓰기를 고를 수 있고, 여러 선택자는 한 줄에 하나씩, @media 안의 규칙은 한 단계 더 들여써서 보여 줘요.
안전하게 줄이는 원리
먼저 CSS를 문자열, url(), 주석, 나머지 기호로 잘게 나눠요. 문자열과 url 안의 공백이나 세미콜론은 의미가 있기 때문에 한 글자도 바꾸지 않아요. 그다음 주석을 지우고, 여러 칸 공백을 한 칸으로 줄이고, { } ; , : 앞뒤처럼 공백이 없어도 뜻이 같은 자리의 공백을 빼요. 블록 끝의 마지막 세미콜론도 지워요.
반대로 공백이 의미를 바꾸는 곳은 남겨요. div :first-child의 띄어쓰기는 자손 선택자라서 지우면 다른 뜻이 되고, calc(1px + 2px)의 + 양옆 공백은 없으면 문법 오류가 나요. 색상 코드 줄이기나 0px를 0으로 바꾸는 식의 값 변환은 하지 않아서 결과가 원본과 똑같이 동작해요.
자주 묻는 질문
얼마나 줄어드나요?
주석과 들여쓰기가 많은 CSS는 보통 20~40% 줄어요. 서버에서 gzip이나 brotli 압축까지 켜면 전송량은 더 작아져요.
SCSS나 Less도 되나요?
중첩 규칙까지는 대부분 정리되지만, 믹스인이나 // 한 줄 주석 같은 전처리기 문법은 CSS가 아니라서 결과가 어긋날 수 있어요. 컴파일된 CSS에 쓰는 걸 권해요.
코드가 서버로 전송되나요?
아니요. 압축과 정리는 모두 브라우저 안에서 이루어져요.