01
원본 줄 번호 확인
예제에는 사용자 지정 속성과 @media가 있습니다. 규칙 목록의 줄 번호는 정리된 결과가 아니라 입력을 기준으로 합니다.
HTML / CSS Dev Tools
CSS 정리원본 규칙을 놓치지 않기
서식 정리, 압축, 문법 검사를 직접 선택하세요. 원본을 수정하면 이전 결과는 다시 실행할 때까지 내보낼 수 없습니다.
CSS 정리
CSS는 현재 브라우저 탭에서 처리되며 업로드하거나 기록에 저장하지 않습니다.
규칙 탐색
작업을 실행하면 선택자와 @ 규칙이 표시됩니다.
CSS를 입력하고 작업을 선택하세요.
한 줄로 압축된 스타일시트에서는 뒤에 나온 선언이나 미디어 쿼리 범위를 찾기 어렵습니다. CSS 정리는 선언 순서를 유지하면서 들여쓰기를 더해 원본과 결과를 나란히 살펴볼 수 있게 합니다.
CSS 압축은 짧은 출력이 필요할 때, CSS 문법 검사는 닫히지 않은 블록을 찾을 때 사용하세요. 이 CSS 정리 화면은 매번 원본을 읽으므로 이전 결과가 누적 변환되지 않습니다.
CSS 정리로 원본을 읽는 방법
읽기 쉬운 출력과 원래 줄 번호를 함께 유지합니다.
선언의 덮어쓰기 순서 유지
CSS 정리는 중복 속성과 주석을 서식 결과에 남깁니다. 속성을 알파벳순으로 정렬하지 않아 나중 선언이 앞 선언을 덮는 관계를 확인할 수 있습니다.
규칙 목록에서 원본으로 이동
선택자와 @ 규칙이 원래 줄 번호와 함께 표시됩니다. 항목을 누르면 입력 위치로 이동하며 문법 오류는 줄과 열로 찾을 수 있습니다.
원본 위치를 기준으로 검토하기
02
목적에 맞는 작업 선택
기본 들여쓰기는 공백 2개이며 공백 4개나 탭으로 바꿀 수 있습니다. 압축과 검사는 직전 출력이 아닌 원본을 다시 읽습니다.
03
최신 결과만 내보내기
입력이나 들여쓰기가 바뀌면 복사와 다운로드가 비활성화됩니다. 다시 실행하면 사용할 수 있고 Ctrl/Cmd+Enter는 서식 정리를 실행합니다.
같은 CSS를 세 방식으로 확인
읽기 쉬운 서식
CSS 포맷터처럼 중첩 블록을 펼치되 주석과 선언 순서를 유지합니다. 중복 속성도 자동으로 제거하지 않습니다.
조심스러운 압축
불필요한 공백과 일반 주석만 줄입니다. 규칙을 합치거나 색상과 단위를 바꾸지 않습니다.
원본 규칙 탐색
선택자와 @ 규칙을 원본 줄 번호로 나열합니다. 긴 목록은 50개씩 펼치고 결과 내보내기는 전체를 사용합니다.
검사 범위와 처리 제한
- 브라우저 호환성은 별도 확인
- 문법 검사는 구조를 파악하지만 각 속성과 선택자가 대상 브라우저에서 지원되는지는 보증하지 않습니다.
- 표준 CSS만 처리
- CSS 정리는 SCSS나 Less 변수, 믹스인, 제어문을 해석하지 않습니다. 먼저 해당 컴파일러로 CSS를 만드세요.
- 속성 정렬과 자동 수정 없음
- 중복 선언과 원본 순서를 보존합니다. 압축도 규칙을 합치거나 값을 다른 표현으로 바꾸지 않습니다.
- 프로젝트 렌더링 없음
- HTML과 다른 스타일시트를 읽지 않으므로 실제 페이지의 캐스케이드를 재현하지 않습니다. URL이나 입력 기록도 저장하지 않습니다.
CSS 정리에 관한 자주 묻는 질문
여기에 넣은 CSS 코드는 안전한가요?
처리는 현재 브라우저 탭 안에서 이루어집니다. 코드를 서버로 업로드하거나 로컬 기록에 저장하지 않습니다.
정리와 압축은 어떻게 다른가요?
정리는 줄바꿈과 들여쓰기를 더하고, 압축은 불필요한 공백과 일반 주석을 줄입니다. 두 작업 모두 원본에서 시작합니다.
속성을 알파벳순으로 정렬할 수 있나요?
하지 않습니다. 중복 속성의 순서가 덮어쓰기에 영향을 줄 수 있어 원본 선언 순서를 유지합니다.
미디어 쿼리와 키프레임도 처리하나요?
표준 CSS로 파싱되는 중첩 규칙을 처리합니다. @ 규칙은 목록에 표시되지만 브라우저별 지원 여부는 별도로 확인해야 합니다.
개발자 도구에서 CSS에 취소선이 왜 보이나요?
다른 선언에 덮였거나 적용 조건이 맞지 않을 수 있습니다. 이 도구는 선언 순서를 보여 주지만 실제 DOM과 계산된 스타일은 브라우저 개발자 도구에서 확인하세요.
다른 질문이 있나요?