HTML 정리 / 압축 markup
HTML을 블록 구조에 맞춰 들여쓰기하거나 압축합니다. pre와 script 내용은 그대로 보존합니다.
이 도구가 하는 일
HTML을 다룰 때 까다로운 점은 공백이 화면 결과에 영향을 준다는 것입니다. 단어와 인라인 요소 사이의 공백은 실제로 화면에 간격으로 나타나기 때문에, 아무 곳에서나 줄을 바꾸면 보이는 결과가 달라집니다.
그래서 이 도구는 요소를 블록과 인라인으로 구분해 처리합니다. div, p, li 같은 블록 요소는 각각 새 줄에 놓고 중첩 단계만큼 들여쓰지만, b, span, a, img 같은 인라인 요소는 주변 텍스트와 같은 줄에 유지합니다. 이렇게 하면 들여쓰기를 넣어도 화면에 보이는 결과가 바뀌지 않습니다.
pre, textarea, script, style 안의 내용은 손대지 않고 그대로 옮깁니다. 특히 script 안에는 a < b 처럼 태그가 아닌 부등호가 들어 있는 경우가 많은데, 이런 문자를 태그로 잘못 해석하지 않도록 여는 태그부터 닫는 태그까지 한 덩어리로 처리합니다.
언제 사용하나요
한 줄로 압축된 페이지 소스를 분석할 때, 템플릿 엔진이 만들어낸 결과물의 구조를 확인할 때, 이메일 템플릿처럼 중첩이 깊은 마크업을 정리할 때, 인라인으로 삽입할 HTML 조각의 용량을 줄일 때 사용합니다.
입력과 출력 예시
<div class="card"><h2>Title</h2><p>Body <b>text</b> here</p></div>
<div class="card">
<h2>
Title
</h2>
<p>
Body <b>text</b> here
</p>
</div>
블록 요소는 줄을 나누고, 인라인 요소 <b>는 문장 안에 그대로 둡니다.
<div><pre> keep\n this </pre></div>
<div>
<pre> keep
this </pre>
</div>
pre 안의 공백과 줄바꿈은 원문 그대로 유지됩니다.
주의사항
이 도구는 HTML 파서가 아니라 정리 도구입니다. 닫는 태그가 빠졌거나 중첩이 잘못된 마크업은 들여쓰기 단계가 어긋난 채로 출력되므로, 오히려 그 지점을 찾는 단서로 활용할 수 있습니다. 압축 기능은 인라인 요소 주변의 의미 있는 공백은 남기고 블록 요소 사이의 공백만 제거하지만, 공백에 민감한 레이아웃(예: inline-block을 나란히 배치한 경우)에서는 결과를 확인한 뒤 반영하십시오.
자주 묻는 질문
들여쓰기를 넣으면 화면이 달라지지 않나요?
인라인 요소와 텍스트는 같은 줄에 유지하므로 달라지지 않습니다. 줄을 나누는 대상은 공백이 렌더링에 영향을 주지 않는 블록 요소뿐입니다.
script 안에 부등호가 있어도 되나요?
됩니다. script와 style은 여는 태그부터 닫는 태그까지 한 덩어리로 읽기 때문에 내부의 < 기호를 태그로 오해하지 않습니다.