HTML이 실제로 렌더링되나요?

X. 본 도구는 입력을 단순 텍스트로 다루며 브라우저 렌더링·JavaScript 실행 모두 발생하지 않습니다. 신뢰할 수 없는 코드도 안전.

void 태그는 무엇인가요?

닫는 태그가 없는 HTML 요소: · · · · · · · · · · · · · .

JSX·Vue 템플릿도 정렬되나요?

기본 HTML 들여쓰기 패턴은 적용되지만 JSX 표현식({}) 또는 Vue 디렉티브(v-if·@click)의 정확한 정렬은 미보장. Prettier 사용 권장.

HTML 미리보기·정렬기

HTML 텍스트를 들여쓰기 정렬하고 태그·속성·잠재 문제를 분석합니다. 의도적으로 코드 실행 없이 안전하게 처리.

마지막 업데이트: 2026-05-10

태그

#개발 #텍스트 #HTML 정렬 #HTML 미리보기 #HTML 검증 #HTML 포맷터

입력

HTML 입력

결과

HTML 미리보기

⚡ sandbox 격리 — script 실행 X

총 태그 수 (여는 태그): 11개
닫는 태그 / Self-closing: 10 / 0
<script> · <style>: 0 / 0
<a> 링크 · <img> 이미지: 0 / 0

상세

정렬 결과: 정렬 결과
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>샘플</title> </head> <body> <h1>안녕하세요</h1> <p>본문 <strong>강조</strong>입니다.</p> <ul> <li>항목 1</li> <li>항목 2</li> </ul> </body> </html>

· 본 도구는 입력 HTML을 렌더링하지 않고 텍스트로만 처리합니다 — script·style 실행 X.
· 들여쓰기는 2칸 기준 (자동 정렬). void 태그(<br>·<img>·<meta>·<input>)는 단독 사용 인식.
· 태그 자동 닫기·attribute 정렬 등은 미지원 (단순 들여쓰기만).
· HTML이 정상 파싱되는지 정밀 검사하려면 W3C Markup Validator 권장.

외부 사이트에 임베드 (iframe 코드 복사)

블로그·기업 사이트에 이 계산기를 그대로 넣으세요. 무료, 회원가입 없음. 광고·헤더·푸터 없는 클린 UI 임베드.

iframe 높이 자동 조절 (권장)

<iframe
  src="https://thorkit.kr/embed/html-viewer/"
  width="100%"
  height="900"
  frameborder="0"
  style="border: 1px solid #e5e7eb; border-radius: 6px;"
  title="HTML 미리보기·정렬기 — ThorKit"
  loading="lazy"
></iframe>
<script>
  window.addEventListener("message", function(e) {
    if (e.origin !== "https://thorkit.kr") return;
    if (e.data && e.data.type === "thorkit:height") {
      var iframes = document.querySelectorAll('iframe[src*="https://thorkit.kr/embed/"]');
      iframes.forEach(function(f) { f.style.height = e.data.height + "px"; });
    }
  });
</script>

· height 700~1200 권장 (자동 조절 끄면 수동 조절 필요)· loading="lazy"로 페이지 속도 영향 최소

계산 근거

HTML 미리보기·정렬은 압축된 HTML이나 외부 시스템에서 받은 마크업을 가독성 있게 보기 위한 도구입니다.

본 도구는 입력 HTML을 절대 실행·렌더링하지 않고 텍스트로만 처리하므로 신뢰할 수 없는 HTML도 안전하게 분석할 수 있습니다.

복잡한 HTML5 검증·접근성 검사는 W3C Validator(validator.w3.org)·axe·Lighthouse 같은 전용 도구를 사용하세요.

자주 묻는 질문

HTML이 실제로 렌더링되나요?: X. 본 도구는 입력을 단순 텍스트로 다루며 브라우저 렌더링·JavaScript 실행 모두 발생하지 않습니다. 신뢰할 수 없는 코드도 안전.
void 태그는 무엇인가요?: 닫는 태그가 없는 HTML 요소: <area>·<base>·<br>·<col>·<embed>·<hr>·<img>·<input>·<link>·<meta>·<param>·<source>·<track>·<wbr>.
JSX·Vue 템플릿도 정렬되나요?: 기본 HTML 들여쓰기 패턴은 적용되지만 JSX 표현식({}) 또는 Vue 디렉티브(v-if·@click)의 정확한 정렬은 미보장. Prettier 사용 권장.

태그로 묶인 다른 콘텐츠

계산기·도표·가이드·부업 모두 포함 — 태그 공유도 높은 순

#개발 전체 →

</> 이 계산기를 다른 사이트에 임베드하기

아래 코드를 블로그·뉴스·기업 사이트의 HTML 영역에 붙여넣으면 이 계산기를 그대로 사용할 수 있습니다. 무료, 별도 신청 X.

<iframe
  src="https://thorkit.kr/embed/html-viewer/"
  width="100%"
  height="900"
  frameborder="0"
  style="border: 1px solid #e5e7eb;"
  title="HTML 미리보기·정렬기 — ThorKit(토르킷)"
  loading="lazy"
></iframe>

임베드 가이드 전체 보기 →

← 전체 계산기 목록

입력

결과

계산 근거

자주 묻는 질문

관련 계산기

태그로 묶인 다른 콘텐츠