Monu Tools

HTML 포맷터

HTML을 블록 인식 들여쓰기로 보기 좋게 만들거나 압축합니다. pre, textarea, script, style의 내용은 보존됩니다.

HTML 포맷터 사용 방법

  1. 01

    HTML을 입력 상자에 붙여넣으세요.

  2. 02

    보기 좋게를 선택하여 들여쓰거나 압축을 선택하여 압축하세요.

  3. 03

    들여쓰기 크기를 선택하고 결과를 복사하세요.

What the HTML formatter does

This is an HTML formatter that beautifies markup with block and inline aware indentation, or minifies it by collapsing whitespace and stripping comments. You pick the indent size when beautifying.

Beautifying indents elements according to how they nest, so the structure of a document, which elements contain which, becomes obvious. That makes hand-written or generated HTML far easier to read and debug.

Both beautify and minify run entirely in your browser, so your markup never leaves your device.

Elements it leaves untouched

It deliberately leaves the contents of pre, textarea, script and style untouched, because whitespace inside those elements is significant: reformatting them would change preformatted text, what users type, or the meaning of your code.

How minifying works

Minifying removes comments and collapses runs of whitespace, which trims the file size browsers have to download. It is most useful as a build step for production pages.

Why it keeps a space between tags

The minifier keeps a single space between tags rather than removing it entirely, because whitespace between inline elements is actually rendered, and dropping it can shift your layout. This caution avoids the subtle visual bugs aggressive minifiers can cause.

자주 묻는 질문

HTML 보기 좋게 만들기는 무엇을 하나요?

요소를 중첩 구조에 따라 들여쓰면서 공백이 중요한 pre, textarea, script, style의 내용은 그대로 유지합니다.

HTML 압축은 어떻게 작동하나요?

주석을 제거하고 공백을 단일 공백으로 축소합니다. 태그 사이의 단일 공백은 인라인 요소 사이의 공백이 렌더링되고 제거하면 레이아웃이 달라질 수 있기 때문에 유지됩니다.

HTML이 서버로 전송되나요?

아니요. 보기 좋게 만들기와 압축 모두 브라우저에서 완전히 실행되므로 마크업이 기기 밖으로 나가지 않습니다.

출처

이 도구 임베드하기

이 도구를 직접 운영하는 웹사이트에 추가하세요. 아래 코드를 복사하면 자동으로 최신 상태로 유지됩니다.

<iframe src="https://monu.tools/embed/ko/html-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

관련 도구