HTML 압축 및 정렬 도구
프로덕션을 위해 HTML을 압축하거나 가독성을 위해 정렬 (100% 클라이언트 측 처리)
미리보기는 보안을 위해 샌드박스 iframe에서 렌더링됩니다. 일부 기능이 제한될 수 있습니다.
HTML 압축기 및 포맷터 문서
이 도구는 무엇인가요?
HTML 압축은 렌더링에 영향 없는 문자를 제거합니다: 태그 간 공백, HTML 주석(<!-- -->), 선택적 닫기 태그(HTML5의 </li>/<td>/<p>), 부울 속성값(disabled=“disabled” → disabled). <pre>/<textarea>/<script>/<style>의 내용은 보존됩니다.
주요 기능
- 공백 및 주석 제거: 블록 태그 간 공백 축소, <!-- --> 제거. <pre>/<code>/<textarea>는 유지.
- 선택적 닫기 태그 제거(HTML5): HTML5 파싱이 허용하는 곳에서 </li>/<p>/<tr>/<td> 생략(DOM 불변).
- 부울 속성 압축: selected=“selected” → selected 등 HTML5 명세에 따라.
- 설정 가능한 미화기: 2/4칸 또는 탭 들여쓰기, 블록/인라인 구분, <pre>/<code> 원문 보존.
- 속성 따옴표 정규화: 값에 공백이나 특수문자가 없으면 따옴표 제거.
- 파일 크기 변화 표시: 원본/압축 바이트 수와 압축률.
일반적인 사용 사례
- SSR 최적화: PHP/Django/Rails/Node.js HTML 출력을 전송 전 압축; 10-30% 감소.
- 정적 사이트 생성기 후처리: Jekyll/Hugo/Eleventy/Next.js; Brotli와 결합 85-95% 감소.
- 압축 HTML 디버깅: view-source나 API 응답을 미화하여 구조·메타데이터 확인.
- 템플릿 감사: CMS 자동생성 HTML 재형식화로 ARIA·제목 계층 검토.
미화 기능의 조정 항목
평탄하거나 불일치한 들여쓰기의 HTML에서 적절한 계층을 재구성. 블록/인라인 구분, <pre>/<code> 원문 보존.
- 설정 가능한 들여쓰기: 2칸, 4칸 또는 탭
- 블록 요소는 새 줄에; 인라인 요소는 같은 줄에
- <pre>/<code>/<textarea> 내용 원문 보존
- 모든 속성에 일관된 쌍따옴표
축소 기능의 조정 항목
공백 축소·주석 제거·선택적 태그·부울 속성·따옴표 각 패스별 제어 가능.
- 태그 간 공백을 하나로 축소, 블록 경계에서 제거
- HTML 주석 제거 (IE 조건부 주석 보존 옵션)
- 규범 안전한 선택적 HTML5 닫기 태그 생략
- 부울 속성 나체 형식으로
- 특수문자 없는 속성 따옴표 제거
파일 크기 영향 예측
표준 콘텐츠 10-30% 감소. 마크업 밀집 페이지 20-40%. Brotli 추가 시 85-95% 감소.
관련 도구
CSS 축소기 및 정렬기
CSS 코드를 압축하거나 정렬하고, 공백 및 주석을 제거하여 파일 크기를 최적화하거나 가독성을 위해 코드를 포맷합니다
JavaScript 축소기 및 정렬기
JavaScript 코드를 압축하거나 정렬하고, 공백 및 주석을 제거하여 파일 크기를 최적화하거나 가독성을 위해 코드를 포맷합니다
HTML 인코더/디코더
XSS 공격을 방지하기 위해 명명된, 십진수 및 16진수 형식으로 특수 문자를 HTML 엔티티로 변환합니다
XML 포맷터
구문 강조 표시를 사용하여 XML 데이터를 포맷하고 검증합니다
JSON 포맷터
가독성 및 디버깅 향상을 위해 JSON 데이터를 포맷하고 검증합니다
텍스트 차이 검사기
나란히 강조 표시된 보기로 두 텍스트 또는 파일 간의 차이를 비교합니다