HTML 정리 및 압축 - HTML을 온라인에서 무료로 포맷

어떤 HTML이든, 심지어 빌드 파이프라인에서 나온 한 줄짜리 압축 출력물이라도 붙여넣으면 도구가 적절한 들여쓰기, 한 줄에 태그 하나, 일관된 공백으로 다시 서식을 지정합니다. 2, 4 또는 8칸 들여쓰기를 선택하세요. 출력물은 편집기에 바로 넣거나 코드 리뷰 댓글에 붙여넣을 수 있습니다.

정렬 모드는 가독성을 위해 HTML을 펼칩니다. 태그를 각각의 줄에 배치하고, 중첩된 하위 요소를 들여쓰며, 섹션 사이의 빈 줄을 유지합니다. 압축 모드는 주석을 제거하고 연속된 공백을 줄이며 줄바꿈을 없애 파일을 더 적은 용량으로 만듭니다. 편집과 검토에는 정렬을, 프로덕션 배포에는 압축을 사용하세요.

아니요 — 내부 엔진인 js-beautify는 스크립트와 스타일 블록을 감지해 적절한 JS 또는 CSS 규칙으로 내용을 포맷하므로, 인라인 스크립트는 유효하게 유지되고 스타일시트는 가독성이 유지됩니다. 자체 닫기 태그, 빈 요소, 네임스페이스 속성(svg:xmlns, xlink:href)도 모두 올바르게 처리됩니다.

이 도구는 일반 HTML과 HTML 유사 템플릿을 잘 처리하지만, 순수 JSX(중괄호 표현식, 프래그먼트, 대문자로 시작하는 컴포넌트 태그)는 HTML로 파싱되어 사소한 외형상의 문제가 생길 수 있습니다. 프레임워크 전용 코드에는 사용하는 방언에 맞게 설정된 Prettier를 권장합니다. 순수 HTML, .htm, 템플릿 파일에는 저희 도구가 완벽합니다.

업로드가 전혀 발생하지 않습니다. 포매터는 js-beautify를 사용해 전적으로 브라우저에서 실행되므로, 내부 페이지 템플릿, 작성 중인 이메일, 개인 데이터가 포함된 HTML을 기기 밖으로 내보내지 않고 안전하게 붙여넣을 수 있습니다.

압축은 HTML 주석을 제거하고, 태그 사이의 연속된 공백을 하나의 공백으로 줄이며, 줄 바꿈을 없앱니다. 그 결과 렌더링은 동일하면서도 일반적으로 10~30% 더 작은 HTML이 만들어집니다. 서버의 gzip과 결합하면 콘텐츠가 많은 페이지의 초기 페이지 용량이 눈에 띄게 줄어듭니다.

예 — 다운로드를 클릭하면 정리된 결과물을 output.html로, 압축된 결과물을 output.min.html로 저장할 수 있습니다. 파일은 UTF-8로 인코딩되어 있어 영어, 키릴 문자, CJK, 오른쪽에서 왼쪽으로 쓰는 콘텐츠 모두에서 똑같이 잘 작동합니다.

이것은 브라우저에서만 작동하는 작은 유틸리티로, 호스팅 비용이 전혀 들지 않아 개발자 툴킷의 일부로 무료로 제공합니다. 광고도, 출력물에 대한 추적도 없으며, 브라우저가 메모리에 담을 수 있는 범위 외에는 파일 크기 제한도 없습니다.

Prettify 모드에서는 2, 4, 8칸 들여쓰기를 선택할 수 있습니다. 사용하는 편집기나 코드 스타일에 맞는 너비를 고른 뒤 결과를 복사하거나 output.html로 내려받으면 서식이 프로젝트에 그대로 적용됩니다.

들여쓰기 선택기(2, 4 또는 8칸)는 Prettify 모드에서만 적용됩니다. Minify는 의도적으로 모든 공백과 줄바꿈을 제거하므로 들여쓸 것이 남지 않기 때문입니다. 들여쓰기 너비가 다시 적용되게 하려면 Prettify로 되돌리세요.

붙여 넣거나 편집하는 동안 도구가 자동으로 구조 검사를 실행하여, 닫히지 않았거나 짝이 맞지 않거나 불필요한 닫는 태그를 출력 패널 바로 아래에 나열합니다 — 별도의 버튼이 필요 없습니다. 초록색 “구조적 문제 없음” 메시지는 마크업이 올바르게 구성되었음을 확인해 줍니다.

정리 모드를 2칸 들여쓰기로 사용하세요. 가장 일반적인 관례이며 diff를 간결하게 유지합니다. 그런 다음 구조 문제 패널을 확인해 닫히지 않은 태그가 남아 있지 않은지 점검하세요. 검토가 끝나면 프로덕션에 배포하기 전에 압축 모드로 전환해 여분의 공백을 다시 제거하세요.

네 — .html, .htm 또는 .xhtml 파일을 업로드 영역에 드래그하거나 클릭해서 찾아보면, 그 내용이 붙여 넣은 것과 똑같이 입력 상자에 바로 로드됩니다. 이후 Prettify, Minify, 들여쓰기 너비, 구조 검사기 모두 마크업이 파일에서 왔든 붙여넣기에서 왔든 동일하게 작동합니다.

네 — 출력물이 생기면 출력 패널과 기본 작업 영역 옆에 Copy 버튼이 나타납니다. 이를 클릭하면 현재 Prettify 또는 Minify 결과가 즉시 클립보드에 복사되므로(확인을 위해 잠깐 'Copied!'가 표시됨), 중간 .html 파일을 저장하지 않고도 편집기나 코드 리뷰 코멘트에 바로 붙여 넣을 수 있습니다.