CSS 압축기
CSS를 한 줄로 압축하거나 읽기 좋게 정리해요. 감소율 표시.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
결과가 잘려 보여요
전체 결과는 복사 버튼으로 받을 수 있어요.
입력한 내용이 사라졌어요
이 기기에 자동 저장돼요. 브라우저 저장소를 지우면 함께 사라져요.
자주 하는 실수
- calc 안의 덧셈 기호를 붙이면 스타일 한 줄이 통째로 사라집니다. 공백 제거 규칙이 연산자 주변의 공백까지 지우기 때문입니다. CSS 값 규격상 덧셈과 뺄셈은 반드시 공백으로 둘러싸여야 하니 이 부분을 원본으로 두세요.
- 문자열 안의 주석 기호도 지워집니다. content 값 안에 주석 기호가 들어 있으면 문자만 남습니다. 따옴표로 감싼 텍스트는 건드리지 않으려면 배포 전에 결과물을 반드시 훑어 보세요.
- 주석을 지우면 라이선스 표시까지 사라집니다. 앞뒤에 느낌표가 붙은 중요 주석 표기도 예외가 아닙니다. 다른 조직에 넘길 라이브러리라면 라이선스 표시는 따로 남겨 두세요.
- 전처리 문법을 그대로 넣으면 깨집니다. 중첩과 변수는 주석 제거 규칙과 충돌합니다. 컴파일된 결과물만 넣으세요. 원본과 결과물을 함께 보관하면 되돌리기 쉽습니다.
계산 근거
압축은 주석 제거, 연속 공백을 한 칸으로 줄이기, 중괄호·콜론·세미콜론·쉼표·더하기·탭(~) 주변 공백 제거, 마지막 세미콜론 제거 순으로 문자열을 다시 조립합니다. CSS 구문에서 공백이 의미를 갖는 자리(선택자 자손 관계, 값 안의 구분자)는 건드리지 않으므로 대다수 스타일에서 결과가 같습니다.
실제로 계산해 보면
주석 없이 들여쓰기만 된 파일을 줄이면요?
예로 212자 원본이 154자가 되어 27% 줄었습니다. 주석이 없는 보통 스타일은 대체로 20~40% 줄어듭니다. 이미 압축된 파일에 다시 적용하면 거의 줄지 않습니다.
정리하기 기능은 무엇을 하나요?
주석을 지우고 중괄호마다 줄을 바꿔 들여쓰기를 다시 맞추는 기능입니다. 난독화된 파일을 사람이 읽을 수 있게 되돌릴 때 씁니다. 용량 절약이 목적이 아니라면 이쪽을 쓰세요.
결과를 그대로 배포해도 되나요?
되지만 두 곳은 확인해야 합니다. 계산식 안의 연산자와 문자열 값이 깨지기 쉬운 자리입니다. 배포 전에 실제 화면을 한 번 열어 확인하면 문제를 그 전에 잡을 수 있습니다.
더 궁금한 것
압축하면 적용 순서가 바뀌나요?
아닙니다. 선택자와 선언의 순서는 그대로 유지됩니다. 사라지는 것은 주석으로 달아 둔 임시 우선순위 표시뿐입니다. 임시 규칙을 남겨 두고 압축하면 이유를 잃게 되니 배포 전에 정리하세요.
더 줄이는 방법은 없을까요?
있습니다. 글꼴을 Base64로 내장하거나 반복되는 선택자를 묶는 방법이 더 많이 줄어듭니다. 다만 사람이 고치기 어려워지는 만큼 팀에서 합의한 뒤 쓰는 편이 안전합니다.
서버 압축과 같은 것인가요?
다릅니다. 여기서 하는 일은 전송 전에 소스에서 공백과 주석을 지우는 작업이고, 전송 압축은 그대로 보낸 텍스트를 옮기는 동안 압축하는 것입니다. 둘 다 쓰면 더 줄어들지만 원본을 미리 정리하면 전송 압축 효과가 줄어듭니다.
알아둘 경계값
- 이미 압축된 파일은 감소율이 0퍼센트로 나와요. 0퍼센트면 원본 그대로 쓰세요.
- 압축률 표시는 문자 수 기준이라 한글 주석이 많으면 바이트 체감과 달라요. 전송 용량은 별도 도량으로 확인하세요.
- 마지막 세미콜론 치환은 끝부분만 지워 중간 누락 오류는 그대로 남아요. 압축 전 유효성 검사를 먼저 하세요.
- 여러 파일을 합치지 않고 파일 단위로만 처리해요. 가져오기 순서가 있으면 합친 뒤에 압축하세요.
- 모드 선택이 입력칸과 별도라 모드를 바꾸고 버튼을 다시 눌러야 해요. 모드 표시를 누른 뒤 실행하세요.
- 10만 자 이상 대용량은 브라우저에서 수 초 걸려 멈춘 것처럼 보여요. 저장 후 실행하고 결과를 확인하세요.
결과를 믿기 전 확인 목록
- 압축 전 원본을 별도 파일에 보관하고 나서 실행하세요.
- 감소율이 0퍼센트인지 보고 배포 파일 교체 여부를 정하세요.
- 모드 표시가 의도와 맞는지 누르기 전 확인하세요.
- 중간 세미콜론 누락이 없는지 검사기를 돌리세요.
- 합칠 파일이 여러 개면 순서 목록을 먼저 정하세요.
- 문자 수 감소와 실제 전송 용량을 구분해 기록하세요.
- 미디어쿼리 조건이 동작하는지 창 너비를 바꿔 확인하세요.
- 가져오기와 문자셋 선언 위치가 맨 앞을 유지하는지 확인하세요.
- 대용량 파일은 실행 후 멈춤이 풀렸는지 결과 길이를 확인하세요.
자주 묻는 질문
얼마나 줄어드나요?
보통 20~40% 감소하며 원본 대비율을 함께 보여줍니다.
압축하면 스타일이 깨지나요?
주석·공백·마지막 세미콜론만 제거하므로 동작은 같어요. 다만 실제 배포 전 스테이징에서 확인하세요.