붙여 넣으면 정리되고, 압축하면 무엇이 얼마나 줄었는지 보입니다
CSS 정리·압축기는 같은 스타일시트를 두 방향으로 바꿉니다. 정리(포맷, beautify)는 한 줄로 뭉친 .card{margin:0;padding:16px} 같은 코드를 선언 하나에 한 줄씩 펼치고 들여쓰기를 맞춰 사람이 읽기 좋게 만듭니다. 압축(minify)은 반대로 주석·공백·줄바꿈처럼 브라우저가 읽지 않는 글자를 지워 배포용 파일을 작게 만듭니다. 두 결과가 화면에 그리는 스타일은 원본과 같아야 하고, 이 도구는 그 조건을 지키는 데 맞춰 만들었습니다.
공백을 정규식으로 한꺼번에 지우는 방식은 calc(100% - 2rem)의 빼기 양옆 공백까지 없애서 값을 무효로 만들기 쉽습니다. 이 도구는 CSS 명세가 정한 방식대로 코드를 주석·문자열·괄호·선언 단위로 읽은 뒤 다시 쓰기 때문에, 지워도 되는 공백과 지우면 뜻이 바뀌는 공백을 구분합니다. 결과 아래의 용량 지도는 원본과 결과를 같은 눈금의 띠로 그려 규칙·@media·주석이 각각 얼마를 차지하고 얼마나 줄었는지 보여 주고, '찾은 것'은 남는 } 하나 때문에 규칙이 통째로 사라지는 줄 같은 오류를 줄 번호로 짚습니다.
정리와 압축이 필요한 순간
스타일시트는 쓰는 사람과 읽는 브라우저가 원하는 모양이 다릅니다. 고칠 때는 펼친 코드가 필요하고, 보낼 때는 짧은 코드가 유리합니다. 아래 같은 상황에서 이 도구를 씁니다.
- 라이브러리의 .min.css를 읽어야 할 때: 압축본만 받은 파일에서 버튼 색이 어디서 정해지는지 찾으려면 먼저 펼쳐야 합니다. 정리 모드에 붙여 넣고 결과 칸에서 찾으면 됩니다.
- 개발자 도구나 다른 사이트에서 복사한 스타일을 다듬을 때: 복사한 코드는 들여쓰기가 섞여 있거나 한 줄로 이어져 있기 쉽습니다. 한 번 정리하면 선택자와 선언의 경계가 바로 보입니다.
- 블로그·쇼핑몰 편집기의 'CSS 추가' 칸에 넣을 때: 글자 수 제한이 있거나 칸이 좁으면 압축본이 편합니다. 원본은 따로 보관하고 압축본만 붙여 넣습니다.
- 화면 일부에만 스타일이 안 먹을 때: 바로 앞 규칙의 남는
}나 닫히지 않은 괄호가 원인인 경우가 많습니다. '찾은 것'이 그 줄과 버려지는 선택자를 알려 줍니다. - 압축이 실제로 얼마나 효과가 있는지 확인할 때: 바이트가 줄어든 비율과 서버가 gzip으로 보낼 때 줄어든 비율은 다릅니다. 용량 지도의 gzip 막대로 두 값을 함께 봅니다.
쓰는 법
- 왼쪽(좁은 화면에서는 위) 입력 칸에 CSS를 붙여 넣습니다. '파일 열기'를 누르거나 .css 파일을 칸에 끌어다 놓아도 됩니다. 5 MB까지 열 수 있습니다.
- 위쪽에서 정리 또는 압축을 고릅니다. 결과는 입력하는 동안 바로 바뀝니다.
- 정리는 들여쓰기(2칸·4칸·탭), 주석을 남길지, 선택자를 쉼표마다 줄 나눌지 정할 수 있습니다. 압축은 주석 처리(/*! 만 남김·모두 지움·모두 남김)와 HEX 색 줄이기를 고릅니다.
- 용량 지도에서 띠의 칸을 누르면 그 부분이 결과 칸에 표시됩니다. '찾은 것'의 줄 번호 단추를 누르면 입력 칸에서 그 줄이 선택됩니다.
- '결과 복사'로 클립보드에 담거나 '파일로 저장'으로 내려받습니다. 압축 결과는 이름 끝이 .min.css로 저장됩니다.
정리하면 이렇게 바뀝니다
정리는 글자의 순서를 바꾸지 않고 줄과 공백만 다시 놓습니다. 선언은 한 줄에 하나, 콜론 뒤에 공백 하나, 끝에는 세미콜론을 붙이고, 중첩된 규칙은 한 단계씩 더 들여씁니다. 블록 사이에는 빈 줄을 하나 두고, 같은 줄 끝에 달린 주석은 정리 뒤에도 그 선언 끝에 남깁니다.
| 입력 | 정리 결과 | 규칙 |
|---|---|---|
.a{color:red;margin:0} | .a { / color: red; / margin: 0; / } | 선언마다 한 줄, 콜론 뒤 공백 |
h1,h2>a{…} | h1, / h2 > a { | 최상위 쉼표마다 줄 나눔, > + ~ 양옆 공백 |
rgba(0,0,0,.5) | rgba(0, 0, 0, .5) | 값 안 쉼표 뒤 공백 |
@media (min-width:600px) | @media (min-width: 600px) | 조건 괄호 안 콜론 뒤 공백 |
color:red!important | color: red !important; | !important 앞 공백 |
.menu{&:hover{…}} | .menu { / &:hover { | 중첩 규칙은 한 단계 더 들여쓰기 |
--list: a,b | --list: a,b; | 사용자 속성(--)은 공백만 하나로 |
마지막 줄처럼 --로 시작하는 사용자 속성은 쉼표 뒤에 공백을 넣지 않습니다. 사용자 속성의 값은 쓴 글자가 그대로 보관되고 자바스크립트의 getPropertyValue()도 그 글자를 돌려주기 때문에, 보기 좋게 고친 공백 하나가 스크립트가 읽는 값을 바꿀 수 있습니다. 선택자 쉼표의 줄 나눔은 끌 수 있고, 끄면 h1, h2 > a {처럼 한 줄에 이어 씁니다.
압축이 지우는 것과 일부러 남기는 것
압축은 같은 결과를 내는 범위에서만 글자를 줄입니다. 공백은 대부분 지워도 되지만, 어떤 공백은 그 자체가 문법이라서 지우면 다른 코드가 됩니다. 아래 표의 아래쪽 여섯 줄은 다른 압축 방식에서 자주 깨지는 곳이고, 이 도구는 그대로 둡니다.
| 대상 | 압축에서 | 이유 |
|---|---|---|
| 주석 | 지움(/*! 로 시작하는 주석은 기본으로 남김) | /*! 는 라이선스 표시를 남기는 관례이고, cssnano의 주석 정리도 기본으로 남깁니다 |
| 줄바꿈·들여쓰기, { } : ; , 양옆 공백 | 지움 | 토큰 사이를 나누는 데 필요하지 않은 공백 |
| 블록 끝 세미콜론 | 지움 | 마지막 선언 뒤의 ;는 있어도 없어도 같습니다 |
#FFFFFF·#AABBCCDD | #fff·#abcd | 두 자리씩 같은 HEX는 3·4자리 표기와 같은 색입니다(CSS Color 4 §5.2) |
calc(100% - 2rem)의 + − 양옆 공백 | 남김 | 더하기·빼기 양옆 공백은 필수입니다(Values 4 §10.8). 100%-2rem은 무효입니다 |
and (·not ( 사이 공백 | 남김 | 붙이면 and(가 함수로 읽힙니다(Media Queries 4 §3) |
.card :hover의 공백 | 남김 | 공백이 곧 하위 선택자 결합자라서, 지우면 .card:hover라는 다른 선택자가 됩니다(Selectors 4 §14.1) |
0px·0%의 단위 | 남김 | flex: 1 0px의 단위를 지우면 0이 줄어드는 비율로 읽히고(Flexbox §7.1), 키프레임의 0%는 %만 받습니다(Animations 1 §3) |
빈 규칙·빈 @layer 블록 | 남김 | 레이어 순서는 처음 선언된 순서라서(Cascade 5 §6.4.3) 빈 @layer base {}도 순서를 정합니다 |
사용자 속성 값·문자열·url() 안 | 공백 정리만, 글자 그대로 | 사용자 속성은 쓴 글자가 값이고, 문자열과 URL 안의 글자는 내용입니다 |
그래서 --brand: #C44A00 같은 사용자 속성 값은 압축 뒤에도 대문자 HEX 그대로 남고, 일반 속성의 color: #FFFFFF만 #fff가 됩니다. '바꾼 것' 목록은 지운 주석 수와 바이트, 지운 세미콜론 수, 줄인 색 수, 공백으로 줄어든 바이트를 따로 보여 줍니다.
얼마나 줄어드나: 압축률과 gzip 전송 크기
압축으로 줄어드는 바이트와 실제로 네트워크를 지나가는 바이트는 다릅니다. 대부분의 서버는 CSS를 gzip이나 brotli로 한 번 더 압축해서 보내고, 이런 압축은 반복되는 글자를 잘 줄이기 때문에 들여쓰기·줄바꿈처럼 같은 모양이 반복되는 공백은 이미 상당 부분 줄어들어 있습니다. 아래 표는 이 페이지의 예시와 공개 라이브러리 Bootstrap 5.3.8의 배포 파일을 이 도구로 압축하고, 브라우저(Chromium)의 gzip으로 전송 크기를 잰 값입니다.
| 파일 | 원본 | 압축 결과 | gzip 원본 → 압축 |
|---|---|---|---|
| 예시 '주석 달린 원본'(주석 6개) | 713 B | 466 B (−34.6%) | 521 B → 376 B (−27.8%) |
| 같은 예시, 주석 모두 지움 | 713 B | 414 B (−41.9%) | 521 B → 303 B (−41.8%) |
Bootstrap 5.3.8 bootstrap.css | 280,311 B | 232,759 B (−17.0%) | 33,326 B → 30,776 B (−7.7%) |
참고: 공식 bootstrap.min.css | 280,311 B | 232,111 B (−17.2%) | 33,326 B → 30,823 B (−7.5%) |
Bootstrap처럼 큰 파일에서는 압축으로 바이트가 17% 줄어도 gzip 전송 크기는 8%쯤 줄어듭니다. 공백이 gzip에서 이미 거의 사라지기 때문입니다. 작은 파일은 반대로 gzip 머리와 꼬리에 붙는 고정 18바이트(RFC 1952) 때문에 gzip 효과 자체가 작습니다. 그래도 압축은 브라우저가 읽고 해석할 글자 수를 줄이고, gzip을 쓰지 않는 환경에서는 그대로 전송량이 됩니다. Bootstrap의 공식 압축본은 선택자 순서를 바꾸거나 rgba(0,0,0,0)을 transparent로 바꾸는 식의 변환을 더 해서 바이트는 648 B 더 작지만, gzip 전송 크기는 이 도구의 결과가 47 B 더 작았습니다. 이 도구의 압축본을 브라우저에 읽혀 보면 @media 안의 규칙까지 2,660개 항목이 원본과 같게 해석되고, 다른 점은 var() 값의 쉼표 옆 공백뿐입니다.
표의 gzip 값은 브라우저 기본 설정으로 잰 값이라 서버의 압축 수준이나 brotli 사용 여부에 따라 조금 달라집니다. 용량 지도의 KB는 1 KB = 1,024 B로 계산합니다.
규칙이 통째로 사라지는 오류
CSS는 오류가 있어도 멈추지 않고 그 부분만 버린 채 계속 읽습니다. 덕분에 페이지가 깨지지는 않지만, 어디가 버려졌는지 알려 주지 않아서 원인을 찾기 어렵습니다. 아래 여섯 경우는 브라우저가 실제로 읽는 방식(CSS Syntax 3)을 따른 것이고, 이 도구는 같은 방식으로 읽은 뒤 '찾은 것'에 줄 번호와 함께 표시합니다.
| 오류 | 브라우저가 읽는 방식 | 이 도구에서 |
|---|---|---|
규칙 밖에 남는 } (.nav{…}}) | 남는 }를 다음 규칙의 선택자 앞에 붙여 } .logo라는 잘못된 선택자로 읽고, 그 규칙을 통째로 버립니다(§5.5.3) | 버려지는 선택자 이름을 알리고 결과에도 } .logo {로 보여 줍니다 |
닫히지 않은 ( (calc(100% - 20px;) | 짝이 되는 )가 나올 때까지 ;와 }까지 값 안에 넣어서 뒤의 규칙이 모두 사라집니다 | 여는 괄호의 줄을 알립니다 |
닫히지 않은 { | 파일 끝에서 닫힌 것으로 봅니다. 그 뒤에 다른 파일을 이어 붙이면 뒤 파일 전체가 그 규칙 안으로 들어갑니다 | 결과에는 }를 붙이고 여는 줄을 알립니다 |
| 줄 끝까지 닫히지 않은 따옴표 | 잘못된 문자열로 읽고 그 선언을 버립니다 | 따옴표가 열린 줄을 알립니다 |
닫히지 않은 주석 /* | 파일 끝까지 전부 주석이 됩니다 | 주석이 시작된 줄을 알립니다 |
콜론 없는 선언 (font-size 20px) | 그 선언만 버리고 다음 ; 뒤부터 다시 읽습니다(§5.5.6) | 주의로 표시합니다 |
오류는 아니지만 확인할 만한 것도 함께 보여 줍니다. 같은 규칙에 같은 속성이 두 번 있으면 뒤의 값만 적용됩니다. display: -webkit-box; display: flex;처럼 오래된 브라우저를 위한 대비일 수도 있어서 '참고'로만 표시합니다. 선언이 하나도 없는 빈 규칙도 참고로 알려 주지만, 압축에서 지우지는 않습니다.
중첩 CSS와 새 문법도 그대로 읽습니다
CSS 중첩은 규칙 안에 &:hover { … }나 @media를 바로 넣는 문법으로, 지금은 주요 브라우저가 모두 지원합니다. 이 도구는 블록 안에서 ;나 }보다 {가 먼저 나오면 규칙, 아니면 선언으로 읽는 명세의 방식대로 중첩을 구분하고, 정리할 때 한 단계씩 들여씁니다. 압축할 때는 선언 뒤에 중첩 규칙이 오면 사이의 ;를 남겨 둡니다.
| 기능 | Chrome | Firefox | Safari | 이 도구에서 |
|---|---|---|---|---|
| CSS 중첩(&) | 120 | 117 | 17.2 | 한 단계씩 들여쓰기, 압축 때 선언과 규칙 사이 ; 유지 |
@layer | 99 | 97 | 15.4 | 문장형·블록형 모두 순서 그대로, 빈 블록도 남김 |
| gzip 측정(CompressionStream) | 80 | 113 | 16.4 | 이보다 오래된 브라우저에서는 gzip 줄을 숨깁니다 |
버전은 MDN 브라우저 호환성 자료에서 2026-10-22에 확인한 첫 지원 버전입니다. 중첩은 위 버전부터 a { … }처럼 태그 이름으로 시작하는 중첩 규칙까지 지원하고, 그 앞의 Chrome 112~119와 Safari 16.5~17.1은 이 형태를 지원하지 않았습니다. @container, @supports, @scope, @property처럼 다른 @규칙도 같은 방식으로 읽습니다.
자주 틀리는 경우
- 압축본을 고쳐서 다시 압축하기: 압축본을 정리해서 고칠 수는 있지만, 지운 주석은 돌아오지 않습니다. 편집할 원본 파일은 따로 두고 배포할 때마다 원본에서 압축본을 만드세요.
- 속성을 알파벳 순서로 정렬하기:
margin-top: 8px; margin: 0;은 뒤의 margin: 0이 이겨서 위 여백이 0인데, 알파벳 순서로 정렬하면 margin이 앞으로 가고 margin-top: 8px가 이겨서 위 여백이 8px로 바뀝니다. 이 도구가 정렬 기능을 두지 않는 이유입니다. - /*! 라이선스 주석까지 지우기: MIT 라이선스처럼 저작권 고지를 사본에 남기라는 조건이 붙은 코드가 많습니다. 다른 사람이 만든 CSS를 압축할 때는 기본값(/*! 만 남김)을 유지하세요.
- 0px를 0으로 일괄 바꾸기:
flex: 1 0px, 키프레임의0%,calc(0px + 10%)처럼 단위가 필요한 곳이 있습니다. 찾아 바꾸기로 한꺼번에 바꾸지 마세요. - SCSS의 // 주석을 CSS에 남기기: CSS에는 // 주석이 없습니다.
// 버튼다음 줄의 규칙은 그 글자가 선택자 앞에 붙어서 버려집니다. 정리 결과에서 선택자 앞에 // 가 붙어 있으면 이 경우입니다. - 마지막 } 가 빠진 파일 이어 붙이기: 여러 CSS 파일을 하나로 합칠 때 앞 파일의 닫히지 않은 블록이 뒤 파일 전체를 삼킵니다. 합치기 전에 각 파일을 붙여 넣어 '찾은 것'이 비었는지 확인하세요.
한계와 주의
- 표준 CSS 문법으로 읽습니다. SCSS·Less의 $변수, @mixin·@include, // 주석, 연산식은 CSS로 해석되지 않으므로 Sass·Less 컴파일러나 Prettier로 정리하세요.
- 같은 선택자 합치기, 겹친 선언 지우기, margin-top 등을 margin 하나로 합치기, 공급업체 접두사 정리 같은 구조 최적화는 하지 않습니다. 이런 작업은 cssnano, Lightning CSS, esbuild 같은 빌드 도구가 맡습니다.
- 소스 맵을 만들지 않습니다. 파일 끝의
/*# sourceMappingURL=… */도 일반 주석이라 압축 기본값에서 지워지므로, 남겨야 하면 주석을 '모두 남김'으로 바꾸세요. - 문법 점검은 괄호·따옴표·주석·콜론 수준입니다.
colr: red같은 속성 이름 오타, 값의 단위 오류, 브라우저 지원 여부는 판정하지 않습니다. - 5 MB까지 열 수 있고, 결과가 30만 자를 넘으면 속도를 위해 색 입히기를 생략하고 글자만 보여 줍니다.
- gzip 크기는 브라우저 기본 압축으로 잰 값이며 서버 설정과 다를 수 있습니다.
기준일 W3C CSS 명세(Syntax 3·Values 4·Media Queries 4·Color 4·Flexbox 1·Cascade 5·Nesting 1)와 MDN 브라우저 호환성 자료는 2026-10-22에 원문으로 확인했습니다. 크기 표는 같은 날 Chromium의 CompressionStream으로 잰 값이고, Bootstrap은 5.3.8 배포 파일 기준입니다.
출처
- 01W3C: CSS Syntax Module Level 3CRD 2026-10-01. §4.3.2 주석, §4.3.5 문자열, §5.5.3 최상위의 남는 }, §5.5.5 블록 안 선언과 규칙 구분, §5.5.6 콜론 없는 선언
- 02W3C: CSS Values and Units Module Level 4WD 2024-03-12. §10.8 calc()의 + − 양옆 공백 필수, * / 는 공백 없이 가능
- 03W3C: Media Queries Level 4CRD 2026-02-19. §3 and·not·or 와 ( 사이 공백이 없으면 함수 토큰
- 04W3C: CSS Color Module Level 4CRD 2026-10-20. §5.2 3·4·6·8자리 HEX 표기
- 05W3C: CSS Flexible Box Layout Module Level 1CRD 2025-10-14. §7.1 flex 단축 속성의 단위 없는 0
- 06W3C: CSS Cascading and Inheritance Level 5CR 2022-01-13. §6.4.3 레이어는 처음 선언된 순서로 정렬
- 07W3C: CSS Nesting Module Level 1WD 2026-01-22. 중첩 규칙과 & 선택자
- 08MDN: 브라우저 호환성 자료2026-10-22 조회. 중첩 Chrome 120·Firefox 117·Safari 17.2, @layer 99·97·15.4, CompressionStream gzip 80·113·16.4
- 09cssnano: discardComments! 가 붙은 특별 주석(/*! … */)은 기본으로 남김
- 10IETF RFC 1952: GZIP file format머리 10바이트 + 꼬리(CRC32·ISIZE) 8바이트
- 11Bootstrap 5.3 배포 파일5.3.8 dist/css/bootstrap.css·bootstrap.min.css(MIT), 2026-10-22 받아 크기 측정
자주 묻는 질문
CSS 정리와 CSS 압축은 무엇이 다른가요?
정리(포맷, beautify)는 사람이 읽기 좋게 선언을 한 줄에 하나씩 펼치고 들여쓰기를 맞추는 일이고, 압축(minify)은 브라우저가 읽는 뜻은 그대로 두고 주석·공백·줄바꿈처럼 필요 없는 글자를 지워 파일을 작게 만드는 일입니다. 두 결과는 같은 스타일을 적용하므로, 편집할 원본은 정리된 상태로 두고 배포할 사본만 압축하는 흐름이 안전합니다.
압축하면 CSS가 깨질 수 있나요?
공백을 기계적으로 모두 지우는 압축기는 깨뜨릴 수 있습니다. calc(100% - 2rem)의 빼기 양옆 공백을 지우면 값이 무효가 되고, .card :hover의 공백을 지우면 다른 선택자가 됩니다. 이 도구는 CSS 명세의 토큰 단위로 읽어 이런 공백과 0px·0%의 단위, 문자열·url() 안은 그대로 둡니다. 그래도 원본이 이미 깨져 있으면 결과도 같은 식으로 깨지므로 '찾은 것'의 오류부터 고치세요.
압축할 때 주석은 모두 지워지나요?
기본값은 /*! 로 시작하는 주석만 남기고 나머지를 지웁니다. /*! 는 라이선스나 저작권 표시를 남기려고 쓰는 관례이고 cssnano 같은 압축 도구도 기본으로 남깁니다. 모두 지우거나 모두 남기도록 바꿀 수 있습니다.
0px를 0으로 바꾸지 않는 이유는 무엇인가요?
대부분은 같지만 뜻이 바뀌는 곳이 있기 때문입니다. flex: 1 0px의 0px를 0으로 바꾸면 두 번째 숫자가 줄어드는 비율로 읽히고, @keyframes의 0%는 0으로 쓰면 무효이며, calc(0px + 10%)는 0이 되면 계산이 성립하지 않습니다. 얻는 크기는 한 곳에 2~3바이트이고 gzip을 거치면 차이가 더 작아서 지키는 쪽을 골랐습니다.
속성을 알파벳 순서로 정렬해 주나요?
하지 않습니다. CSS는 같은 우선순위면 뒤에 쓴 선언이 이깁니다. margin-top: 8px 뒤에 margin: 0을 쓴 규칙은 위 여백이 0인데, 알파벳 순서로 정렬하면 margin이 앞으로 가서 margin-top: 8px가 이기고 위 여백이 8px로 바뀝니다. 순서는 원본 그대로 두고, 같은 속성이 두 번 나온 곳만 '찾은 것'에 알려 줍니다.
남는 } 하나가 왜 문제인가요?
규칙 밖에서 남는 }는 브라우저가 무시하지 않고 다음 규칙의 선택자 앞에 붙여 읽습니다. 그러면 '} .logo' 같은 잘못된 선택자가 되어 그 다음 규칙 하나가 통째로 버려집니다. 화면이 일부만 이상한데 원인을 찾기 어려운 대표적인 경우라서, 이 도구는 그 줄과 버려지는 선택자를 함께 보여 줍니다.
SCSS나 Less도 정리할 수 있나요?
표준 CSS 문법으로 읽으므로 중첩(&)이나 @media 안 선언처럼 CSS에도 있는 문법은 정리됩니다. 하지만 // 한 줄 주석, $변수, @mixin·@include, 계산식처럼 SCSS·Less에만 있는 문법은 CSS로 해석되지 않아 결과가 어긋날 수 있습니다. 그런 파일은 Sass·Less 컴파일러나 Prettier로 정리하세요.
입력한 CSS가 어딘가에 저장되거나 전송되나요?
아니요. 정리·압축·용량 계산·gzip 측정이 모두 이 브라우저 안에서 이뤄지고, 서버로 보내거나 저장하지 않습니다. 페이지를 닫으면 입력한 내용도 사라지므로 필요한 결과는 복사하거나 파일로 저장해 두세요.