HTML 포매터: HTML 코드 정렬과 압축(Minify) 온라인 도구

HTML 포매터는 어디에 쓰나요

HTML은 읽기 힘든 상태로 손에 들어오는 경우가 많습니다. CMS에서 내보낸 페이지는 전체가 한 줄로 붙어 있고, 템플릿 엔진은 어색한 빈칸을 남기며, 브라우저의 페이지 소스 보기에서 복사하면 서버가 보낸 모양 그대로 따라옵니다. HTML 포매터는 들여쓰기를 새로 만들어 중첩된 요소가 부모보다 한 단계 안쪽에 오도록 하므로, 페이지 구조를 한눈에 볼 수 있습니다. HTML 코드 정리나 HTML 정렬이 필요할 때 바로 쓸 수 있습니다.

이 페이지는 브라우저에서 Prettier 3를 사용합니다. 마크업뿐 아니라 style 태그 안의 CSS와 script 태그 안의 JavaScript도 함께 정렬하므로, 페이지 전체가 한 번에 깔끔해집니다.

사용 방법

왼쪽 상자에 HTML을 붙여넣습니다. 붙여넣는 즉시 정렬이 시작됩니다.
또는 파일 열기를 눌러 .html 파일을 불러오거나, 예시를 눌러 예제를 시험해 봅니다.
들여쓰기를 고릅니다. 공백 2칸, 공백 4칸, 탭 중에서 선택합니다.
줄 너비를 정합니다. 속성이 많거나 텍스트가 긴 줄은 이 너비에서 줄이 바뀝니다.
공백 처리 모드를 고릅니다. CSS display 따르기, 무시, 엄격 중 하나이며, 기본값이 안전한 쪽입니다.
포맷을 누르거나 Ctrl+Enter를 누릅니다. 압축된 버전이 필요하면 압축(Minify) 버튼을 누릅니다.
복사를 누르거나, 다운로드를 눌러 .html 파일로 저장합니다.

포매터가 한 번 실행되면 입력하는 동안 결과가 갱신됩니다. 페이지 안의 script나 style 블록에 문법 오류가 있으면 그 블록은 작성한 그대로 두고 나머지 페이지만 정렬합니다. 오류를 찾으려면 해당 스크립트를 자바스크립트 포매터에 붙여넣으세요. 줄과 열을 알려 줍니다.

정렬 전과 후

한 줄짜리 HTML입니다.

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

공백 2칸으로 포맷한 결과입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

nav 안의 두 링크는 한 줄에 그대로 있습니다. 원본에서 둘 사이에 공백이 없었는데, 줄을 바꾸면 두 링크 사이에 눈에 보이는 간격이 생기기 때문입니다. 이것이 CSS display 따르기 모드가 하는 일입니다.

인라인 블록은 각자의 규칙으로 정렬됩니다.

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

공백 처리 옵션

HTML에서 두 인라인 요소 사이의 줄바꿈은 공백 한 칸으로 렌더링됩니다. 그래서 포매터는 조심해야 합니다. 다음은 같은 문단을 줄 너비 40으로 정렬한 결과입니다.

CSS display 따르기를 선택한 경우:

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

무시를 선택한 경우:

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

두 번째 버전은 깔끔해 보이지만, 이제 브라우저에는 쉼표와 마침표 앞에 공백이 보입니다. 무시는 눈으로 확인하는 이메일 템플릿이나 인라인 텍스트가 없는 XML 형태의 HTML처럼 이런 차이가 문제되지 않는 마크업에만 쓰세요.

HTML 압축하기

압축(Minify) 버튼은 페이지에 보이는 내용을 바꾸지 않고 크기를 줄입니다. 다음 입력은

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

이렇게 바뀝니다.

<div class="card"><p>Only <b>$5</b> today</p></div>

주석이 사라지고, 반복된 공백은 한 칸이 되며, div와 p 같은 블록 요소 옆의 공백은 없어집니다. 인라인 단어 사이의 공백은 지우면 단어가 붙어 버리므로 남겨 둡니다. pre, textarea, script 안의 내용은 건드리지 않고, style 태그 안의 CSS는 CSS 포매터와 같은 안전한 규칙으로 압축합니다.

한계

HTML은 너그러워서 닫는 태그가 빠져도 오류가 아닌 경우가 많습니다. <div><p>Hello</div>를 입력하면 문단이 자동으로 닫힌 <div><p>Hello</p></div>가 나옵니다. 결과를 살펴보면 잊어버린 태그를 찾을 수 있습니다.
포맷은 속성을 검증하거나, 접근성을 확인하거나, 잘못된 중첩을 고치지 않습니다. 그런 검사에는 W3C 검사기(W3C Validator)를 쓰세요.
Handlebars나 Jinja 같은 템플릿 문법은 파서를 혼란스럽게 할 수 있습니다. 렌더링된 HTML을 정렬하거나, 해당 템플릿 언어 전용 포매터를 쓰세요.

HTML을 정렬하는 다른 방법

VS Code에는 HTML 포매터가 내장되어 있습니다. Format Document(문서 서식)를 실행하세요. 단축키는 Windows에서 Shift+Alt+F, macOS에서 Shift+Option+F입니다. Prettier 확장을 쓰면 이 페이지와 같은 결과가 나옵니다.
명령줄: npx prettier --write index.html
브라우저 개발자 도구의 Elements(요소) 패널은 정렬된 DOM 트리를 보여 주지만, 그것은 스크립트가 실행된 뒤의 실제 페이지이지 원본 소스가 아닙니다.

페이지 내용을 HTML이 아니라 마크다운으로 받고 싶다면 HTML 마크다운 변환기를 이용하세요. 페이지 밖의 스크립트 파일은 자바스크립트 포매터에서 정렬할 수 있습니다.

HTML 포매터 자주 묻는 질문

HTML 포매터가 깨진 마크업을 고쳐 주나요?

아니요. HTML 파서는 브라우저처럼 너그럽기 때문에 닫는 태그가 빠져도 오류가 나지 않는 경우가 많습니다. 포매터는 자신이 이해한 구조를 그대로 출력합니다. 들여쓰기가 이상해 보인다면 보통 그 근처에 빠진 태그가 있다는 신호입니다.

공백 처리 옵션은 무엇을 하나요?

a, b, span 같은 인라인 요소 주변의 공백을 얼마나 조심스럽게 다룰지 정합니다. CSS display 따르기는 페이지가 보이는 모습을 그대로 지킵니다. 무시는 가장 깔끔한 배치를 만들지만 단어와 링크 사이에 보이는 공백이 생기거나 사라질 수 있습니다. 엄격은 모든 공백을 의미 있는 것으로 취급합니다.

이 도구로 HTML을 압축해도 안전한가요?

압축(Minify) 버튼은 보수적으로 동작합니다. 주석을 지우고, 연속된 공백을 한 칸으로 줄이며, 블록 요소 옆의 공백을 없앱니다. pre, textarea, script의 내용은 작성한 그대로 두고 조건부 주석도 유지합니다.

붙여넣은 HTML이 서버로 전송되나요?

아니요. 포맷은 브라우저 안에서 이루어집니다. 아무것도 업로드되지 않으며, 붙여넣은 HTML 속 스크립트도 실행하지 않습니다.

HTML 포매터: HTML 코드 정리와 압축