이 도구는 중괄호나 세미콜론만 기준으로 코드를 자르지 않고 구문을 인식하는 스캐너를 사용합니다. 문자열, 주석, 함수, 속성 선택자와 중첩 블록을 추적하므로 URL이나 따옴표로 감싼 값 안의 문장 부호가 바뀌지 않습니다.
무료 CSS 정리 도구
브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.
CSS 입력
정리된 CSS
정리할 CSS를 붙여넣으세요
CSS 정리 도구는 무엇을 하나요?
CSS 정리 도구는 압축되었거나 간격이 일정하지 않은 스타일시트를 일관된 들여쓰기와 줄바꿈으로 읽기 쉽게 바꿉니다. CSS를 붙여넣고 공백 2칸, 공백 4칸 또는 탭을 고른 다음 결과를 복사하거나 다운로드하세요. 작업은 브라우저 안에서 처리되며 선언 순서는 그대로 유지됩니다.
사용 방법
- 1CSS 붙여넣기. 스타일시트, 선택자 블록 또는 압축된 CSS 코드 조각을 입력 편집기에 넣으세요.
- 2들여쓰기 선택. 공백 2칸, 공백 4칸 또는 탭을 고르면 정리된 결과가 바로 갱신됩니다.
- 3상태 확인. 구조 통계를 살펴보거나 닫히지 않은 구분 기호, 주석 또는 문자열을 수정하세요.
- 4복사 또는 다운로드. 정리된 CSS를 클립보드에 복사하거나 formatted.css 파일로 저장하세요.
이런 분께 추천
- 프론트엔드 개발자가 배포용 CSS를 펼쳐서 읽고 디버깅할 때 유용합니다.
- 코드 리뷰어가 스타일시트나 pull request 코드 조각을 비교하기 전에 들여쓰기를 통일할 수 있습니다.
- 학습자가 중첩된 미디어 쿼리, 선택자와 선언 블록의 구조를 한눈에 파악할 수 있습니다.
- 지원 및 QA 팀이 브라우저 검사 도구에서 복사한 CSS를 이슈에 붙이기 전에 정리할 수 있습니다.
자주 묻는 질문
CSS 정리 도구는 무료인가요?
네. 브라우저가 무리 없이 처리할 수 있는 만큼 CSS를 정리할 수 있습니다. 계정이나 설치, 사용량 제한이 없으며 결과도 즉시 확인할 수 있습니다.
CSS가 서버로 업로드되나요?
아니요. 모든 포맷 작업은 브라우저에서 로컬로 실행됩니다. 붙여넣은 CSS는 페이지 편집기에만 머물고 API로 전송되지 않으므로 비공개 프로젝트 코드에도 사용할 수 있습니다.
얼마나 큰 CSS를 정리할 수 있나요?
고정된 글자 수 제한은 없습니다. 아주 큰 자동 생성 스타일시트는 기기 메모리와 브라우저 성능에 영향을 받지만, 일반적인 사이트와 컴포넌트, 이메일 CSS는 빠르게 처리됩니다.
포맷하면 CSS 동작이 달라지나요?
공백과 줄바꿈만 조정하며 선택자, 선언, 주석, 따옴표 문자열과 그 순서는 유지합니다. 실험적인 구문이나 공백에 민감한 이스케이프를 사용했다면 배포 전에 결과를 확인하세요.
CSS 속성의 유효성도 검사하나요?
아니요. 중괄호, 대괄호, 소괄호, 주석과 문자열이 올바르게 닫혔는지만 확인합니다. 각 속성이나 값, 브라우저 전용 기능이 의미상 유효한지는 검사하지 않습니다.
미디어 쿼리와 중첩 CSS도 정리할 수 있나요?
네. media, supports, container, layer, keyframes 같은 at-rule 안의 블록을 깊이에 맞춰 들여씁니다. 최신 중첩 선택자도 문자열과 함수 인수를 건드리지 않고 정리합니다.