사용 방법

붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.

입력을 붙여넣기

CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.

도구 실행

변환 또는 실행을 누르세요. 결과가 바로 나타납니다.

출력 확인

생성된 코드와 노트를 사용 전에 확인하세요.

복사해서 사용

결과를 복사해 프로젝트에 붙여넣으세요.

이 도구 소개

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)

팁

화면이 지나치게 밋밋하다면 프레임이 불러오지 않는 외부 스타일시트에 의존한 조각일 수 있습니다.