HTML 미리보기
HTML/CSS/JavaScript를 실시간으로 미리봅니다
이메일 템플릿 조각이나 CSS 실험처럼 파일을 만들기 아까운 코드를 붙여넣고 실행 버튼 한 번으로 결과 화면을 확인하는 놀이터입니다. 자동 실행을 켜면 타이핑을 멈춘 뒤 0.3초 만에 미리보기가 갱신되고, 끄면 실행 버튼을 누를 때만 다시 그려서 긴 코드를 편집할 때 화면이 덜 흔들립니다. 결과는 allow-scripts·allow-modals 만 허용한 sandbox iframe 안에서 돌아가므로 alert 같은 대화상자는 뜨지만 부모 페이지나 쿠키에는 손을 댈 수 없습니다. 초기화를 누르면 그라데이션 카드 샘플로 돌아와 처음부터 다시 시작할 수 있습니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
HTML 미리보기, 이렇게 쓰세요
HTML·CSS·JS 를 입력하면 격리된 미리보기 프레임에서 즉시 실행 결과를 보여 줍니다.
이메일 템플릿이나 짧은 컴포넌트를 빠르게 테스트하거나, 외부 코드 조각을 붙여넣어 결과를 확인할 때 씁니다.
미리보기는 샌드박스 iframe 에서 돌아가 외부 네트워크 요청이 제한될 수 있습니다. 로컬 파일 경로 이미지는 표시되지 않습니다.
관련 도구
자주 묻는 질문
Q. 외부 CSS 라이브러리를 불러올 수 있나요?
CDN 링크 태그를 HTML 에 넣으면 대부분 로드됩니다. 차단되는 경우 인라인으로 붙여넣으세요.
Q. 자동 실행을 켰는데 미리보기가 바로 안 바뀌어요.
입력이 멈춘 뒤 약 0.3초 후에 갱신되도록 디바운스가 걸려 있습니다. 즉시 반영하려면 실행 버튼을 누르세요.
Q. 미리보기 안에서 폼 제출이나 새 창 열기가 안 됩니다.
iframe 에 allow-scripts 와 allow-modals 만 허용해 폼 전송, 새 창, 상위 창 접근은 막혀 있습니다. 그런 동작까지 시험하려면 로컬 HTML 파일로 저장해 열어 보세요.