메인으로 돌아가기

CSS 압축기

CSS를 붙여 넣으면 불필요한 공백과 주석을 줄이고, 색상 축약과 0 단위 정리까지 적용해 더 작은 스타일시트로 만듭니다.

코딩 결과 확인 중
오류 문의하기

코딩브라우저 처리

압축 요약

작은 CSS 파일은 렌더링 시작과 캐시 효율에 도움이 됩니다. 운영 배포 전에는 실제 브라우저에서 레이아웃을 확인하세요.

CSS 구조 점검

CSS 구조 문제 없음

원본 크기

310 B

압축 크기

227 B

절감 용량

83 B

절감률

26.8%

gzip 예상

73 B

규칙 수

2

선언 수

10

제거 주석

1

원본 CSS

압축할 CSS를 붙여 넣으세요. 일반 CSS 파일, media query, CSS 변수 모두 사용할 수 있습니다.

압축 결과

압축된 CSS를 검토한 뒤 복사하거나 .min.css 파일로 다운로드하세요.

. product-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px;border:1px solid #eee;border-radius:12px;background:#fff;color:#1f2937}.product-card:hover{border-color:#fc0;transform:translateY(-2px)}

배포 전 체크

  • 라이선스 고지가 필요한 CSS라면 보존 옵션을 켜세요.
  • SCSS, Less, CSS-in-JS 원본은 빌드 후 CSS 결과를 압축하세요.
  • 압축 후 핵심 화면의 hover, media query, calc() 표현식을 확인하세요.

간단 압축기 안내

이 도구는 빠른 용량 절감과 검토용입니다. 공급업체 CSS, 복잡한 postcss 플러그인 결과물은 프로젝트 빌드 파이프라인도 함께 사용하세요.

CSS 압축 결과를 확인하는 방법

이 도구는 브라우저에서만 실행되며 코드를 서버로 보내지 않습니다. 문자열과 calc() 같은 표현식은 최대한 보존하면서 주석, 줄바꿈, 불필요한 공백을 줄입니다.

사용 메모

  • 일반 주석을 제거하고, 옵션에 따라 /*! ... */ 라이선스 주석은 보존합니다.
  • 중괄호, 콜론, 세미콜론, 쉼표 주변 공백을 줄입니다.
  • 절감률 = (원본 크기 - 압축 크기) / 원본 크기 x 100

자주 묻는 질문

CSS가 서버로 전송되나요?expand_more

아니요. 입력한 CSS는 브라우저 안에서만 처리됩니다.

SCSS도 압축할 수 있나요?expand_more

일반 CSS 기준입니다. SCSS 변수, 중첩 문법은 프로젝트 빌드 도구에서 처리한 뒤 압축하는 것이 안전합니다.

라이선스 주석은 보존되나요?expand_more

보존 옵션을 켜면 /*! 로 시작하는 주석을 남깁니다.

계속 둘러보기

다음에 살펴보기 좋은 도구

같은 카테고리의 도구와 인기 도구를 한 곳에서 바로 탐색해보세요.

전체 도구 보기 arrow_forward