본문으로 건너뛰기
yutils
예시

입력 (압축된 HTML)

<div class="card"><h2>yutils</h2><p>browser <strong>tools</strong></p></div>

출력 (포맷팅)

<div class="card">
  <h2>yutils</h2>
  <p>browser <strong>tools</strong></p>
</div>

참고

`<pre>` · `<code>` 블록 안의 내용은 보존됩니다. minify 모드도 토글 가능.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • 이메일 템플릿 · CMS export HTML 의 구조 보기 쉽게 정리
  • AI 가 생성한 한 줄 HTML 을 사람이 읽을 수 있는 형태로 펴기
  • Webpack · Vite 빌드 결과 HTML 의 압축 해제
  • 민감하지 않은 HTML 의 들여쓰기 통일 (PR 리뷰 가독성)
  • minify 모드로 prod 환경용 HTML 1차 압축

자주 묻는 질문

Q.HTML 의 내용을 바꾸나요?
A.아닙니다. 들여쓰기·줄바꿈만 조정합니다. 속성 순서·태그 이름·텍스트 콘텐츠는 그대로 유지.
Q.`<pre>` 안 코드는 어떻게 되나요?
A.`<pre>` · `<code>` · `<script>` · `<style>` 블록의 내부 콘텐츠는 그대로 보존됩니다 — 들여쓰기가 의미를 갖는 영역이라 자동 변경 X.
Q.HTML 이 잘못된 경우 어떻게 되나요?
A.포매터는 유효성 검증을 강제하지 않습니다. 닫는 태그 누락 같은 경우에도 best-effort 로 정리되지만 결과가 비정상일 수 있습니다.
재미있는 사실

  • HTML Tidy 는 1998년 HTML 4.0 명세 공동저자인 Dave Raggett (W3C) 가 만들었습니다 — '엉망인 HTML 을 표준에 맞게 자동 정리' 가 목적. 2015년 W3C 에서 SourceForge 로 이전한 후 tidy-html5 fork 가 modern HTML5 지원을 이어가고 있어요.

    HTML Tidy

  • Prettier 는 2017년 James Long 이 만든 opinionated formatter — 'code style 토론은 시간 낭비, 도구가 결정한다' 가 슬로건. 의도적으로 옵션을 최소화해 'bikeshedding' (자전거 색깔 같은 사소한 논쟁) 을 도구 차원에서 차단합니다.

    Prettier 0.0.10 release

  • HTML 의 boolean 속성 (`disabled`, `checked`, `required` 등) 은 값이 필요 없습니다 — `<input disabled>` 와 `<input disabled="disabled">` 가 같음. Formatter 마다 이걸 어떻게 박을지 다른데, Prettier 는 항상 짧은 형태 (`<input disabled>`) 사용. 단순함을 우선.

    WHATWG — Boolean attributes

관련 도구

이 카테고리 모든 도구 보기 →