원본 HTML
옵션
포맷된 HTML
도구 소개
이 도구는 필요에 따라 HTML 코드를 포맷하거나 압축합니다. Beautify 모드는 중첩된 요소를 읽기 쉽게 적절한 들여쓰기와 줄 바꿈을 추가합니다. Minify 모드는 공백과 선택적 문자를 제거하여 파일 크기를 줄입니다. 검증기는 닫히지 않은 태그나 불일치 요소 같은 일반적인 문제를 페이지가 손상되기 전에 감지합니다. 압축 시 인라인 CSS와 JavaScript도 압축됩니다. 모든 것이 브라우저에서 실행되며 서버로 전송되지 않습니다.
사용 방법
- HTML을 붙여넣거나 파일 업로드
- 들여쓰기 포맷은 Beautify, 압축은 Minify 선택
- 설정 조정: 들여쓰기 크기(2/4 공백 또는 탭), 주석 제거, 인라인 CSS/JS 압축
- 입력이나 설정 변경에 따라 출력이 자동 업데이트
- 결과를 복사하거나 파일로 다운로드
일반적인 사용 사례
- 벤더 HTML 디버깅: CMS나 빌드 도구에서 한 줄 코드를 받았나요? 포맷하여 내용 확인
- 프로덕션 최적화: 배포 전 HTML 15-30% 감소
- 코드 리뷰: HTML을 일관되게 포맷하여 diff가 실제 변경만 표시
- HTML 학습: 복잡한 마크업을 붙여넣고 포맷하여 구조 이해
- 이메일 템플릿: HTML 이메일을 압축하여 크기 제한 준수
제한 사항
- 구문 기반 포매터로 완전한 HTML 파서가 아닙니다—CDATA 섹션이나 서버 사이드 인클루드 같은 엣지 케이스는 완벽하게 포맷되지 않을 수 있습니다
- 검증기는 구조적 문제(닫히지 않은 태그)를 감지하지만 HTML5 사양 준수는 검증하지 않습니다
- 매우 큰 파일(5MB+)은 브라우저를 느리게 할 수 있습니다
- pre/code/textarea의 공백은 beautify 모드에서 유지되지만 minify 모드에서 축소될 수 있습니다—수동 확인 필요
- 템플릿 구문(Jinja, Handlebars, Blade)은 검증 경고를 일으킬 수 있습니다