HTML 포매터·압축기
HTML을 깔끔한 들여쓰기로 정렬하거나 한 줄로 압축합니다. pre·textarea는 항상 보존하고, script·style 안의 JS·CSS는 함께 정렬하거나 꺼서 그대로 둡니다 — 100% 브라우저에서 처리됩니다.
<div class="card"> <!-- 인사말 --> <h2>반갑습니다</h2> <p><a href="/">메이커박스</a>에 오신 것을 환영합니다.</p> </div>
🔒 브라우저에서 처리되며 업로드되지 않습니다. 정렬할 때 <script> 안의 JavaScript와 <style> 안의 CSS도 함께 들여쓰지만 끄면 그대로 둡니다. <pre>·<textarea> 내용은 항상 보존되고, 압축할 때는 넷 다 보존합니다.
정렬 또는 압축
HTML을 붙여넣고 두 모드를 오가세요. 정렬(beautify)은 모든 태그와 텍스트 노드를 각자 줄에 두고 들여써서 문서 구조를 읽기 쉽게 만듭니다. 압축(minify)은 주석을 제거하고 불필요한 공백을 한 줄로 합쳐 파일 크기를 줄입니다. <pre>·<textarea>의 내용은 두 모드 모두 그대로 보존되고 압축할 때는 <script>·<style>도 건드리지 않습니다. 정렬할 때는 인라인 JS/CSS도 정렬 체크박스를 끄지 않는 한 <script> 안의 JavaScript와 <style> 안의 CSS도 함께 들여쓰는데, 공백과 줄바꿈만 달라질 뿐 코드 동작은 그대로이며, <br>·<img> 같은 빈 요소도 불필요한 중첩 없이 처리됩니다.
언제 어떤 모드를 쓰나요
압축되거나 한 줄로 된 HTML을 받아 읽거나 편집할 때, 또는 커밋 전에 마크업을 정돈할 때는 정렬을 사용하세요. 프로덕션이나 이메일 템플릿처럼 용량이 중요한 곳에서는 압축으로 크기를 줄이세요. 모든 처리가 브라우저에서 이뤄지므로 독점 마크업을 붙여넣어도 업로드되지 않습니다. 여기서의 압축은 보수적이어서 공백과 주석에 집중하며 태그나 속성을 다시 쓰지 않습니다.
자주 묻는 질문
압축하면 인라인 스크립트나 스타일이 깨지나요?
아니요. 압축할 때는 <script>·<style>·<pre>·<textarea>의 내용이 그대로 보존됩니다. 정렬할 때도 pre·textarea는 그대로지만, 인라인 JS/CSS도 정렬 체크박스를 끄지 않으면 script 안의 JavaScript와 style 안의 CSS는 다시 들여씁니다. 공백과 줄바꿈만 바뀌므로 코드가 하는 일은 달라지지 않습니다.
정렬은 정확히 무엇을 하나요?
어떤 태그·속성이 있는지는 바꾸지 않고, 각 태그와 텍스트 노드를 일관된 들여쓰기로 각자 줄에 배치합니다. 들여쓰기는 스페이스 2칸, 4칸, 탭 중에서 고를 수 있습니다.
HTML이 어딘가로 업로드되나요?
아니요. 정렬과 압축은 전적으로 브라우저에서 자바스크립트로 처리됩니다. 붙여넣은 내용은 서버로 전송되거나 저장되지 않습니다.