개발자 도구 / 16

CSS 포맷터 및 가독화 도구

CSS 규칙, 선택자 목록, 속성 선언의 서식을 지정하고 들여쓰기와 확장을 적용해 읽기 쉬운 코드로 만듭니다.

CSS 포맷터 및 가독화 도구: TOEA는 CSS 규칙, 미디어 쿼리, 선언을 구문 분석하고 속성 사이의 간격과 블록 들여쓰기를 일관되게 정리합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리: 개발자 도구
실행 횟수: 브라우저에서
비용: 무료 · 가입 불필요
사용 가능 여부: 사용 가능

CSS 포맷터 및 정리 도구로컬 처리

브라우저에서 전부 실행됩니다

정리된 CSS 출력

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

다른 사람이 만든 스타일시트 읽기

축소된 파일에 서식을 지정하면 읽기 쉬워지지만 원본과 같아지지는 않습니다. 축소 도구는 규칙을 병합하고 선언 순서를 바꾸므로 선택자 그룹과 속기 값이 나타날 수 있습니다. 요소에 어떤 규칙이 스타일을 적용하는지 찾으려면 브라우저의 개발자 도구가 더 빠르며, Sources 패널에서는 축소된 파일에 직접 예쁘게 표시할 수 있습니다. 스타일시트의 두 버전에 서식을 지정한 뒤 diff 검사 도구에서 비교하면 업데이트로 변경된 내용을 확인할 수 있습니다.

서식 지정으로 변경되지 않는 내용

이 포매터는 들여쓰기와 공백만 추가합니다. 속성을 정렬하거나 철자가 틀린 속성 이름을 수정하거나 벤더 프리픽스를 추가하거나 중복 선언을 제거하지 않습니다. 따라서 colour: red도 수정되지 않은 채 통과합니다. 따옴표로 묶인 문자열 내부를 포함하여 모든 곳에서 연속된 공백이 축약되므로, 여러 공백에 의존하는 content 값을 확인하십시오. 파일을 배포할 준비가 되면 CSS minifier로 다시 압축하십시오.

사용 방법

원본 또는 압축된 CSS 코드를 붙여넣습니다.
2칸 또는 4칸 들여쓰기를 선택합니다.
CSS 서식 지정을 클릭한 후 결과를 복사하거나 다운로드합니다.

개인정보 보호 및 제한사항

모든 CSS 서식 지정 작업은 브라우저에서 로컬로 실행됩니다.

자주 묻는 질문

@media 쿼리를 지원합니까?

예. 중첩된 at-rule과 미디어 쿼리에 적절한 들여쓰기를 적용합니다.

색상 코드나 선택자를 수정합니까?

아니요. 속성값은 변경하지 않고 공백, 들여쓰기, 구조만 조정합니다.

무료 도구 · 브라우저에서회 실행 · 계정 불필요