개발

CSS 미니파이어·포매터

CSS 코드를 압축(minify)하거나 보기 좋게 정렬(beautify)합니다. 색상 단축·0 단위 제거 등 부가 옵션으로 파일 크기를 더 줄입니다.

입력

출력

사용 방법

왼쪽 입력창에 CSS 코드를 붙여넣습니다.
상단에서 Minify(압축) 또는 Beautify(정렬) 모드를 선택합니다.
Minify 모드에서는 색상 단축, 0 단위 제거 등을 추가로 켜서 더 줄일 수 있습니다.
Beautify 모드에서는 들여쓰기 단위(탭/2칸/4칸)와 줄 분리 방식을 선택합니다.
우측 상단에 표시되는 크기 변화·압축률을 확인하고 결과를 복사합니다.

주요 기능

•Minify · Beautify 두 모드 즉시 변환
•/*! 라이선스 주석 보존 옵션
•0 단위 제거(0px → 0), 색상 단축(#ffffff → #fff)
•들여쓰기 탭/2칸/4칸, 셀렉터 콤마 줄바꿈
•입력·출력 크기 + 압축률 즉시 표시
•브라우저에서만 처리 — 서버 전송 없음

CSS 미니파이어·포매터 자세히 알아보기

CSS 미니파이어는 빌드 도구 없이도 CSS 파일 크기를 빠르게 줄여주는 도구입니다. 이메일 HTML 템플릿에 인라인으로 넣을 스타일, 단일 페이지 정적 사이트, 워드프레스 "추가 CSS" 박스, 코드펜 데모처럼 번들러를 거치지 않는 CSS를 그대로 압축할 때 유용합니다. 주석·공백 제거 외에도 0 단위 생략(0px → 0)과 색상 단축(#ffffff → #fff)을 켜면 추가로 5~15% 가량을 더 줄일 수 있습니다. 본 도구는 정규식과 토큰화 기반의 단순 파서를 사용하므로 일반적인 셀렉터·미디어 쿼리·@keyframes를 안전하게 처리합니다. 다만 CSS 변수의 복잡한 표현식이나 일부 특수 문법은 그대로 보존하고 변형은 시도하지 않습니다. 정상 CSS라면 의미는 그대로 유지되며, 라이선스 주석(/*! ... */)은 옵션으로 보존할 수 있습니다.

이럴 때 사용하세요

•이메일 HTML 템플릿에 인라인으로 들어갈 스타일을 짧게 압축
•단일 파일 정적 페이지의 첫 화면 로딩 속도 최적화
•워드프레스 "추가 CSS" 박스에 넣기 전에 줄바꿈 제거
•빌드 도구가 없는 프로젝트에서 배포 직전 수동 미니파이
•압축된 CSS를 디버깅·코드 리뷰 위해 다시 보기 좋게 풀기

CSS 미니파이어·포매터 자주 묻는 질문

복잡한 CSS도 안전하게 처리되나요?

일반적인 셀렉터, 미디어 쿼리, @keyframes, 가상 클래스/요소는 안전합니다. 다만 본 도구는 본격 파서가 아니라 정규식+토큰 기반이므로 CSS 안에 잘못된 문법이나 매우 특수한 표기가 있으면 결과가 어색할 수 있습니다. 그런 경우에는 입력을 다시 확인해 주세요.

주석을 보존하고 싶으면 어떻게 하나요?

Sass·Less 파일도 가능한가요?

본 도구는 컴파일된 일반 CSS를 대상으로 합니다. Sass/Less의 중첩 문법(`&`, `@include`)이나 변수($var)는 지원하지 않으며 그대로 통과될 수 있으니, 먼저 컴파일된 CSS를 입력해 주세요.

압축률은 일반적으로 얼마나 되나요?

주석·공백만 제거해도 흔히 20~35% 정도 줄어듭니다. 색상 단축과 0 단위 제거 옵션을 함께 켜면 추가로 5~15% 더 절약되며, 손으로 작성한 CSS가 깔끔할수록 절감 폭은 작아집니다.

압축한 CSS를 다시 풀 수 있나요?

네. Minify로 만든 한 줄 CSS를 그대로 입력창에 붙여넣고 Beautify 모드를 누르면 셀렉터와 속성을 다시 줄바꿈해서 보여줍니다. 단, 원본의 주석·공백은 복원되지 않으니 디버깅·코드 리뷰 용도로 활용하세요.