HTML 포매터·압축기

HTML을 깔끔한 들여쓰기로 정렬하거나 한 줄로 압축합니다. script·style·pre 내용은 보존 — 100% 브라우저에서 처리됩니다.

들여쓰기

HTML

출력

<div class="card">
  <!-- greeting -->
  <h2>
    Hi
  </h2>
  <p>
    Welcome to
    <a href="/">
      Nifty
    </a>
    .
  </p>
</div>

🔒 브라우저에서 처리되며 업로드되지 않습니다. <pre>·<textarea>·<script>·<style> 내용은 그대로 보존됩니다.

정렬 또는 압축

HTML을 붙여넣고 두 모드를 오가세요. 정렬(beautify)은 모든 태그와 텍스트 노드를 각자 줄에 두고 들여써서 문서 구조를 읽기 쉽게 만듭니다. 압축(minify)은 주석을 제거하고 불필요한 공백을 한 줄로 합쳐 파일 크기를 줄입니다. 두 모드 모두 <pre>·<textarea>·<script>·<style>의 원본 내용을 그대로 보존하므로 코드와 서식이 있는 텍스트가 깨지지 않으며, <br>·<img> 같은 빈 요소도 불필요한 중첩 없이 처리됩니다.

언제 어떤 모드를 쓰나요

압축되거나 한 줄로 된 HTML을 받아 읽거나 편집할 때, 또는 커밋 전에 마크업을 정돈할 때는 정렬을 사용하세요. 프로덕션이나 이메일 템플릿처럼 용량이 중요한 곳에서는 압축으로 크기를 줄이세요. 모든 처리가 브라우저에서 이뤄지므로 독점 마크업을 붙여넣어도 업로드되지 않습니다. 여기서의 압축은 보수적이어서 공백과 주석에 집중하며 태그나 속성을 다시 쓰지 않습니다.

자주 묻는 질문

압축하면 인라인 스크립트나 스타일이 깨지나요?

아니요. <script>·<style>·<pre>·<textarea>의 내용은 정렬·압축 두 모드 모두에서 그대로 보존되므로 코드와 서식 텍스트는 변경되지 않습니다.

정렬은 정확히 무엇을 하나요?

어떤 태그·속성이 있는지는 바꾸지 않고, 각 태그와 텍스트 노드를 일관된 들여쓰기로 각자 줄에 배치합니다. 들여쓰기는 스페이스 2칸, 4칸, 탭 중에서 고를 수 있습니다.

HTML이 어딘가로 업로드되나요?

아니요. 정렬과 압축은 전적으로 브라우저에서 자바스크립트로 처리됩니다. 붙여넣은 내용은 서버로 전송되거나 저장되지 않습니다.