💻 개발·코딩 유틸

HTML 라이브 에디터

HTML·CSS·JavaScript를 입력하면 오른쪽 미리보기가 실시간으로 갱신됩니다. 설치 없이 브라우저에서 코드를 작성하고, 사용자 코드는 샌드박스 iframe에서 격리 실행되어 안전하게 결과를 확인할 수 있습니다.

🗓️ 최종 업데이트 2026.06.16 ⏱️ 작업 시간 약 10초 🔒 브라우저에서만 처리 · 서버 전송 없음

HTML · CSS · JS · live preview

실시간 코드 미리보기

왼쪽 HTML·CSS·JS 입력창에 코드를 작성하면 오른쪽 미리보기가 즉시 갱신됩니다.

대기

HTML·CSS·JavaScript를 각 칸에 작성하면 오른쪽 미리보기가 실시간으로 갱신됩니다. 코드는 샌드박스 iframe에서 격리 실행되며 서버로 전송되지 않습니다.

HTML·CSS·JS 코드를 입력하세요.

HTML 마크업

CSS 스타일

JS 스크립트

👁️ 실시간 미리보기

입력 통계가 여기에 표시됩니다.

코드를 입력하면 오른쪽에 결과가 표시됩니다.

입력 HTML·CSS·JavaScript 3분할 코드 입력

안전 실행 샌드박스 iframe(allow-scripts)에서 사용자 코드 격리

처리 위치 서버 전송 없이 현재 브라우저에서 렌더링

HTML 라이브 에디터 사용 가이드

HTML 라이브 에디터는 HTML·CSS·JavaScript를 한 화면에서 작성하고 결과를 실시간으로 확인하는 온라인 코드 플레이그라운드입니다. 복잡한 개발 환경을 설치할 필요 없이 브라우저만 열면 곧바로 코드를 작성하고, 타이핑하는 순간 오른쪽 미리보기가 갱신됩니다. 코드를 저장하고 새로고침하는 반복 과정 없이 색상·여백·폰트를 미세 조정하거나 자바스크립트 로직을 즉시 검증할 수 있어 학습부터 빠른 스니펫 테스트까지 두루 활용됩니다.

무엇보다 이 에디터는 안전합니다. 사용자가 작성한 코드는 샌드박스 iframe(sandbox="allow-scripts") 안에서만 실행되어 이 페이지(호스트)와 격리됩니다. 입력한 코드는 서버로 전송하거나 저장하지 않으며 모든 렌더링이 현재 브라우저에서 이루어집니다. 페이지를 새로고침하면 작성 내용이 사라지므로 필요한 코드는 별도로 복사해 보관하세요.

이 도구가 필요한 경우

HTML 태그와 CSS·자바스크립트를 배우며 바로 실습하고 싶을 때
블로그·쇼핑몰의 서식·버튼·배너를 게시 전에 미리 만들어볼 때
CSS 애니메이션이나 자바스크립트 스니펫을 빠르게 검증할 때

주요 기능

HTML·CSS·JS 3분할 입력과 입력 즉시 갱신되는 미리보기
예제 코드 자동 입력과 '예제 불러오기' 복원
외부 CDN 라이브러리(Bootstrap·Tailwind 등) 테스트

사용 방법

HTML 칸에 마크업을 작성하거나 붙여넣습니다.
CSS 칸에 스타일 규칙을 입력합니다.
JS 칸에 자바스크립트 동작을 작성합니다.
오른쪽 미리보기에서 결과를 실시간으로 확인합니다.
'지우기'로 비우거나 '실행 / 예제'로 기본 예제를 다시 불러옵니다.

입력값HTML·CSS·JavaScript 코드 (브라우저에서만 처리)

출력값실시간 미리보기와 글자수·줄수 통계

실행 방식샌드박스 iframe(sandbox="allow-scripts")에서 격리 실행

외부 라이브러리CDN link·script 태그로 불러와 테스트 가능

처리 위치브라우저 로컬 처리 · 서버 전송 없음

샌드박스 격리 실행의 원리

이 에디터는 입력한 HTML·CSS·JS를 하나의 문서로 조립해 미리보기 iframe의 srcdoc 속성에 넣습니다. iframe에는 sandbox="allow-scripts"만 부여되어, 사용자 스크립트는 실행되지만 같은 출처(allow-same-origin)는 허용되지 않으므로 이 페이지의 쿠키·DOM·스토리지에 접근할 수 없습니다. 사용자 코드는 절대 호스트 페이지에서 직접 실행되지 않으며, 미리보기 안에서만 동작합니다.

출처와 검토 기준

이 도구는 외부 라이브러리나 서버에 의존하지 않고, 입력한 세 가지 코드를 표준 HTML 문서로 조립하는 자체 구현입니다. 무한 루프나 대용량 스크립트는 미리보기를 일시적으로 느리게 할 수 있으니 주의하세요. 문서 조립 로직은 2026-06-16에 검토했고 golden 테스트(HLE-001..006)로 조립 결과와 통계를 고정했습니다.

미리보기는 샌드박스 iframe에서 격리 실행되며, 외부 API·CORS가 필요한 요청은 브라우저 보안 정책에 따라 제한될 수 있습니다. 작성한 코드는 새로고침 시 사라지므로 필요한 부분은 복사해 보관하세요.

FAQ

외부 라이브러리(Bootstrap, Tailwind 등)를 사용할 수 있나요?

네. HTML 입력창에 link 또는 script 태그로 CDN 주소를 추가하면 Bootstrap, Tailwind CSS, jQuery 등 외부 라이브러리를 미리보기에서 불러와 테스트할 수 있습니다. 단, CORS가 필요한 일부 요청은 브라우저 보안 정책에 따라 제한될 수 있습니다.

작성한 코드가 서버로 전송되나요?

아니요. 입력한 코드는 서버로 전송하거나 저장하지 않으며, 모든 렌더링은 현재 브라우저 안의 샌드박스 iframe에서만 이루어집니다. 새로고침하면 작성 내용이 사라지므로, 필요한 코드는 별도로 복사해 보관하세요.

JavaScript의 console.log()나 alert()도 동작하나요?

네. 미리보기 iframe은 스크립트 실행이 허용되어 있어 JavaScript가 그대로 동작합니다. F12 개발자 도구의 콘솔 탭에서 console.log() 출력을 확인할 수 있고, alert()·이벤트 핸들러도 정상 실행됩니다.

코딩 초보자도 바로 쓸 수 있나요?

물론입니다. 페이지를 열면 예제 코드가 HTML·CSS·JS 칸에 미리 입력되어 있어, 구조를 참고하며 한 줄씩 수정해볼 수 있습니다. '예제 불러오기'를 누르면 언제든 기본 예제를 다시 불러올 수 있습니다.

모바일에서도 실시간 미리보기가 되나요?

네. 반응형 레이아웃으로 좁은 화면에서는 입력창과 미리보기가 위아래로 자동 배치됩니다. 터치 환경에서도 코드 작성과 결과 확인이 가능하므로 이동 중에도 간단한 코드 연습을 할 수 있습니다.