HTML 포맷 또는 압축
브라우저에서 실행되는 무료 온라인 HTML 포매터 및 압축기. HTML을 붙여넣으면 도구가 정리가 필요한지 (간결한 한 줄 입력 → 들여쓰기된 출력) 또는 압축이 필요한지 (들여쓰기된 입력 → 한 줄 출력) 감지하거나 수동으로 방향을 선택합니다. 2 공백, 4 공백 또는 탭으로 들여쓰기. void 요소 (br, hr, img, input, meta, link)는 XHTML 스타일로 자동 닫거나 HTML5 스타일로 그대로 둘 수 있습니다. <pre>, <script> 및 <style> 내부의 공백은 그대로 보존됩니다 — 절대 손대지 않습니다. 주석은 양방향에서 선택적으로 제거할 수 있습니다.
사용 방법
기본적으로 방향이 자동 감지됩니다.
2 공백은 대부분 프런트엔드 스타일 가이드의 표준입니다.
정리되거나 압축된 버전이 오른쪽에 나타납니다.
원클릭 클립보드 또는 .html로 저장.
브라우저에서 HTML 정리 또는 압축 — <pre>, <script>, <style> 내용을 그대로 보존
특징
일반적인 용도
- 복사-붙여넣기된 압축된 HTML 파일을 정리하여 구조 검사.
- 배포 전 HTML 이메일 템플릿 압축 — 모든 발송에서 바이트 절약.
- XML 엄격 파이프라인용으로 HTML5 void 요소를 XHTML 자동 닫기로 변환.
- production HTML 빌드에서 개발자 주석 제거.
- 수동으로 편집된 템플릿을 팀 컨벤션에 맞게 다시 들여쓰기.
왜 이것을
많은 브라우저 기반 포매터는 <pre> 또는 <script>의 내용을 망가뜨립니다 — 코드 스니펫을 그쪽으로 통과시키면 들여쓰기가 사라집니다. 이 도구는 원시 텍스트 요소(script, style, pre, textarea)를 인식하고 그 내용을 바이트 단위로 그대로 둡니다. 그 외 모든 것은 깔끔한 블록별 들여쓰기를 받습니다. 가입 없음, 파일별 할당량 없음.
자주 묻는 질문
"void 요소"란 무엇인가요?
닫는 태그와 내용이 없는 HTML 요소 — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. HTML5에서는 <br> (선호) 또는 <br /> (XHTML 레거시)로 작성할 수 있습니다. linter가 기대하는 것을 선택하세요.
<script> 또는 <style> 내용을 수정하나요?
아니요. <script>, <style>, <pre>, <textarea> 내부의 모든 것은 바이트 단위로 보존됩니다. 이러한 태그 주변의 공백 처리는 HTML5 원시 텍스트 요소 규칙을 따릅니다.
왜 압축된 출력에 여전히 공백이 있나요?
압축은 태그 간 공백을 축소하지만 의미적으로 중요한 곳에는 적어도 하나의 공백을 보존합니다(인라인 요소 사이, 예: <span> 또는 <a>) — 그 공백을 제거하면 렌더링된 페이지의 모습이 눈에 띄게 달라집니다. 공격적인 공백 제거가 필요하면 빌드 시점 압축기(html-minifier-terser, htmlnano)를 사용해 절충점을 조정하세요.
닫히지 않은 태그를 고치나요?
아니요 — 도구는 순수하게 포매터입니다. 닫히지 않은 <div>가 있으면 출력은 (망가진) 구조를 반영합니다. 구조 린트는 W3C Nu Validator와 같은 검증기를 사용하세요.
@{{ ... }} 또는 {% %}와 같은 템플릿 구문을 처리하나요?
대부분의 템플릿 토큰을 그대로 두려고 노력하지만 Blade ({{ }}), Twig ({% %}), Vue ({{ }}) 등이 이상하게 공백이 들어갈 수 있습니다. 무거운 보간이 있는 템플릿의 경우 렌더링된 HTML을 포맷하거나 템플릿 인식 도구를 사용하세요.
모바일?
네 — 좁은 화면에서 입력과 출력이 쌓입니다.
무료로 가능합니다! 아이디어를 간단히 보내주세요. 자세히 논의하고 싶으시면 이메일을 남겨주시면 연락드리겠습니다. 익명으로도 가능합니다.
