CSS 포맷터란?

한 줄로 길게 이어졌거나 들여쓰기가 뒤죽박죽인 CSS 코드를, 사람이 읽기 좋게 줄바꿈과 들여쓰기로 다시 정리해 주는 도구입니다. 이렇게 코드를 보기 좋게 펴는 작업을 포매팅(formatting) 또는 미화(beautify)라고 부릅니다. 선택자와 중괄호, 각 속성이 규칙적인 위치에 놓이므로, 어디에 무슨 스타일이 걸려 있는지 눈으로 훑기가 훨씬 수월해집니다.

주로 배포용으로 압축된 CSS를 다시 열어 봐야 할 때, 또는 여러 사람이 손댄 스타일 파일의 들여쓰기가 제각각일 때 유용합니다. 코드의 동작이나 화면 표현을 바꾸는 것이 아니라, 공백과 줄 위치 같은 표기만 일관되게 다듬는다는 점이 핵심입니다. 반대로 파일 크기를 줄여 배포하려는 경우라면 CSS 압축 도구를 사용하시면 됩니다.

사용 방법

1. 편집기 영역에 정리할 CSS 코드를 붙여넣습니다.
2. 아래의 포맷 버튼을 누르면 같은 편집기 안에서 코드가 정돈된 형태로 바뀝니다.
3. 편집기 오른쪽 위의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

처리 결과가 새 영역이 아니라 입력했던 편집기에 그대로 덮어써지는 방식이므로, 원본을 그대로 남겨 두려면 파일을 따로 저장한 상태에서 사용하시길 권합니다.

정리 전후 비교 예시

한 줄로 붙어 있던 CSS를 실제로 정리하면 다음과 같이 바뀝니다.

정리 후에는 선택자 뒤에서 줄이 바뀌고, 속성마다 한 줄씩 들여쓰기가 붙습니다. 콜론 뒤 한 칸 띄우기처럼 사소한 간격도 일관되게 맞춰지므로, 규칙이 많은 파일일수록 읽기 편해지는 효과가 큽니다.

자주 묻는 질문

들여쓰기 칸 수를 바꿀 수 있나요?

이 도구는 널리 쓰이는 기본 정리 규칙을 그대로 적용하며, 속성은 공백으로 한 단계 들여씁니다. 칸 수나 스타일을 세밀하게 바꾸는 별도 설정은 제공하지 않습니다. 정돈된 결과를 받은 뒤 편집기에서 필요에 맞게 손보시면 됩니다.

압축된 CSS도 다시 펼 수 있나요?

네, 공백이 모두 제거되어 한 줄로 붙은 CSS도 붙여넣고 포맷 버튼을 누르면 줄바꿈과 들여쓰기가 복원됩니다. 다만 압축 과정에서 이미 사라진 주석은 되살아나지 않는다는 점만 알아 두시면 됩니다.

붙여넣은 코드가 서버로 전송되나요?

아닙니다. 정리 작업은 접속하신 분의 브라우저 안에서 자바스크립트로 처리되며, 입력한 CSS가 저희 서버로 올라가지 않습니다. 외부에 보내기 곤란한 코드도 안심하고 쓰실 수 있습니다.

정리해도 화면 스타일이 그대로인가요?

그대로입니다. 포매팅은 공백과 줄 위치만 바꾸는 작업이라 스타일 값 자체는 손대지 않습니다. 정리 전과 정리 후 CSS는 브라우저에서 완전히 똑같이 동작합니다.

근거: js-beautify(css_beautify) 기반 브라우저 내 처리 · 마지막 검토: 2026년 7월 11일.