CSS 압축/포맷 - 온라인에서 CSS 압축 및 포맷

CSS 압축기·포맷터 사용법

1. 1

   CSS 붙여넣기

   스타일시트 코드를 입력란에 붙여넣으세요. 규칙 한 줄부터 전체 .css 파일까지 모두 처리할 수 있습니다.

2. 2

   압축 또는 포맷 선택

   압축을 누르면 한 줄짜리 최소 용량 CSS로 만들고, 포맷을 누르면 압축된 CSS를 다시 들여쓰기된 읽기 좋은 코드로 되돌립니다.

3. 3

   결과 확인

   변환된 결과를 확인하세요. 문법 오류가 있는 CSS는 따로 표시되므로 복사 전에 바로잡을 수 있습니다.

4. 4

   결과 복사

   복사 버튼으로 압축·포맷된 CSS를 가져와 프로젝트에 붙여넣고, 지우기로 새로 시작하세요.

참고 자료

• MDN — CSS

  CSS 문법과 속성, 값을 정리한 Mozilla 공식 문서입니다. 압축·포맷 후 규칙이 올바른지 확인할 때 유용합니다.

• W3C — CSS Snapshot

  유효한 스타일시트 문법을 정의하는 CSS 명세를 한눈에 보여 주는 W3C 공식 개요 문서입니다.

관련 도구

자주 묻는 질문

CSS 압축기는 무슨 일을 하나요?

브라우저가 스타일을 그리는 데 필요 없는 요소, 즉 주석·줄바꿈·여분의 공백·불필요한 문자를 모두 제거합니다. 스타일 동작은 그대로 두면서 파일만 작아져 다운로드가 빨라지고 페이지 로딩 시간이 개선됩니다.

압축된 CSS를 다시 원래대로 되돌리려면 어떻게 하나요?

압축된 CSS를 입력란에 붙여넣고 포맷 버튼을 누르세요. 규칙마다 들여쓰기와 줄바꿈이 다시 적용되어, 한 줄로 뭉친 CSS가 수정·디버깅·코드 리뷰하기 좋은 형태로 되돌아갑니다.

CSS를 압축하면 화면에 보이는 스타일이 바뀌나요?

아니요. 압축은 브라우저가 무시하는 주석과 공백 같은 문자만 제거합니다. 선택자·속성·값은 그대로 유지되므로, 파일만 작아질 뿐 렌더링되는 모습은 완전히 동일합니다.

제 CSS가 서버에 업로드되나요?

아니요. 압축과 포맷은 전부 브라우저 안의 클라이언트 코드로 처리됩니다. 스타일시트가 기기 밖으로 나가지 않으므로 사내 코드나 민감한 CSS도 안전하게 다룰 수 있습니다.

CSS 파일 용량은 얼마나 줄어드나요?

원본에 공백과 주석이 얼마나 많은지에 따라 달라집니다. 주석이 많거나 여유 있게 정리된 스타일시트는 보통 20~50% 정도 줄어들며, 서버에서 gzip이나 Brotli 압축까지 적용하면 절감 폭은 더 커집니다.

압축한 CSS를 빌드 과정에 자동으로 넣을 수 있나요?

이 도구는 빠른 일회성 압축에 적합합니다. 실제 서비스라면 Vite, webpack, esbuild 같은 번들러나 cssnano를 빌드 파이프라인에 연결해 배포할 때마다 CSS가 자동으로 압축되도록 설정하는 것이 좋습니다. 이 도구는 그 결과를 빠르게 점검하거나 한 파일만 손볼 때 쓰세요.

압축해도 한글 주석이나 콘텐츠가 깨지지 않나요?

깨지지 않습니다. 압축기는 문자 인코딩을 바꾸지 않고 불필요한 공백과 주석만 제거하므로, content 속성에 넣은 한글 등 UTF-8 문자는 그대로 유지됩니다. 다만 압축 시 주석 자체가 사라지니, 남겨야 할 한글 설명은 따로 보관해 두세요.