HTML 포맷터, 정리 도구 & 최소화

HTML 포맷팅이란 무엇인가요?

주요 기능

예시

<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>

<form action="/submit" method="post"><input type="email" name="email" required><button type="submit">Send</button></form>

<table><thead><tr><th>Name</th><th>Role</th></tr></thead><tbody><tr><td>Ada</td><td>Engineer</td></tr></tbody></table>

<svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

주요 사용 사례

생성된 마크업 정리

CMS나 빌더가 내보낸 HTML을 정리하여 읽고 편집할 수 있게 만드세요.

코드 리뷰

풀 리퀘스트 전에 마크업을 포맷하여 일관되고 비교하기 쉬운 템플릿을 만드세요.

더 작은 페이지 배포

프로덕션 HTML을 최소화하여 바이트를 줄이고 로드 시간을 개선하세요.

스니펫 검사

페이지에서 복사한 마크업을 붙여넣고 포맷하여 구조를 파악하세요.

기술 세부 정보

js-beautify로 정리

예측 가능하고 설정 가능한 들여쓰기를 위해 검증된 js-beautify HTML 엔진을 사용합니다.

CSSO + Terser로 최소화

공백을 축소하고 주석을 제거하며, 렌더링을 바꾸지 않고 인라인 CSS·JS도 최소화합니다.

브라우저 기반

완전히 클라이언트 측에서 실행됩니다. HTML은 기기를 벗어나거나 서버에 도달하지 않습니다.

모범 사례

소스는 포맷, 프로덕션은 최소화

저장소에는 읽기 쉬운 HTML을 유지하고, 빌드 단계에서만 최소화하세요.

들여쓰기 스타일 하나로 통일

깔끔한 diff를 위해 2칸·4칸·탭 중 하나를 합의하세요.

pre/textarea 공백 주의

최소화 시 pre·textarea 같은 공백 민감 요소가 영향을 받을 수 있으니 압축 후 확인하세요.

자주 묻는 질문