사용 방법

입력 상자에 CSS를 붙여 넣거나 .css 파일을 열거나 예제를 사용해 보세요.
읽기 쉬운 코드는 Beautify, 가장 작은 출력은 Minify를 선택하세요.
보기 좋게 만들 때 들여쓰기를 공백 2칸, 공백 4칸 또는 탭 중에서 선택하세요.
결과를 복사하거나 .css 파일로 다운로드하세요. 중괄호나 따옴표가 짝이 맞지 않으면 오류에 줄과 열이 표시됩니다.

작동 방식

포매터는 먼저 스타일시트를 토큰으로 분리합니다. 작은따옴표나 큰따옴표로 된 문자열, url(…) 값, 주석, 중괄호, 세미콜론이 토큰입니다. 문자열과 url()은 하나의 토큰이므로 데이터 URI 안의 세미콜론이나 content: '{ }' 안의 중괄호가 구조를 혼란시키지 않으며, 그 내용은 정확히 복사됩니다.

Beautify는 선택자 목록의 각 선택자를 별도의 줄에 배치하고, 자식·형제·인접 결합자(>, ~, +) 주위에 공백을 추가하며, 각 선언을 '속성: 값;' 형태로 한 줄에 하나씩 작성합니다. @media, @supports, @layer, @container 및 네이티브 CSS 중첩 내부의 블록은 깊이마다 한 단계씩 들여씁니다. 블록의 마지막 선언 뒤에 세미콜론이 없으면 추가합니다. 주석은 원래 위치에 유지됩니다.

Minify는 주석(/*! … */ 라이선스 표시 제외)을 제거하고 공백을 압축하며, 중괄호·콜론·세미콜론·쉼표·선택자 결합자 주위의 공백을 없애고 각 닫는 중괄호 앞의 세미콜론을 생략합니다. 의미가 달라지는 공백은 유지됩니다. '.a .b'의 자손 결합자, 'a :focus'의 공백, calc(100% - 2px) 같은 값 안의 공백이 그 예입니다. '! important'는 '!important'로 정규화됩니다.

이 도구는 값을 다시 쓰지 않습니다. 색상, 단위, 0은 작성된 그대로 두고 규칙을 병합하거나 재정렬하지 않습니다. 일반 중첩을 사용하는 SCSS나 Less 파일은 대개 작동하지만 // 줄 주석이나 mixin 같은 고유 문법은 이해하지 못합니다.

예시

압축된 프레임워크 파일 읽기

한 줄로 된 bootstrap.min.css 발췌본을 붙여넣고 공백 2칸의 Beautify를 선택하면 각 규칙, 미디어 쿼리와 그 중첩 규칙이 별도의 들여쓴 줄로 표시됩니다.

직접 작성한 스타일시트 배포하기

주석과 들여쓰기가 있는 12KB 스타일시트를 이메일 템플릿이나 페이지 head에 인라인으로 추가하기 전에 Minify하세요. 요약에 전후 문자 수가 표시됩니다.

누락된 중괄호 찾기

스타일시트가 중간부터 적용되지 않습니다. 포매터는 닫는 중괄호가 빠진 규칙의 줄과 함께 '이 {는 짝이 되는 }로 닫히지 않았습니다'라고 보고합니다.

자주 묻는 질문

이 도구로 축소한 CSS를 프로덕션에 사용해도 안전한가요?

CSS가 무시하는 주석과 공백만 제거하므로 규칙 동작은 동일합니다. 규칙 병합이나 색상 축약 같은 빌드 도구의 심층 최적화는 수행하지 않으므로 결과물이 해당 도구보다 약간 클 수 있습니다.

“a :focus”에서 공백이 유지되는 이유는 무엇인가요?

선택자에서 공백은 자손 결합자입니다. “a :focus”는 링크 안의 포커스된 요소를 의미하고, “a:focus”는 포커스된 링크를 의미합니다. 그 공백을 제거하면 일치하는 요소가 달라집니다.

SCSS나 Less를 포맷할 수 있나요?

일반 중첩 규칙은 올바르게 포맷됩니다. // 주석, 인자가 있는 믹스인, @if 블록과 같은 전처리기 전용 문법은 이해하지 못해 이상하게 포맷될 수 있으므로 결과를 확인하세요.

축소할 때 라이선스 주석이 제거되나요?

개인정보 보호

귀하의 CSS는 브라우저에서만 처리됩니다. 업로드, 저장, 분석 수집이 없습니다.