💻 개발·코딩 유틸

HTML 라이브 에디터

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

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

HTML · CSS · JS · live preview

실시간 코드 미리보기

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

대기

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

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

HTML 마크업

CSS 스타일

JS 스크립트

👁️ 실시간 미리보기

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

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

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

격리 실행 샌드박스 iframe에서 코드 격리, 스크립트·대화상자 허용

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

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

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

사용자가 작성한 코드는 샌드박스 iframe에서 실행되어 이 페이지(호스트)와 격리됩니다. 에디터 자체는 입력 코드를 Toolvil 서버로 전송하거나 저장하지 않습니다. 다만 외부 URL·라이브러리나 작성한 스크립트는 네트워크 요청을 할 수 있으므로 코드에 포함한 주소와 동작을 확인하세요. 새로고침하면 작성 내용이 사라지니 필요한 코드는 복사하거나 파일로 보관하세요.

이 도구가 필요한 경우

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

주요 기능

HTML·CSS·JS 3분할 입력과 입력 즉시 갱신되는 미리보기
예제 불러오기, 전체 HTML 복사, .html 다운로드
외부 CDN 라이브러리(Bootstrap·Tailwind 등) 테스트

사용 전 확인

새로고침하면 작성 코드가 사라지므로 필요한 내용은 복사하거나 HTML 파일로 보관하세요.
외부 URL·라이브러리·스크립트를 넣으면 네트워크 요청이 발생할 수 있으니 주소와 코드를 확인하세요.
이 도구는 브라우저의 HTML·CSS·JavaScript를 실행합니다. 서버 언어나 비밀키가 필요한 코드는 입력하지 마세요.

사용 방법

HTML 칸에 마크업을 작성하거나 붙여넣습니다.
CSS 칸에 스타일 규칙을 입력합니다.
JS 칸에 자바스크립트 동작을 작성합니다.
오른쪽 미리보기에서 결과를 실시간으로 확인합니다.
'실행'으로 미리보기를 강제로 새로고침하고, 필요한 경우 '예제 불러오기'로 기본 코드를 복원합니다.

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

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

실행 방식샌드박스 iframe(allow-scripts, allow-modals)에서 격리 실행

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

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

샌드박스 격리 실행의 원리

이 에디터는 입력한 HTML·CSS·JS를 하나의 문서로 조립해 미리보기 iframe의 srcdoc 속성에 넣습니다. sandbox의 allow-scripts와 allow-modals로 스크립트와 alert 같은 대화상자를 허용합니다. allow-same-origin은 부여하지 않아 이 페이지의 쿠키·DOM·스토리지와 격리합니다. 사용자 코드는 호스트 페이지에서 직접 실행되지 않으며 미리보기 안에서 동작합니다.

출처와 검토 기준

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

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

FAQ

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

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

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

에디터 자체는 입력 코드를 Toolvil 서버로 전송하거나 저장하지 않습니다. 미리보기는 현재 브라우저의 샌드박스 iframe에서 실행되지만, 코드에 넣은 외부 URL이나 스크립트는 네트워크 요청을 할 수 있습니다. 새로고침하면 작성 내용이 사라지므로 필요한 코드는 복사하거나 HTML 파일로 보관하세요.

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

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

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

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

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

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