CSS 포맷터
CSS를 원클릭으로 정리하거나 압축합니다. 속성 알파벳 정렬을 지원하며 @media, @keyframes 등 모든 표준 at-rule을 지원합니다.
이 도구가 도움이 되었나요?
자주 묻는 질문
CSS 정리란 무엇인가요?
CSS 정리(포맷)는 압축되거나 일관성 없이 작성된 CSS를 재구성합니다. 각 선언을 개별 줄에 배치하고, 규칙 블록 내부를 올바르게 들여쓰기하며, 규칙 사이에 빈 줄을 넣어 가독성을 높입니다. 순수하게 외관만 조정하며 렌더링 결과는 동일합니다.
속성 정렬의 장점은 무엇인가요?
속성 정렬은 각 규칙 블록 내의 선언을 알파벳 순서(A→Z)로 재배열합니다. 정렬된 CSS는 특정 속성을 찾기 쉽고 중복을 피하는 데 도움이 됩니다. 알파벳 순서 등의 스타일 가이드는 팀 전체의 코드베이스 일관성을 유지하는 데 기여합니다.
CSS 압축이 페이지 외관에 영향을 주나요?
아니요. CSS 압축은 공백, 주석, 규칙 블록 끝의 세미콜론만 제거하며, 이는 의미적으로 무관합니다. 브라우저는 압축된 CSS와 포맷된 CSS를 동일하게 해석합니다. 압축된 CSS는 일반적으로 포맷된 버전보다 20~40% 작습니다.
@media 쿼리와 @keyframes를 지원하나요?
네. @media, @keyframes, @supports, @font-face 등의 at-rule을 인식하고 내부 블록을 올바르게 들여쓰기합니다. 블록이 없는 @import와 @charset는 한 줄 문장으로 포맷됩니다.
SCSS나 Less를 처리할 수 있나요?
포맷터는 표준 CSS 구문을 처리하며, SCSS/Less 파일의 유효한 CSS 부분은 정상적으로 처리됩니다. 변수($var), 중첩, 믹스인(@mixin) 등 SCSS 고유 기능은 비표준 CSS 구문이므로 올바르게 포맷되지 않을 수 있습니다.
프로젝트에서 CSS를 자동 포맷하려면 어떻게 하나요?
Prettier와 .prettierrc 설정, 또는 Stylelint와 stylelint-config-prettier 프리셋을 사용할 수 있습니다. Tailwind CSS 프로젝트에서는 Tailwind Prettier 플러그인으로 유틸리티 클래스를 정렬할 수 있습니다. VS Code 내장 CSS 포맷터(Shift+Alt+F)도 로컬 포맷에 유용합니다.