압축에서 하는 일과 하지 않는 일
하는 일: 주석 제거(/*! … */로 시작하는 라이선스 주석은 옵션으로 보존), 줄바꿈·들여쓰기·선택자 주변 공백 제거, 블록 마지막 세미콜론 제거, 0.5px→.5px, 0px→0, 1.0em→1em, #ffffff→#fff, 16진수 소문자화, 빈 규칙 제거. 하지 않는 일: 속성 병합, 중복 선택자 합치기, 단축 속성 변환(margin: 0 0 0 0→margin: 0), 벤더 프리픽스 추가·제거, 사용되지 않는 규칙 제거. 이런 변환은 순서나 상속에 영향을 줄 수 있어 일부러 제외했습니다.
문자열과 url()은 그대로
content: " " 같은 문자열 안의 공백이나 url(data:image/svg+xml;…)의 세미콜론은 CSS 문법상 값의 일부입니다. 변환 전에 따옴표 문자열과 url() 구간을 통째로 빼 두었다가 마지막에 되돌리므로 내용이 바뀌지 않습니다. calc(100% - 20px)의 빼기 연산자 주변 공백은 필수라서 제거하지 않습니다.
0 단위 제거의 예외
0px은 0과 같지만 0%는 flex-basis·background-position 등 일부 속성에서 0과 다르게 해석될 수 있고, 0s·0deg는 시간·각도 값이라 단위가 필요합니다. 그래서 길이 단위(px, em, rem 등)만 제거하고 %, s, ms, deg는 유지합니다.
정리(beautify) 모드
압축된 CSS를 한 선언씩 줄바꿈하고 중괄호 깊이에 따라 들여씁니다. 쉼표로 이어진 선택자 목록은 각각 줄을 나누고, @media·@supports·@keyframes 안쪽은 한 단계 더 들여씁니다. 압축 과정에서 사라진 원본 주석은 되살릴 수 없으니, 원본을 보관하고 배포본만 압축하는 것이 정석입니다.
자주 묻는 질문
SCSS나 Less도 되나요?
중첩 규칙과 변수는 일반 CSS 문법과 충돌하지 않아 대체로 처리되지만 믹스인·함수 같은 전처리 문법은 검증하지 않았습니다. 컴파일된 CSS에 쓰는 것을 권장합니다.
압축 후 스타일이 깨졌어요.
원본에 중괄호 짝이 맞지 않거나 세미콜론이 빠진 선언이 있으면 결과가 달라질 수 있습니다. 입력 상단의 중괄호 경고를 확인하고, 원본이 유효한 CSS인지 먼저 점검해 주세요.
JavaScript도 압축되나요?
아닙니다. JS는 문법이 달라 이 규칙을 적용하면 코드가 깨집니다. HTML 안의 style 태그 내용만 넣어 주세요.