HTML 포매터·압축기
HTML을 깔끔하게 정렬하거나 한 줄로 압축합니다 — pre·textarea 내용은 항상 그대로 유지되고, script·style 안 코드는 함께 정렬하거나 그대로 둘 수 있습니다.
<div class="card"> <!-- 인사말 --> <h2>반갑습니다</h2> <p><a href="/">메이커박스</a>에 오신 것을 환영합니다.</p> </div>
정렬할 때 <script> 안의 JavaScript와 <style> 안의 CSS도 함께 들여쓰지만 끄면 그대로 둡니다. <pre>·<textarea> 내용은 항상 보존되고, 압축할 때는 넷 다 보존하며 조건부 <!--[if]--> 주석과 중요 <!--! 주석도 남깁니다.
정렬 또는 압축
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칸, 탭 중에서 고를 수 있고, 긴 줄을 고른 길이에서 나누거나 속성을 한 줄에 하나씩 둘 수도 있습니다.