사용 방법

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

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

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

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

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

이 도구 소개

HTML에 들여쓰기를 적용해 요소의 중첩 구조가 바로 드러나게 합니다. 스타일 변환이나 접근성 랜드마크 검토 전에 유용하지만, 잘못된 마크업 자체를 고쳐주지는 않으므로 검사기는 여전히 필요합니다.

예제는 한 줄로 압축된 히어로 영역 마크업입니다.

입력

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

출력

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

들여쓰기가 예상 밖으로 밀린다면 원본에 닫는 태그가 빠져 있을 가능성이 큽니다.