HTML 뷰어
프레임에서 HTML 미리보기.
이 도구 소개
HTML 조각을 샌드박스가 적용된 iframe에 표시해 별도 파일 없이 구조를 확인할 수 있습니다. 스크립트는 격리되므로 이는 마크업 미리보기이며 애플리케이션 전체 실행은 아닙니다.
사용 방법
조각을 붙여넣고 미리보기를 실행한 뒤 프레임 내용을 확인하세요. 이메일 블록이나 정적 컴포넌트 초안을 몇 초 만에 살펴볼 때 편리합니다.
예제
예제는 인라인 스타일을 써서 바로 보이도록 했습니다.
입력
<article style="font-family:system-ui;padding:1rem">
<h1 style="margin:0 0 .5rem">Preview card</h1>
<p style="margin:0;color:#334155">Sandboxed HTML viewer example.</p>
</article>출력
(rendered in the preview frame)팁
화면이 지나치게 밋밋하다면 프레임이 불러오지 않는 외부 스타일시트에 의존한 조각일 수 있습니다.
알아 두면 좋은 점
미리보기에서 스크립트가 실행되나요?
아니요. 프레임은 스크립트 권한 없이 샌드박스되어 마크업과 CSS만 보여 줍니다. 동작은 실제 페이지에서 확인하세요.
미리보기에 Tailwind 클래스가 적용되나요?
기본적으로는 아닙니다. 프레임에 스타일시트가 없어서 컴파일된 CSS에 대한 <link>를 추가하거나 <style> 블록에 붙여넣기 전에는 유틸리티 클래스가 아무 일도 하지 않습니다. 스크립트가 차단되므로 Tailwind Play CDN 스크립트는 실행되지 않습니다.