⚙

CSS 압축

주석, 공백 및 중복 코드를 제거하여 CSS를 압축합니다. 정확한 바이트 절감량과 압축률을 표시합니다. 모든 처리는 브라우저에서 실행됩니다 — 서버 없음, 추적 없음.

개발자 도구 로컬에서 실행 데이터 전송 없음
CSS 압축 압축 최적화 클라이언트 측 전용
옵션:
CSS 입력
0바이트
→
압축된 CSS
0바이트
💡
CSS Minifier removes comments and unnecessary whitespace to reduce file size without changing functionality. Use the CSS 포매터 편집을 위해 압축된 CSS를 보기 좋게 정리하려면 도구를 사용하세요. 일반적인 압축률: 20-40% 더 작습니다.

CSS 압축이란 무엇인가요?

CSS 코드를 즉시 압축하고 최소화하세요. 주석, 공백, 중복 코드를 제거하여 프로덕션용 파일 크기를 줄입니다. 무료, 브라우저 기반, 데이터 전송 없음.

CSS 압축 사용 방법

  1. CSS를 입력 패널에 붙여넣으세요.
  2. 압축 도구를 실행하여 공백과 기타 불필요한 문자를 제거하세요.
  3. 스타일시트가 여전히 올바르게 보이는지 확인하려면 압축된 출력을 검토하세요.
  4. 배포 또는 임베딩을 위해 압축된 CSS를 복사하거나 다운로드하세요.

관련 도구

📝
CSS 포매터
사용자 지정 가능한 서식으로 CSS 코드를 보기 좋게 만들거나 압축하세요
 ⚙
JS 압축
Terser를 사용하여 JavaScript를 압축하세요 - 맹글링 및 최소화
 📄
HTML 포맷터
사용자 지정 가능한 들여쓰기로 HTML을 보기 좋게 정리하거나 압축하세요
CSS 압축 이해하기 ▾
예시
입력 \n.btn {\n color: red;\n padding: 8px 16px;\n}
출력 .btn{color:red;padding:8px 16px}
일반적인 사용 사례
  • 배포 전 스타일시트 크기 줄이기
  • 임베드 또는 스니펫용 CSS 압축
  • 디버깅 중 서식화된 출력과 압축된 출력 비교
  • 정적 사이트 또는 이메일용으로 더 작은 스타일 페이로드 준비
자주 묻는 질문
CSS를 압축하면 스타일이 깨질까요?

No. The minifier only removes characters that have no effect on CSS parsing -whitespace and comments. The minified output is functionally identical to the original.

원본 형식의 CSS를 보관해야 하나요?

예. 사람이 읽을 수 있는 소스 파일은 항상 저장소에 보관하고, 배포 시에는 축소된 버전만 사용하세요. 브라우저 DevTools에서 축소된 CSS를 디버깅해야 한다면 소스 맵을 사용하세요.

파일 크기가 얼마나 줄어들까요?

일반적으로 원본 파일에 포함된 공백과 주석의 양에 따라 20%에서 50%까지 절감됩니다. 서버 수준의 gzip 압축으로 추가 절감이 가능합니다.

축소기가 CSS 사용자 지정 속성(변수)을 지원하나요?

예. CSS 사용자 지정 속성(--my-var: value)은 축소 중에도 작성된 그대로 유지됩니다.