HTML 미리보기 & 포맷터

HTML 코드를 붙여넣으면 오른쪽에서 실시간으로 렌더링된 결과를 확인하고, 보기 좋게 정렬하거나 압축할 수 있습니다. 서버로 전송하지 않고 브라우저 안에서만 처리됩니다.

입력 (HTML)

🔒 미리보기는 격리된 샌드박스(iframe)에서 실행되어 스크립트가 상위 페이지에 접근하거나 이동시킬 수 없습니다. 다만 "새 탭에서 열기"는 브라우저의 일반 탭에서 그대로 여는 것이라 이 제한이 적용되지 않으니, 신뢰할 수 있는 HTML만 여세요.

🔗 링크 공유는 입력한 HTML 원문을 링크 자체(주소창의 # 뒤)에 그대로 담습니다. 서버로 전송되지는 않지만, 링크를 받은 사람은 내용을 볼 수 있으니 민감한 데이터는 공유하지 마세요.

AD

이 배너는 쿠팡 파트너스 활동의 일환으로 게재되며, 이에 따른 일정액의 수수료를 제공받습니다.

사용 방법

  1. 입력: 좌측 입력창에 HTML 텍스트를 붙여넣거나, "파일 열기"로 .html/.htm 파일을 업로드하거나, 파일을 화면에 끌어다 놓으세요.
  2. 실시간 미리보기: 타이핑하는 즉시 우측 "미리보기" 탭에 렌더링 결과가 반영됩니다. CSS와 JavaScript도 격리된 샌드박스 안에서 그대로 동작합니다.
  3. 뷰포트 크기 전환: 💻/📟/📱 버튼으로 데스크톱·태블릿(768px)·모바일(375px) 너비에서 반응형 레이아웃이 어떻게 보이는지 확인하세요.
  4. 포맷 / 압축: 상단 버튼으로 들여쓰기를 정리(Beautify)하거나 불필요한 공백을 제거(Minify)하고, "코드 보기" 탭에서 결과를 확인하세요.
  5. 내보내기: 결과를 클립보드로 복사하거나 .html 파일로 다운로드하고, "새 탭에서 열기"로 브라우저 전체 화면에서도 확인할 수 있습니다.

모든 렌더링과 처리는 브라우저 내부(JavaScript)에서만 이루어지며, 입력한 데이터는 서버로 전송되거나 저장되지 않습니다.

이 도구는 HTML을 어떻게 처리하나요?

XML과 달리 HTML은 "well-formed"가 아니어도 대부분의 브라우저가 알아서 보정해서 렌더링합니다. 이 도구도 마찬가지로 브라우저 내장 HTML 파서(DOMParser)를 그대로 사용하기 때문에 별도의 검증(validate) 기능은 제공하지 않습니다 — 태그를 닫지 않거나 속성 따옴표를 빠뜨려도 실제 브라우저가 처리하는 방식 그대로 미리보기와 포맷 결과에 반영됩니다. 미리보기는 입력한 원문을 그대로 <iframe>의 srcdoc에 넣어 렌더링하고, "포맷"과 "압축"은 브라우저가 해석한 DOM 구조를 다시 들여쓴/압축한 텍스트로 직렬화합니다.

자주 묻는 질문

입력한 HTML 데이터가 외부로 전송되나요?

아니요. 모든 렌더링과 포맷팅은 브라우저 안에서 JavaScript로만 처리되며 서버로 전송되지 않습니다.

미리보기에서 실행되는 스크립트는 안전한가요?

미리보기는 allow-same-origin 없는 샌드박스 iframe에서 실행됩니다. 즉 스크립트가 동작은 하지만 이 사이트의 쿠키·localStorage에 접근하거나 상위 페이지를 이동시킬 수 없습니다. 다만 "새 탭에서 열기"는 일반 브라우저 탭으로 그대로 여는 기능이라 이 제한이 적용되지 않으므로, 출처를 모르는 HTML은 새 탭에서 열지 마세요.

상대 경로의 이미지나 CSS/JS 파일도 미리보기에 나오나요?

네트워크로 접근 가능한 절대 URL(https://...)은 정상적으로 불러옵니다. 하지만 로컬 컴퓨터의 상대 경로 파일(./style.css, ../img/logo.png 등)은 브라우저 보안 정책상 이 페이지에서 직접 읽어올 수 없어 미리보기에 나타나지 않습니다. 로컬 파일까지 확인하려면 python -m http.server 같은 로컬 서버를 띄워 직접 열어보세요.

포맷(정렬) 결과가 원본과 조금 달라지는 이유는 무엇인가요?

포맷은 브라우저의 실제 HTML 파서를 거친 결과를 다시 직렬화합니다. 그 과정에서 태그/속성 이름이 소문자로 바뀌거나, 닫히지 않은 태그가 자동으로 닫히거나, 잘못 중첩된 태그가 보정되는 등 실제 브라우저가 그 HTML을 어떻게 해석하는지가 그대로 드러납니다. 오히려 "브라우저가 실제로 이렇게 이해하는구나"를 확인하는 데 유용합니다.

<script>나 <style> 안의 코드도 다시 정렬되나요?

아니요. 태그 내부의 JavaScript/CSS 코드는 문법이 깨지지 않도록 원문 그대로 보존하며, 감싸는 태그의 들여쓰기만 조정합니다. <pre>와 <textarea> 내용도 공백이 의미를 가지므로 그대로 유지합니다.

큰 HTML 문서도 처리할 수 있나요?

브라우저 메모리 범위 내에서는 수 MB 크기의 HTML도 처리할 수 있습니다. 다만 이미지가 많거나 무거운 스크립트가 포함된 페이지는 미리보기 렌더링 자체가 느려질 수 있는데, 이는 이 도구가 아니라 브라우저가 해당 페이지를 렌더링하는 속도에 달려 있습니다.

관련 도구