이 도구 소개

주석과 필요 없는 공백을 걷어 내 전송되는 CSS 용량을 줄입니다. 빠른 확인에 알맞은 도구이며, 실제 배포 빌드에서는 보통 번들러가 압축을 담당합니다.

사용 방법

읽기 좋은 CSS를 붙여 넣고 압축을 실행해 전후 바이트 수를 비교해 보세요. 배포 산출물은 계속 빌드 파이프라인에서 만드는 것이 좋습니다.

예시에는 압축하면 사라지는 주석이 한 줄 들어 있습니다.

입력

.hero {
  /* homepage band */
  padding: 4rem 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
}

출력

.hero{padding:4rem 1.5rem;background:#0f172a;color:#e2e8f0}

압축된 파일만 남기지 말고, 서식이 정리된 원본을 저장소에 함께 보관하세요.

CSS가 얼마나 작아지나요?

원본의 공백과 주석 양에 따라 다릅니다. 주석과 들여쓰기가 많은 CSS일수록 많이 줄어듭니다. 이 도구는 공백과 주석만 제거하며, 빌드 단계의 minifier는 규칙 병합과 단축도 할 수 있으니 실제 배포에는 그쪽을 쓰세요.

압축하면 스타일이 깨질 수 있나요?

“nav :first-child” 같은 하위 선택자의 공백은 제거하면 의미가 바뀌므로 유지합니다. 주석은 라이선스 배너를 포함해 삭제됩니다.