HTML 뷰어

HTML 코드를 실시간으로 렌더링하고 미리보기하세요.

레이아웃:스크립트는 샌드박스로 실행되지 않습니다.

HTML 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

미리보기

이 도구 소개

HTML 뷰어는 HTML 코드를 작성하거나 붙여넣으면 브라우저에서 즉시 렌더링된 결과를 볼 수 있는 도구입니다. 미리보기는 스크립트가 비활성화된 샌드박스 iframe에 표시되므로 신뢰할 수 없는 소스의 HTML도 안전하게 미리볼 수 있습니다.

전체 HTML 문서(head, 인라인 CSS, style 블록 포함)와 HTML 프래그먼트 모두 지원합니다. 모든 처리는 브라우저에서 로컬로 이루어집니다.

사용 방법

왼쪽 코드 에디터에 HTML을 입력하거나 붙여넣으세요.
렌더 버튼을 클릭해 미리보기를 업데이트하세요.
상하 분할 레이아웃으로 전환해 더 넓은 미리보기를 확인하세요.
에디터에서 Tab 키를 사용해 들여쓰기를 할 수 있습니다.

활용 사례

프론트엔드 개발자의 HTML 스니펫 테스트, 이메일 개발자의 HTML 이메일 템플릿 미리보기, HTML을 배우는 학생의 학습, 코드 리뷰어의 렌더링 결과 확인 등에 활용하세요.

자주 묻는 질문

스크립트가 비활성화된 이유는? — 미리보기 iframe은 sandbox="allow-same-origin" 속성을 사용해 JavaScript 실행을 차단합니다. 이를 통해 알 수 없는 소스의 HTML도 안전하게 미리볼 수 있습니다.
CSS를 미리볼 수 있나요? — 네. HTML에 style 태그를 포함하거나 인라인 스타일을 사용하세요. 다른 도메인의 외부 스타일시트는 CSP에 의해 차단될 수 있습니다.
전체 HTML 문서를 지원하나요? — 네. DOCTYPE, head, body 태그를 포함한 완전한 HTML 문서를 붙여넣을 수 있습니다.