ZeroTool Workbench
HTML 압축·정렬 도구
무료 HTML 압축·정렬 도구. 주석·공백 제거와 재들여쓰기를 브라우저에서 즉시 처리합니다. 업로드 없음, 가입 없음.
사용 방법
- HTML(조각 또는 doctype 포함 완전 문서)을 입력 패널에 붙여넣습니다.
- 압축 으로 주석을 제거하고 공백을 축소하거나, 정렬 으로 재들여쓰기 합니다.
- 정렬 시 들여쓰기 너비를 2 칸, 4 칸, Tab 중에서 선택할 수 있습니다.
- 압축 후 상태 표시줄에 절감 정보(예:
12.4 KB → 8.1 KB (−34.6%))가 표시됩니다. - 출력 패널의 복사 버튼으로 결과를 가져갈 수 있습니다.
예시
압축 전
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 페이지 메타 정보 -->
<title>안녕하세요</title>
</head>
<body>
<h1>Hello World</h1>
<p>굵게 <strong>강조</strong> 한 문장.</p>
</body>
</html>압축 후
<!doctype html><html lang="ko"><head><title>안녕하세요</title></head><body><h1>Hello World</h1><p>굵게 <strong>강조</strong> 한 문장.</p></body></html>압축 대상
- 태그 사이의 공백(inter-tag whitespace)을 축소합니다.
- HTML 주석은 제거됩니다 — IE 조건부 주석(
<!—[if IE]>)은 보존됩니다. disabled=""와 같은 boolean 속성은disabled로 단순화됩니다.- 텍스트 노드의 앞뒤 공백을 잘라내고 내부 연속 공백은 단일 공백으로 압축합니다.
그대로 보존되는 항목
<script>,<style>,<pre>,<textarea>,<code>,<samp>,<kbd>안의 내용.- 속성 값(따옴표 내부의 공백, 인라인 이벤트 핸들러 포함).
<!DOCTYPE>선언.
HTML 을 수동으로 압축해야 할 때
최신 빌드 체인(Vite, Webpack, Astro, Next.js)은 번들 단계에서 HTML 을 자동으로 압축합니다. 이 도구는 1 회성 작업에 적합합니다 — CMS 에서 내보낸 코드, 압축 전후 크기 비교, 수작업 템플릿 점검 등. 정렬 기능은 일상적으로 사용할 수 있으며, 프로덕션 환경의 한 줄짜리 HTML 을 붙여넣어 디버깅이나 diff 를 위한 가독 가능한 사본을 얻을 수 있습니다.
FAQ
<script> 와 <style> 안의 JavaScript / CSS 가 깨지지 않나요?
깨지지 않습니다. 인라인 스크립트와 스타일 블록은 그대로 보존됩니다. 압축은 태그 사이 구조적 공백과 <script>/<style> 외부의 HTML 주석만 대상으로 합니다.
HTML 이 어딘가로 업로드되나요?
업로드되지 않습니다. 네이티브 DOMParser API 로 브라우저 내부에서만 처리되며 마크업이 기기를 벗어나지 않습니다. 서버 통신도 없습니다.
압축으로 얼마나 줄일 수 있나요?
들여쓰기 깊이와 주석 양에 따라 다르지만 일반적인 HTML 은 15~40% 줄어듭니다. 압축 후 상태 표시줄에 원본 크기, 출력 크기, 절감률이 표시됩니다.
정렬은 에디터의 포맷 기능과 어떻게 다른가요?
정렬은 HTML 을 처음부터 다시 파싱하고 계층에 따라 들여쓰기를 새로 적용합니다. CMS / 템플릿 엔진에서 내보낸 일관되지 않은 마크업 정리, 한 줄로 압축된 HTML 펼치기, 디버깅 / diff 전 처리에 적합합니다.
doctype, 속성 값, 인라인 이벤트 핸들러가 그대로 유지되나요?
예. doctype, 모든 속성 값, boolean 속성, onclick / onload 같은 인라인 핸들러는 그대로 유지됩니다. IE 조건부 주석은 다른 주석이 제거될 때도 보존됩니다.