CSS 포맷터 - 무료 온라인 도구

기능

정렬/압축 전환

속성 정렬

중복 제거

사용 방법

1. 왼쪽 입력 상자에 CSS를 붙여넣으세요.

2. 포맷 버튼으로 보기 좋게 정리하거나, 압축 버튼으로 한 줄로 압축하세요.

3. 오른쪽 패널에서 정리된 결과를 복사하세요.

이 도구에 대하여

압축되었거나 여러 사람이 손댄 CSS는 검토하기 어렵습니다. 한 줄로 뭉쳐 있으면 중복 규칙, 빠진 세미콜론, 덮어쓰기가 가려집니다. 이 포매터는 스타일시트를 선언 하나에 한 줄로 다시 구성하고, 공백 2칸·4칸·탭으로 일관되게 들여쓰며, 문자열, 주석, @media와 @supports 같은 중첩 블록은 그대로 유지합니다. "압축"은 반대로 운영 환경을 위해 주석과 불필요한 공백을 제거해 전송 크기를 줄입니다. 코드를 붙여넣거나 .css 파일을 끌어다 놓은 뒤 결과를 복사하거나 다운로드할 수 있습니다. 포맷팅은 보기만 바꿀 뿐 규칙의 순서와 의미는 그대로이므로 캐스케이드도 이전과 똑같이 동작합니다.

자주 묻는 질문

포맷팅하면 CSS 동작이 바뀌나요?

바뀌지 않습니다. 포매터는 공백과 줄바꿈만 바꿉니다. 선택자, 선언, 그 순서가 유지되므로 명시도와 캐스케이드는 이전과 똑같습니다.

CSS를 압축하면 얼마나 줄어드나요?

주석과 공백을 없애면 손으로 작성한 스타일시트는 보통 15–30% 줄어듭니다. gzip이나 Brotli로 압축해 전송하면 훨씬 더 줄어드니 운영 환경에서는 둘 다 사용하세요.

@media, @supports, 중첩 규칙도 지원하나요?

지원합니다. @ 규칙과 중첩 블록은 단계별로 들여쓰기되고 그 안의 내용도 일반 규칙처럼 정리되어 미디어 쿼리를 쉽게 훑어볼 수 있습니다.

주석은 유지되나요?

포맷팅할 때는 블록 주석을 유지하고 각각 한 줄에 둡니다. 압축할 때는 브라우저에 필요 없으므로 주석을 제거합니다.

포매터가 CSS 오류를 검사하나요?

속성 이름이나 값을 검사하지는 않습니다. 받은 내용을 정리할 뿐이라 colr: red 같은 오타는 그대로 남으므로, 편집기나 Stylelint 같은 린터로 실수를 찾으세요.

CSS 포맷터 및 코드 정리

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구