똑딱

CSS 압축기

CSS에서 주석과 불필요한 공백을 제거해 파일 크기를 줄입니다. 문자열 값은 보존합니다.

업데이트: 2026-09-07

입력
결과

도구 가이드

CSS 파일에 들어 있는 주석과 들여쓰기, 줄바꿈은 사람이 읽기 위한 것이고 브라우저에는 필요 없습니다. 이런 문자를 제거하면 파일 크기가 줄어 페이지가 더 빨리 로드됩니다.

특히 모바일 환경에서는 파일 하나가 몇 KB만 줄어도 체감 속도에 영향을 줍니다. 웹사이트 속도는 검색 순위에도 반영되므로 배포 전 압축은 기본 작업에 속합니다.

이 도구는 주석과 불필요한 공백을 제거하되 문자열 안의 값은 그대로 보존합니다. 압축된 결과는 그대로 배포용 파일로 쓸 수 있습니다.

사용 방법

  1. 압축할 CSS 코드를 붙여넣습니다.
  2. 압축된 결과와 줄어든 크기를 확인합니다.
  3. 결과를 복사해 배포용 파일로 저장합니다.
  4. 원본은 수정용으로 따로 보관합니다.

이럴 때 유용해요

  • 웹사이트 배포 전 스타일시트 크기를 줄일 때
  • 인라인 스타일로 넣을 CSS를 한 줄로 만들 때
  • 이메일 템플릿의 스타일을 압축할 때
  • 빌드 도구 없이 간단히 최적화하고 싶을 때

사용 팁

  • 압축본은 수정하기 어렵습니다. 원본 파일을 반드시 따로 보관하세요.
  • 주석에 라이선스 표기가 있으면 함께 지워집니다. 필요한 경우 결과 상단에 다시 넣으세요.
  • 서버에서 gzip 압축을 켜면 추가로 크게 줄어듭니다. 두 방법을 함께 쓰는 것이 효과적입니다.

자주 묻는 질문

압축하면 동작이 달라지나요?

달라지지 않습니다. 브라우저가 해석하는 내용은 동일하고 공백과 주석만 제거됩니다.

문자열 안의 공백도 지워지나요?

지워지지 않습니다. 따옴표 안의 값은 그대로 보존됩니다.

다시 원래대로 되돌릴 수 있나요?

포맷은 복원할 수 있지만 주석은 되살릴 수 없습니다. 원본을 보관하세요.

얼마나 줄어드나요?

주석과 들여쓰기가 많은 파일일수록 크게 줄며 보통 20~40% 정도입니다.

gzip과 무엇이 다른가요?

압축은 파일 내용을 줄이고 gzip은 전송 시 인코딩합니다. 함께 쓰면 효과가 큽니다.

관련 도구