개발
HTML 미니파이어·포매터
HTML 코드를 압축(minify)하거나 보기 좋게 정렬(beautify)합니다. pre·code·script·style 안의 내용은 그대로 보존하므로 안심하고 쓸 수 있습니다.
입력
출력
사용 방법
- 왼쪽 입력창에 HTML 코드를 붙여넣습니다.
- 상단에서 Minify(압축) 또는 Beautify(정렬) 모드를 선택합니다.
- Minify 모드에서는 주석 제거, 빈 속성 제거, boolean 단축 옵션을 켜서 더 줄일 수 있습니다.
- Beautify 모드에서는 들여쓰기 단위(탭/2칸/4칸)와 한 줄당 1태그 여부를 선택합니다.
- 우측 상단에 표시되는 크기 변화·압축률을 확인하고 결과를 복사합니다.
주요 기능
- •Minify · Beautify 두 모드 즉시 변환
- •pre · code · textarea · script · style 내부 보존
- •주석 제거, 빈 속성 제거, boolean 속성 단축
- •들여쓰기 탭/2칸/4칸, 한 줄당 1태그 토글
- •입력·출력 크기 + 압축률 즉시 표시
- •브라우저에서만 처리 — 서버 전송 없음
HTML 미니파이어·포매터 자세히 알아보기
HTML 미니파이어는 빌드 도구가 없는 환경에서도 HTML 파일 크기를 빠르게 줄여주는 도구입니다. 이메일 HTML 템플릿, 단일 파일 정적 페이지, 워드프레스 위젯, 랜딩 페이지처럼 번들러를 거치지 않는 HTML을 그대로 압축할 때 유용합니다. 주석 제거와 태그 사이 공백 줄임만으로도 흔히 20~40% 가량의 크기 절감이 가능합니다. 본 도구의 핵심은 pre, code, textarea, script, style 태그 안의 내용을 절대 건드리지 않는다는 점입니다. 이 영역들은 처리 전에 placeholder로 보호한 뒤 마지막에 원본 그대로 복원하므로, 코드 예제의 들여쓰기나 자바스크립트 안의 줄바꿈이 망가지지 않습니다. 빈 속성 제거와 boolean 속성 단축(disabled="disabled" → disabled) 옵션도 함께 제공합니다.
이럴 때 사용하세요
- •이메일 HTML 템플릿을 압축해 메일 클라이언트 호환성·전송 크기 개선
- •단일 파일 정적 HTML 페이지의 첫 화면 로딩 속도 최적화
- •압축된 HTML 코드를 디버깅·코드 리뷰를 위해 다시 보기 좋게 풀기
- •워드프레스 위젯·커스텀 HTML 블록에 넣기 전에 줄바꿈 제거
- •공유받은 한 줄 HTML을 들여쓰기 있게 정렬해 구조 파악
HTML 미니파이어·포매터 자주 묻는 질문
pre·code 안의 공백·줄바꿈은 어떻게 처리되나요?
pre, code, textarea, script, style 태그 안의 내용은 처리 시작 전에 placeholder로 빼두었다가 모든 변환이 끝난 뒤 그대로 복원합니다. 즉, 코드 예제의 들여쓰기와 줄바꿈은 압축·정렬 어느 모드에서도 보존됩니다.
주석을 모두 보존하고 싶을 때는?
Minify 옵션의 "주석 제거"를 끄면 모든 일반 주석(<!-- ... -->)이 그대로 남습니다. 또한 IE 조건부 주석(<!--[if ...]> ... <![endif]-->)은 옵션과 무관하게 항상 보존됩니다.
script·style 태그 안의 JS·CSS도 같이 압축되나요?
아니요. 본 도구는 HTML 구조만 처리하며 script·style 내부 코드는 일절 변형하지 않습니다. 자바스크립트나 CSS도 압축하고 싶다면 utilbox의 CSS 미니파이어로 따로 처리한 뒤 다시 붙여넣어 주세요.
압축률은 일반적으로 얼마나 되나요?
일반적으로 주석·줄바꿈·태그 사이 공백만 정리해도 20~40% 정도 줄어듭니다. 손으로 들여쓰기를 많이 사용한 정적 HTML일수록 절감 폭이 크고, 이미 한 줄로 작성된 템플릿이라면 변화가 적습니다.
Sass·JSX·Vue·Svelte 같은 비표준 문법도 처리되나요?
본 도구는 표준 HTML을 대상으로 합니다. JSX(`{expr}`), Vue 디렉티브(`v-if`), Svelte(`{#if}`) 같은 문법은 평문으로 통과되거나 일부 표현이 어색해질 수 있으니, 빌드된 HTML을 입력해 주세요.