사용 방법

입력 상자에 HTML을 붙여넣거나 .html 파일을 열거나 예제를 사용해 보세요.
들여쓰기된 읽기 쉬운 마크업을 원하면 ‘보기 좋게’를, 압축된 출력을 원하면 ‘압축’을 선택하세요.
보기 좋게 정리할 때 들여쓰기로 공백 2칸, 공백 4칸 또는 탭을 선택하고 주석을 유지할지 결정하세요.
결과를 복사하거나 .html 파일로 다운로드하세요.

작동 방식

포매터는 브라우저와 비슷하게 관대한 토크나이저로 HTML을 읽은 다음 다시 출력합니다. 입력을 렌더링하지 않으므로 붙여넣은 코드의 스크립트가 실행되지 않으며 웹에서 아무것도 로드되지 않습니다.

보기 좋게 정렬은 각 블록 수준 요소(div, p, ul, li, section, table 등)를 중첩 깊이에 따라 들여쓴 별도의 줄에 놓습니다. a, b, em, span, code, img, br 같은 텍스트 및 인라인 요소는 한 줄에 유지되므로 단어와 링크 사이의 공백이 렌더링된 페이지를 바꾸는 방식으로 변경되지 않습니다. 텍스트에 있는 연속된 공백과 줄바꿈은 하나의 공백이 되며, 이는 브라우저가 표시하는 방식과 같습니다.

pre, textarea, script, style 요소의 내용은 공백과 < 또는 > 문자를 포함하여 작성된 그대로 복사됩니다. br, img, input, meta, link와 같은 빈 요소에는 닫는 태그가 추가되지 않습니다. 인라인 SVG의 <path /> 같은 자체 닫기 태그는 자체 닫기 형태로 유지됩니다.

압축은 텍스트의 공백을 단일 공백으로 줄이고 블록 요소 주변의 공백을 제거하며 속성 사이의 공백을 정규화하고, “주석 유지”가 꺼져 있으면 주석을 제거합니다. 조건부 주석은 항상 유지됩니다.

이 도구는 잘못된 HTML 수정, 누락된 태그 추가, 속성 재정렬, style 및 script 요소 내부 CSS/JavaScript 압축을 수행하지 않습니다. 열린 채로 남은 요소는 부모 요소의 끝에서 닫히고, 일치하는 여는 태그가 없는 닫는 태그는 작성된 그대로 유지됩니다.

예시

생성된 마크업 읽기

CMS가 템플릿을 한 줄로 길게 출력합니다. 2칸 들여쓰기로 보기 좋게 정렬하면 nav, 목록 항목, 주요 콘텐츠가 들여쓴 트리로 표시되고, “Prices include <strong>VAT</strong>.”는 읽기 좋게 한 줄로 유지됩니다.

이메일 템플릿 준비

주석을 끄고 HTML 이메일을 압축하여 크기를 줄입니다. 가격 표가 있는 <pre> 블록과 인라인 <style>은 원래 그대로 유지됩니다.

구조 확인

닫는 </div>가 누락되면 정렬된 출력에서 다음 요소가 한 단계 더 깊게 들여쓰기되어, 요소가 어디에서 끝났어야 하는지 쉽게 확인할 수 있습니다.

자주 묻는 질문

보기 좋게 정리하면 페이지 모양이 바뀌나요?

거의 모든 경우에 그렇지 않습니다. 블록 요소 내부의 공백은 축소되고 줄바꿈으로 바뀌어 브라우저가 무시합니다. 텍스트와 인라인 요소는 같은 줄에 유지되며 pre, textarea, script, style은 건드리지 않습니다. 일반 요소에 CSS white-space: pre를 적용하는 페이지는 예외입니다.

페이지 내부의 CSS와 JavaScript를 압축하나요?

아니요. script와 style 내용은 작성된 그대로 유지되므로 손상되지 않습니다. 스타일시트를 별도로 압축하려면 CSS 포맷터를 사용하세요.

알 수 없는 출처의 HTML을 붙여넣어도 안전한가요?

네. 입력은 순전히 텍스트로만 처리되며 페이지에 삽입되지 않으므로 스크립트가 실행되지 않고 이미지나 링크도 로드되지 않습니다.

HTML 유효성을 검사하나요?

아니요. 일부러 관대하게 동작하며 잘못된 마크업을 거부하지 않고 정렬합니다. 짝이 맞지 않는 닫는 태그는 그대로 두어 들여쓰기로 쉽게 찾을 수 있지만 오류 목록은 제공하지 않습니다.

개인정보 보호

입력한 HTML은 브라우저에서만 처리되며 렌더링되거나 업로드되지 않습니다. 어떤 내용도 저장되거나 분석에 포함되지 않습니다.