CSS 포맷터 & 압축기
읽기 좋게 CSS 정리 또는 배포용 압축
로컬 실행
loading…
이 도구에 대해
압축됐거나 복사해 붙인 CSS를 선언 하나에 한 줄인 규칙으로 펼치거나, 스타일시트를 프로덕션용으로 짜냅니다. 정리기는 들여쓰기와 중괄호 배치를 정규화하고, 압축기는 주석을 제거하고 공백을 접고 마지막 세미콜론을 버리되 문자열, url(...) 내용, calc() 표현식은 건드리지 않습니다.
이 압축기는 하지 않는 일에 대해 투명합니다. 선택자 이름을 바꾸지 않고, 중복 규칙을 병합하지 않고, 색상을 다시 쓰지 않습니다. 그래서 출력이 예측 가능하고, 핵과 벤더 프리픽스가 있는 것을 포함해 어떤 스타일시트에도 안전합니다 — 붙여넣고, 압축하고, 배포하세요.
여기의 모든 도구가 그렇듯 처리는 로컬입니다. 미공개 디자인 시스템 코드는 브라우저 안에 머뭅니다.
자주 묻는 질문
- 압축하면 CSS가 얼마나 작아지나요?
- 손으로 쓴 CSS라면 보통 15–30%로, 대부분 들여쓰기와 주석 몫입니다. 서버의 gzip이 같은 중복을 상당 부분 제거하므로 실제 전송 크기 차이는 바이트 수가 시사하는 것보다 작습니다 — 그래도 압축하세요. 파싱 시간도 줄어듭니다.
- calc(), 커스텀 프로퍼티, 미디어 쿼리에 안전한가요?
- 네. calc() 안의 공백은 의미가 있어 보존됩니다. 커스텀 프로퍼티와 그 var() 참조는 평범한 선언이라 그대로 살아남고, @media를 비롯한 at-규칙은 구조를 유지합니다.
- 왜 자손 선택자의 공백은 유지됐나요?
- "nav a"와 "nava"는 서로 다른 것을 선택하기 때문입니다 — 그 공백은 서식이 아니라 결합자입니다. 압축기는 문법적 의미가 없는 공백만 제거합니다.
- LESS/SCSS와 CSS 사이를 변환할 수 있나요?
- 아니요 — 전처리기 문법에는 포매팅이 아니라 컴파일이 필요합니다. CSS로도 유효한 평범한 SCSS는 잘 포맷되지만, 중첩 규칙과 믹스인은 안 됩니다.