분류: 개발 도구

HTML 포맷터

자체 기획 도구찾는 도구가 없나요?

script나 style 내용은 건드리지 않고 로컬에서 HTML을 들여쓰기 정렬

HTML을 붙여넣으면 중첩된 태그를 다시 들여써서 가독성을 높입니다. <script>, <style>, <textarea>, <pre> 내부의 내용은 그대로 유지되어 삽입된 코드와 서식이 절대 깨지지 않습니다. 모든 처리는 브라우저에서 이루어집니다.

정렬되었습니다.

원본 크기166 B정렬 후 크기204 B
정렬된 HTML
<main>
  <!-- LocalTools example -->
  <h1>Offline browser tools</h1>
  <p>
    Everything runs
    <b>on your device</b>
    .
  </p>
  <ul>
    <li>No upload</li>
    <li>No account</li>
  </ul>
</main>

이 도구는 가벼운 들여쓰기 도구일 뿐, 검증 도구가 아닙니다. 짝이 맞지 않거나 닫히지 않은 태그는 수정하지 않습니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

HTML 포맷터는 중첩된 요소를 다시 들여써서, 개발자 도구 없이도 깊게 중첩된 페이지 구조를 한눈에 파악할 수 있게 해줍니다. 이 도구는 완전한 파서가 아니라 가벼운 들여쓰기 도구입니다. 태그, 주석, doctype은 인식하지만 마크업을 검증하거나 짝이 맞지 않는 태그를 복구하지는 않습니다.

사용 방법

  1. HTML을 입력란에 붙여넣거나 예시를 불러옵니다.
  2. 2칸 또는 4칸 들여쓰기를 선택합니다.
  3. 정렬된 결과를 복사해 프로젝트에 다시 붙여넣습니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

제 HTML이 어딘가로 업로드되나요?
아니요. 정렬은 페이지 내에서 실행되는 JavaScript로 처리되므로 마크업이 기기 밖으로 나가지 않습니다.
<script>나 <style> 태그 안의 내용도 바뀌나요?
아니요. 삽입된 JavaScript와 CSS는 작성된 그대로 복사됩니다. 다시 정렬하면 의미가 바뀔 수 있기 때문입니다.
깨지거나 짝이 맞지 않는 HTML을 고쳐주나요?
아니요. 발견한 태그를 기준으로 다시 들여쓸 뿐, 잘못된 마크업을 검증하거나 복구하지는 않습니다.