사용 방법

붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.

CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.

변환 또는 실행을 누르세요. 결과가 바로 나타납니다.

생성된 코드와 노트를 사용 전에 확인하세요.

결과를 복사해 프로젝트에 붙여넣으세요.

이 도구 소개

압축되거나 정리되지 않은 CSS를 들여쓰기가 있는 규칙으로 다시 배치합니다. 바뀌는 것은 공백과 구조뿐이며 캐스케이드 우선순위에는 영향을 주지 않습니다.

기본 예시는 압축된 카드 코드로, 실행하면 들여쓰기가 복원됩니다.

입력

.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}

출력

.card {
  display: flex;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
}

코드 리뷰 전에는 포맷을 정리하고, 압축은 배포 빌드에서만 적용하는 편이 관리하기 쉽습니다.