CSS 미니파이어

신규

주석 및 불필요한 공백 제거로 CSS 축소.

Mode

Level

Comments

Drag & drop a .css file, or click to browse

—Original

—Minified

— Saved

—Gzipped

Input

Output

Runs entirely in your browser. Nothing is uploaded.

한 곳에서 CSS를 압축하고 최적화하세요

이 CSS 압축 도구는 브라우저가 필요로 하지 않는 모든 문자——주석, 공백, 줄바꿈, 각 규칙 끝의 불필요한 세미콜론——를 제거해 스타일시트 크기를 줄입니다. 발행하는 파일의 바이트 수는 줄어들지만 렌더링 결과는 동일합니다. 코드를 붙여넣거나 .css 파일을 드롭하면 절약된 정확한 바이트 수와 백분율과 함께 압축 결과가 즉시 표시됩니다.

동시에 CSS 컴프레서이자 CSS 정리 도구이기도 합니다. 하나의 토글로 압축과 역압축을 전환할 수 있어, 스타일시트를 압축하는 동일한 도구로 들여쓰기된 읽기 쉬운 코드로 복원할 수도 있습니다.

제거되는 것——절대 건드리지 않는 것

CSS를 최소화할 때 도구는 주석을 제거하고, 모든 공백을 축소하고, { } : ; , > + 같은 기호 주변의 공백을 제거하며, 각 닫는 중괄호 전의 마지막 세미콜론을 삭제합니다. 적극적 모드를 켜면 선행 0도 제거합니다(0.5em → .5em). 0 길이 값의 단위도 제거됩니다(0px → 0).

중요한 것은 이 과정이 무손실이라는 점입니다. 따옴표로 묶인 문자열, url() 값, calc() 표현식은 어떤 것도 제거하기 전에 보호됩니다. 따라서 calc(100% - 2rem) 같은 값은 필요한 공백을 유지하고 배경 이미지 경로가 손상되지 않습니다. 많은 빠른 온라인 압축 도구들이 calc()를 잘못 처리하지만, 이 도구는 그렇지 않습니다.

압축 또는 정리——진정한 양방향 도구

한 줄로 압축된 스타일시트를 읽어야 하나요? 정리 모드로 전환해 CSS를 역압축하세요. 도구가 코드를 재들여쓰기하고, 각 선언을 별도의 줄에 배치하고, 각 콜론 뒤에 공백을 추가하며, 선택자 목록을 깔끔하게 정렬합니다. 프로젝트 스타일에 맞게 2칸, 4칸, 또는 탭 들여쓰기를 선택할 수 있습니다.

압축과 정리는 가역적이므로, 프로덕션의 압축된 CSS를 붙여넣어 읽고 수정한 다음 다시 압축할 수 있습니다——페이지를 떠나지 않고 모두 가능합니다.

cssminifier.com, CleanCSS, cssnano와의 비교

cssminifier.com은 가장 많이 사용되는 온라인 옵션이지만 코드를 서버에 업로드합니다. 독점 스타일시트——클라이언트 프로젝트, 미발표 디자인, 내부 도구——의 경우 이는 실제 위험입니다. CleanCSS와 cssnano는 Node.js 라이브러리로 자동화 파이프라인에 훌륭하지만 로컬 설치 없이는 사용할 수 없습니다. freeformatter.com의 CSS 압축 도구와 TopTal의 CSS 압축 도구도 서버 측입니다.

이 도구는 JavaScript로 모든 것을 로컬에서 처리합니다——아무것도 업로드되지 않습니다. 가장 일반적인 압축 최적화(공백, 주석, 세미콜론, 0 단위, 선행 0)를 포함하고 같은 단계에서 gzip 추정치를 표시합니다. 계정 불필요, 업로드 불필요, 설치 불필요——iPhone, Android, Mac, Windows, Linux에서 작동합니다.

절약된 바이트 확인——gzip 포함

눈에 띄는 통계 바에서 원본 크기, 출력 크기, 절약된 바이트 수와 백분율을 볼 수 있어 CSS가 얼마나 작아졌는지 항상 정확히 알 수 있습니다. 크기는 문자 수가 아닌 실제 UTF-8 바이트로 측정되므로 서버가 실제로 제공하는 것과 일치합니다.

브라우저에서 로컬로 계산된 gzip 압축 후 크기도 표시합니다. 압축과 gzip은 함께 작동합니다——먼저 소스를 압축한 다음 호스트가 gzip 압축하게 합니다——두 숫자를 함께 보면 결합된 절약 효과가 명확합니다.

100% 비공개——아무것도 브라우저 밖으로 나가지 않습니다

