HTML 포매터(정리기)

압축했거나 손으로 고친 HTML은 읽기 어렵고 디버그하기는 더 어렵습니다. 포매터는 섹션, 제목, 문단, 목록, 표 같은 블록 요소를 각각 한 줄에 일정하게 들여써 놓고, 텍스트와 링크, 굵은 글씨 같은 인라인 태그는 문장 속에 함께 둡니다. 내장 CSS와 JavaScript도 다시 들여쓸 수 있습니다.

사용 방법

1. HTML을 붙여 넣습니다.
2. 공백 2칸, 4칸, 탭 중에서 고르고, 긴 텍스트를 줄바꿈할 줄 길이를 정합니다(0이면 줄바꿈 끔).
3. 속성을 별도 줄에 둘 시점과 내장 style, script 코드를 다시 들여쓸지를 정합니다.
4. 정리된 HTML을 복사합니다. 그 아래 안내에는 닫히지 않았거나 불필요한 태그가 줄과 열과 함께 나옵니다.

계산식

block element → own line, children one level deeper; inline content → one line, wrapped only at existing spaces; <pre>, <textarea> → copied exactly

HTML에서 줄바꿈은 공백으로 취급되므로, 두 인라인 태그 사이(예: <b>a</b><i>b</i>)에 줄바꿈을 넣으면 단어 사이에 눈에 보이는 공백이 생깁니다. 그래서 포매터는 브라우저가 공백을 무시하는 블록 요소 주위에만 줄바꿈을 넣고, 텍스트는 이미 공백이 있는 곳에서만 나눕니다. </li>나 </p>처럼 HTML에서 생략할 수 있는 닫는 태그는 추가하지 않습니다.

예시

샘플 페이지는 32줄로 나옵니다. <html>, <head>, <body>는 각각 한 줄에, <header>, <nav>, <main>은 그 아래로 들여쓰며, 할인 문단은 <strong>과 <time>이 인라인으로 들어간 채 한 줄로 유지됩니다. 두 목록 항목은 </li>를 만들어 넣지 않고 각각 한 줄에 놓이고, <pre> 블록은 그대로이며, 스크립트 본문은 중괄호에 맞춰 다시 들여써집니다.