HTML 포맷터 & 압축기
지저분한 HTML 정리 또는 프로덕션용 압축
로컬 실행
loading…
이 도구에 대해
번들러, 스크레이퍼, WYSIWYG 에디터에서 나온 HTML을 정리하세요. 요소는 선택한 폭으로 들여쓰이고, 속성은 제 줄에 머물며, pre/textarea의 내용은 바이트 단위로 그대로 유지됩니다. 압축 모드는 주석을 제거하고 태그 사이의 공백을 접습니다 — 손으로 쓴 페이지라면 보통 10–25%가 줄어듭니다.
여기서의 압축은 의도적으로 보수적입니다. 인라인 스크립트와 스타일은 보호되고, 조건부 주석은 살아남으며, 인라인 요소 사이의 단일 공백은 보존되어 "click <a>here</a> now"가 "clickherenow"로 붙어 버리지 않습니다. 최대한 공격적인 압축이 아니라 안전한 압축을 얻습니다.
두 작업 모두 브라우저에서 로컬로 실행됩니다 — 미공개 페이지와 내부 관리자 마크업은 기기를 벗어나지 않습니다.
자주 묻는 질문
- 압축이 인라인 JavaScript나 CSS를 망가뜨리나요?
- 아니요 — <script>, <style>, <pre>, <textarea> 블록은 공백 접기에서 완전히 제외됩니다. 태그 사이의 마크업만 건드립니다. 스크립트 자체를 압축하려면 JavaScript 압축기에 따로 통과시키세요.
- 태그 사이의 공백은 왜 제거해도 안전한가요?
- 대부분은 안전합니다. 블록 요소 사이의 공백은 시각적 효과가 없습니다. 인라인 요소 사이에서는 효과가 있는데, 그래서 압축기는 연속 공백을 삭제하는 대신 하나로 접습니다. inline-block 공백 핵에 의존하는 레이아웃이 눈으로 확인할 가치가 있는 드문 예외입니다.
- 포매터가 잘못된 HTML을 고쳐 주나요?
- HTML 명세에 대해 검증하지 않고 주어진 그대로 포맷합니다 — 닫히지 않은 태그는 닫히지 않은 채 남습니다. 브라우저는 태그 수프에 관대하므로, 포매팅만으로도 구조가 잘 드러나 문제를 찾는 데 충분히 도움이 됩니다.
- 들여쓰기 폭은 얼마로 해야 하나요?
- 2칸이 웹 코드베이스의 지배적 관례이고 대부분의 프레임워크 스타일 가이드가 기본값으로 삼는 값입니다. 팀이 4칸으로 표준화했다면 4칸으로 하세요 — 순전히 외관의 문제입니다.