CSS 압축 및 정리 – 무료 온라인 도구
브라우저에서 바로 CSS를 압축하거나 보기 좋게 정리하세요. 주석과 공백을 제거해 파일 크기를 줄입니다.
🔒 파일이 브라우저 밖으로 나가지 않습니다. 모든 처리는 로컬에서 이루어집니다.
CSS를 온라인으로 압축하는 방법
- 1
CSS 붙여넣기
입력 상자에 CSS 코드를 붙여넣거나 직접 입력하세요.
- 2
압축 또는 정리 선택
「CSS 압축」을 누르면 코드가 압축되고, 「CSS 정리」를 누르면 일관된 들여쓰기로 포맷됩니다.
- 3
결과 복사
결과가 오른쪽에 표시됩니다. 「복사」를 누르면 클립보드에 복사됩니다.
CSS는 렌더링을 차단합니다. head에 있는 모든 스타일시트를 내려받고 분석하기 전까지 브라우저는 아무것도 그릴 수 없습니다. 그래서 몇 KB 차이만으로도 특히 모바일 환경에서 First Contentful Paint가 늦어질 수 있습니다. CSS 압축은 가장 저렴한 최적화로, 빌드 파이프라인도 코드 수정도 필요 없이 똑같이 보이는 더 작은 파일을 얻을 수 있습니다.
제거되는 것은 주석, 들여쓰기, 줄바꿈, 중괄호와 콜론 주변의 공백, 그리고 닫는 중괄호 앞의 마지막 세미콜론입니다. 선택자, 속성 이름, 값은 전혀 건드리지 않으므로 압축된 CSS는 원본과 똑같이 동작합니다. 「정리」는 그 반대로, 배포용 스타일시트를 일관된 들여쓰기의 읽기 쉬운 규칙으로 되돌려 줍니다.
스타일시트가 공백이 아니라 사용하지 않는 규칙 때문에 크다면 압축만으로는 효과가 크지 않습니다. 먼저 빌드 단계에서 사용하지 않는 선택자를 제거하세요. 나머지 리소스에는 JS 압축 도구와 HTML 압축 도구가 같은 방식을 스크립트와 마크업에 적용합니다.