HTML 라이브 에디터

HTML을 입력하면 실시간으로 미리보기합니다.

스크립트는 보안을 위해 실행되지 않습니다(미리보기는 HTML·CSS만).

태그 하나 확인하려고 파일을 만들고 저장하고 브라우저로 여는 과정이 번거로울 때가 있습니다. 표 구조가 맞는지, 스타일이 어떻게 먹는지만 보고 싶은 경우죠.

이 도구는 왼쪽에 HTML을 입력하면 오른쪽에 결과가 곧바로 그려집니다. 게시판 에디터에 붙일 코드나 메일 본문 HTML을 다듬어 볼 때 쓰기 좋습니다.

어떻게 계산되나요

왼쪽 입력창에 HTML을 씁니다. 타이핑하는 대로 오른쪽 미리보기가 갱신되므로 따로 실행 버튼을 누를 필요가 없습니다. 다 만든 코드는 [HTML 복사]로 가져가고, [초기화]로 입력창을 비웁니다.

미리보기는 격리된 프레임에서 그려지고 스크립트 실행이 막혀 있습니다. 남의 코드를 붙여 넣어도 안전한 대신, 동작 확인이 목적이라면 별도 환경이 필요합니다.

라이브 미리보기: 코드를 고치는 즉시 결과 화면이 다시 그려지는 방식. 저장·새로고침이 필요 없습니다.
iframe 샌드박스: 미리보기를 본문과 분리된 상자 안에서 그리는 방식. 붙여 넣은 코드가 이 페이지에 영향을 주지 못하게 막습니다.
인라인 스타일: `style="color:#1a56db"`처럼 태그에 직접 쓰는 스타일. 메일 본문처럼 외부 CSS를 못 쓰는 곳에서 주로 씁니다.
렌더링: 작성한 HTML 코드를 브라우저가 실제 화면 모양으로 그려 내는 과정입니다.

자바스크립트도 실행되나요?

실행되지 않습니다. 미리보기 프레임이 스크립트를 막아 두었기 때문입니다. HTML 구조와 CSS 스타일 확인용으로 쓰시고, 스크립트 동작 테스트는 로컬 파일이나 별도 코드 실행 환경을 이용하세요.

작성한 코드가 저장되나요?

저장되지 않습니다. 페이지를 새로고침하거나 닫으면 입력 내용이 사라지므로, [HTML 복사]로 미리 옮겨 두는 것이 안전합니다.

CSS는 어떻게 넣나요?

태그의 style 속성에 직접 쓰거나, 입력창 안에 `<style> … </style>` 블록을 넣으면 적용됩니다. 외부 CSS 파일 링크는 환경에 따라 불러오지 못할 수 있습니다.

이미지가 안 보여요.

이미지 주소가 https://로 시작하는 전체 주소인지, 외부에서 접근 가능한 이미지인지 확인해 보세요. 내 컴퓨터 안의 파일 경로는 표시되지 않습니다.

여기서 만든 코드를 블로그에 그대로 붙여도 되나요?

대체로 가능하지만 블로그·게시판 에디터가 일부 태그나 스타일을 걸러 낼 수 있습니다. 붙여 넣은 뒤 해당 서비스의 미리보기로 한 번 더 확인하는 것을 권합니다.