HTML 포맷 도구
HTML 포맷팅이란?
HTML 포맷팅은 지저분한 HTML 코드를 규범적이고 읽기 쉬운 형식으로 정리하는 과정입니다. 좋은 코드 형식은 코드의 가독성을 높이고, 팀 협업을 용이하게 하며, 오류 발생을 줄일 수 있습니다. 포맷팅에는 통일된 들여쓰기, 적절한 줄 바꿈, 태그 정렬, 속성 정렬 등이 포함됩니다. 압축은 공백, 줄 바꿈 및 주석을 제거하여 파일 크기를 줄이고 페이지 로딩 속도를 향상시킵니다.
사용 방법
사용 방법
- 왼쪽 입력 상자에 HTML 코드를 붙여넣거나 입력합니다
- 들여쓰기 크기와 줄 바꿈 길이를 선택합니다
- '포맷팅'을 클릭하여 코드를 정리하거나 '압축'을 클릭하여 크기를 줄입니다
- 오른쪽에서 구문 강조가 적용된 포맷된 코드를 확인하세요
- '복사'를 클릭하여 클립보드에 복사합니다
옵션 설명
키보드 단축키
- Ctrl + Enter정리
- Ctrl + Shift + C결과 복사
서식 팁
- 포맷팅을 통해 깨진 중첩 구조나 의심스러운 인라인 스크립트를 발견할 수 있지만, HTML을 정제하거나 안전하지 않은 마크업을 안전하게 만들지는 않습니다.
- 배포용 복사본만 Minify하세요. 검토, diff 비교 및 접근성 확인을 위해 읽기 쉬운 소스 마크업은 그대로 두세요.
활용 사례
기술 원리
HTML 포맷터는 WHATWG HTML 표준의 트리 생성 알고리즘을 따릅니다. 바이트는 디코딩되고(일반적으로 meta charset 또는 BOM에 따른 UTF-8), 토크나이저는 데이터, RCDATA, RAWTEXT, 스크립트 데이터 및 §13.2.5에 정의된 여러 속성 상태를 순회하며, 트리 생성 단계에서는 삽입 모드 상태 머신(initial, before html, in head, in body, in table, in select 등)을 사용하여 DOM을 구축합니다. 파서는 설계적으로 관대합니다: 닫히지 않은 <p>는 블록이 뒤따를 때 자동으로 닫히고, 잘못된 </tr>는 무시되며, 위치가 잘못된 <table>은 포스터 부모 처리됩니다. 브라우저급 파서는 new DOMParser().parseFromString(src, 'text/html')로 이를 노출하고, Node 측 도구는 parse5(참조 whatwg 구현), htmlparser2 또는 cheerio를 사용합니다. 재인쇄는 결과 트리를 순회하며 요소 카테고리에 따라 직렬화합니다. void 요소(area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr)는 HTML5에서 닫는 태그를 받지 않습니다(XHTML의 자체 닫기 />는 허용되지만 선택 사항). 블록 수준 컨테이너(div, section, article, header, footer, nav, main, ul, ol, li, table)는 depth*indent 공백으로 줄 바꿈되고, 구문/인라인 콘텐츠(span, a, strong, em, code)는 CSS white-space: normal이 공백 연속을 단일 문자로 축소하므로 인라인으로 유지됩니다. 두 가지 요소 유형은 그대로 보존해야 합니다: <pre>와 <textarea>는 white-space: pre 시맨틱스를 가지며 선행 줄 바꿈이 파서에 의해 소비되고, <script>와 <style> 본문은 RAWTEXT이므로 내용을 재들여쓰면 런타임 동작이 변경됩니다. 속성 직렬화는 따옴표(작은/큰)를 정규화하고 내장 구분 기호를 명명된 문자 참조(&, <, >, ")와 숫자 '로 재인코딩합니다. 속성 순서는 DOM에서 중요하지 않으므로 포맷터는 일반적으로 안정적인 순서(id, class, 그다음 알파벳)를 적용합니다. 설정된 printWidth를 초과하면 줄 바꿈이 적용되어 속성이 한 줄에 하나씩 분리되고, 닫는 >는 별도 줄(prettier-plugin-html의 bracketSameLine: false) 또는 마지막 속성에 부착됩니다. 압축은 이 과정을 역으로 수행합니다. 블록 태그 사이의 공백이 제거되고, IE 조건부 <!--[if]를 제외한 주석이 삭제되며, [A-Za-z0-9._-]+와 일치하는 속성의 따옴표가 제거됩니다. 두 작업 모두 입력 길이에 대해 O(n)입니다.
- 파서: 브라우저에서는 DOMParser('text/html')를 통한 WHATWG HTML 트리 생성(§13), Node에서는 parse5/htmlparser2/cheerio; 삽입 모드 상태 머신이 누락/잘못된 태그와 포스터 부모 처리를 담당
- void 요소(닫는 태그 없음): area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr - HTML Living Standard 기준 14개 요소. XHTML 자체 닫기 />는 허용되지만 불필요
- 공백 보존 요소: <pre>와 <textarea>는 CSS white-space: pre를 가지며 선행 줄 바꿈 하나를 소비; 내부 바이트는 재들여쓰되지 않으며 그렇지 않으면 표시 출력이 변경됨
- RAWTEXT 컨텍스트: <script>와 <style> 본문은 HTML이 아니며 JS/CSS 서브 포맷터에 위임(또는 그대로 유지). 정규식이나 문자열 리터럴 내의 원시 텍스트를 재들여쓰하면 런타임 시맨틱스가 깨짐
- 속성 정규화: 따옴표 스타일 선택(작은/큰), 내장 구분 기호를 다섯 명명 참조(&, <, >, ", ')로 재인코딩, DOM 순서가 중요하지 않으므로 안정적 순서(id, class, 알파벳) 적용
- printWidth(일반적으로 80/100/120) 초과 시 줄 바꿈: 속성이 한 줄에 하나씩 분리되고 닫는 >가 별도 줄 또는 마지막 속성에 부착, prettier-plugin-html의 bracketSameLine 옵션과 동일
- 압축: 태그 간 공백 축소, 주석 제거(<!--[if IE]> 조건부 유지), 선택적 닫는 태그 제거(</li>, </p>가 형제 뒤에 오는 경우), [A-Za-z0-9._-]+에 일치하는 속성의 따옴표 제거; 왕복 O(n)
예시
압축된 HTML → 포맷 변환 (2칸 들여쓰기)
입력:
<div class="card"><h2>Title</h2><p>Body text</p></div>
포맷 결과:
<div class="card">
<h2>Title</h2>
<p>Body text</p>
</div>포맷 → 압축 (운영 환경 배포)
원본 (412 bytes):
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
압축 결과 (96 bytes, -77%):
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>긴 속성 목록 여러 줄로 줄바꿈
입력:
<input type="email" id="user-email" name="email" placeholder="you@example.com" required autocomplete="email">
포맷 결과 (80자 초과 시 줄바꿈):
<input
type="email"
id="user-email"
name="email"
placeholder="you@example.com"
required
autocomplete="email"
>자체 닫힘 태그와 인라인 콘텐츠 보존
입력:
<p>Click <a href="/docs">here</a> for help.<br><img src="icon.png" alt=""></p>
포맷 결과 (인라인 형제 요소는 한 줄 유지):
<p>
Click <a href="/docs">here</a> for help.
<br>
<img src="icon.png" alt="">
</p>자주 묻는 질문
어떤 부분을 포매팅하나요?
HTML 마크업의 들여쓰기, 속성 배치, 빈 줄 처리, 그리고 (선택적으로) 지정한 컬럼 너비에서의 줄바꿈을 정리합니다. 렌더링 결과는 바뀌지 않으므로 페이지 모습은 그대로지만 소스만 더 읽기 쉬워집니다.
<pre>, <textarea>, <script> 블록 내부도 그대로 유지되나요?
네. pre, textarea, code, script 블록 안의 공백은 의미가 있어(렌더링에도 영향) 포매터가 손대지 않습니다. 다른 요소들의 공백만 정규화됩니다.
자기 닫힘 태그가 다시 쓰이는 이유가 무엇인가요?
HTML5에서 <br/>, <img/>, <hr/>은 <br>, <img>, <hr>과 동일하며 슬래시가 필수가 아닙니다(HTML5 기준). 포매터가 한 가지 스타일로 통일할 수 있습니다. XHTML/JSX/Vue 템플릿에서는 끝의 슬래시를 유지하도록 포매터를 설정하세요.
HTML 유효성 검사를 하나요?
아니요. 붙여 넣은 그대로 포매팅합니다. 유효성을 검사하려면 W3C Validator나 브라우저 개발자 도구를 이용하세요. 닫히지 않은 태그나 짝이 맞지 않는 따옴표 같은 흔한 문제는 그대로 통과됩니다.
HTML이 업로드되나요?
아니요. 포매팅은 브라우저에서 실행되며 붙여 넣은 HTML은 네트워크를 거치지 않습니다.
HTML을 압축(minify)할 수도 있나요?
압축 모드가 있다면 가능합니다. HTML 압축은 태그 사이의 공백을 제거하고, 텍스트 안의 연속된 공백을 줄이며, 선택적으로 닫는 태그를 생략합니다. 결과는 읽기 어려워지지만 크기가 작아져 운영 빌드에 유용합니다.
내장된 CSS와 JS는 어떻게 처리되나요?
<style>과 <script> 내용은 페이지가 지원할 경우 각각의 (CSS, JS) 포매터로 정리되는 것이 보통입니다. 그렇지 않다면 구문이 깨지지 않도록 내부 내용을 그대로 둡니다.