모든 압축과 정리는 JavaScript를 사용해 브라우저에서 로컬로 실행됩니다. CSS는 업로드되거나, 기록되거나, 저장되지 않아 독점적이거나 미발표된 또는 클라이언트 스타일시트를 안전하게 압축할 수 있습니다. 회원가입이 필요 없으며 기기 메모리 이외의 제한도 없습니다. 오프라인에서도 작동합니다——페이지가 로드되면 인터넷 연결을 끊어도 압축 도구는 계속 작동합니다. 이 온라인 CSS 압축 도구를 북마크에 추가하고 CSS를 압축하거나, 파일을 축소하거나, 압축된 스타일시트를 읽어야 할 때마다 사용하세요.

Frequently asked questions

CSS 최소화란 무엇인가요?

CSS 최소화는 스타일이 하는 일을 변경하지 않고 브라우저가 필요로 하지 않는 모든 문자——공백, 탭, 줄바꿈, 주석, 각 블록의 마지막 세미콜론——를 제거합니다. 예를 들어, '.btn {\n color: #ffffff;\n margin: 0px;\n}'(약 48바이트)는 '.btn{color:#ffffff;margin:0}'(28바이트)로 최소화됩니다. 렌더링 결과는 동일합니다. 최소화는 웹 성능 워크플로우의 표준 단계로, 더 작은 파일은 더 빨리 다운로드되고 파싱됩니다.

왜 CSS를 최소화해야 하나요?

더 작은 스타일시트는 네트워크를 통해 더 적은 바이트를 의미하며, 더 빠른 다운로드, 더 빠른 First Contentful Paint, 더 나은 Core Web Vitals로 이어집니다——특히 모바일 연결에서. 손으로 작성된 60 KB 스타일시트는 최소화 후 약 45 KB로 줄어들고, 서버가 gzip 압축하면 훨씬 더 작아집니다. 이 도구는 일회성 스타일시트, WordPress 테마 CSS, HTML 이메일 스타일, 또는 일반 빌드 파이프라인 밖의 모든 것에 유용합니다.

최소화 중에 무엇이 제거되나요?

공백(스페이스, 탭, 줄바꿈), 주석, 각 닫는 중괄호 전의 마지막 세미콜론, { } : ; , > + 같은 기호 주변의 공백이 제거됩니다. 적극적 모드에서는 선행 0('0.5em'이 '.5em'이 됨)과 0 값의 단위('0px'가 '0'이 됨)도 제거됩니다. 문자열, url() 값, calc() 표현식은 절대 건드리지 않아 콘텐츠와 동적 값이 올바르게 유지됩니다.

최소화된 CSS는 얼마나 작아지나요?

원시 텍스트로서 최소화는 일반적으로 10~30%를 절약합니다. 서버의 gzip 또는 Brotli와 결합하면 총 감소량은 보통 70~80%입니다. 예시: 100 KB 스타일시트는 최소화 후 약 75 KB가 되고, gzip 후 약 18 KB가 됩니다——방문자는 원본의 일부만 다운로드합니다. 이 도구는 최소화된 크기, gzip 추정치, 정확한 절약된 바이트 수를 나란히 표시합니다.

CSS를 온라인으로 최소화하는 것이 안전한가요?

이 도구로는 안전합니다——JavaScript를 사용해 100% 브라우저에서 실행되기 때문입니다. CSS는 서버로 전송되거나, 기록되거나, 저장되지 않아 독점적이거나 클라이언트 스타일시트도 완전히 기기에 남아 있습니다. 네트워크를 끊고 최소화해보면 확인할 수 있습니다: 여전히 작동합니다. 반면 cssminifier.com과 freeformatter.com의 CSS 압축 도구는 코드를 서버에 업로드하며, 이는 실제 개인 정보 보호 문제입니다.

최소화 시 라이선스 주석(/*! */)을 유지할 수 있나요?

네. '/*! */ 라이선스 주석 보존' 옵션을 켜두면 /*!로 시작하는 주석——번들러와 라이브러리가 라이선스 배너에 사용하는 관례——은 최소화 후에도 남아있고, 일반 /* */ 주석은 제거됩니다. 모든 주석을 유지하려면 '모든 주석 유지'를 켜세요. 이는 최소화된 파일에 라이선스가 남아있어야 하는 오픈소스 라이브러리 배포에 중요합니다.

.css 파일을 최소화할 수 있나요, 아니면 붙여넣은 코드만 가능한가요?

둘 다 가능합니다. 입력 상자에 CSS를 붙여넣거나, .css 파일을 드롭 존에 드래그 앤 드롭(또는 클릭해 파일 찾기)하세요. 최소화된 결과는 클릭 한 번으로 복사하거나 style.min.css로 다운로드할 수 있습니다. 정리된 출력은 style.css로 다운로드됩니다. 드래그 앤 드롭은 데스크톱 브라우저에서 작동합니다. 모바일(iPhone, Android)에서는 파일 앱에서 업로드하기 위해 파일 선택기를 사용하세요.

10진수, 16진수, 8진수, 2진수로 검색 가능한 문자 코드 표.

개발자