빠른 사용법
세 단계로 확인합니다.
- 1CSS 원문을 붙여넣습니다
선택자·선언·미디어 쿼리가 포함된 압축 CSS를 입력합니다.
- 2구조 경고를 확인합니다
중괄호·문자열·블록 주석의 미종료 여부를 먼저 점검합니다.
- 3블록별 결과를 복사합니다
선택자와 선언이 줄 단위로 정리된 결과와 블록·바이트 지표를 확인합니다.
결과 읽기
CSS 공백은 위치에 따라 의미가 달라집니다.
선택자 사이 공백은 후손 결합자를 뜻할 수 있으므로 단순 제거가 아니라 블록과 선언 경계를 중심으로 정리해야 합니다.BLOCK블록 들여쓰기
여는 중괄호에서 깊이를 늘리고 닫는 중괄호에서 줄을 되돌려 중첩 규칙을 표시합니다.
DECL선언 분리
세미콜론 뒤를 새 줄로 나눠 속성별 검토와 비교를 쉽게 합니다.
CHECK균형 경고
닫히지 않은 주석·문자열·중괄호를 경고하되 브라우저의 전체 CSS 파싱을 대신하지는 않습니다.
브라우저에서만 처리하는 가독성 도구입니다. Sass·Less·CSS-in-JS 문법은 일반 CSS와 다르게 정리될 수 있습니다.
이럴 때 유용합니다.
- 압축 CSS의 빠른 가독성 복원
- 미디어 쿼리와 중첩 블록 확인
- 코드 리뷰 전 선언 줄 정리
함께 확인하세요.
- Sass·Less 전용 문법은 지원 범위 밖
- data URI와 복잡한 문자열은 결과 재확인 필요
- 정리 후 실제 페이지 렌더링 회귀 테스트 권장
자주 묻는 질문
사용 전 알아둘 점
CSS 속성을 알파벳순으로 바꾸나요?
아닙니다. 원래 선언 순서를 유지하면서 블록과 세미콜론 기준으로 줄과 들여쓰기만 정리합니다.
문법 오류를 모두 찾을 수 있나요?
중괄호·문자열·주석 균형을 점검하지만 브라우저 CSS 파서의 모든 오류를 진단하지는 않습니다.
입력한 스타일을 서버에 저장하나요?
아닙니다. 모든 처리는 현재 브라우저에서 실행됩니다.