HTML 편집기 (실시간 미리보기)
왼쪽에 코드를 쓰면 오른쪽에 결과가 바로 그려져요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
Tab 키는 들여쓰기(공백 2칸)예요. 다음 칸으로 가려면 Esc 를 누른 뒤 Tab 을 누르세요.
미리보기
사용 방법
- 왼쪽 칸에 HTML 을 쓰세요. <style> 의 CSS 와 <script> 의 자바스크립트도 함께 실행돼요.
- 「쓰는 대로 자동 반영」이 켜져 있으면 잠시 멈출 때마다 미리보기가 다시 그려져요. 무거운 코드라면 끄고 「새로 그리기」를 누르세요.
- 「미리보기 폭」을 휴대폰·태블릿으로 바꿔 반응형 화면을 확인하세요.
- 다 쓴 코드는 「내려받기」로 index.html 파일로 저장하거나 「복사」로 가져가세요.
자주 묻는 질문
미리보기 안의 스크립트는 안전한가요?
미리보기는 샌드박스 iframe(allow-scripts 만 허용)에서 돌아 이 사이트의 쿠키·저장소에 닿지 못하고 팝업·폼 전송도 막힙니다. 그래도 출처를 모르는 코드는 붙여 넣지 마세요.
쓴 코드가 저장되나요?
아니요. 페이지를 닫거나 새로 고치면 사라집니다. 서버에도 보내지 않으니 남기려면 꼭 내려받거나 복사해 두세요.
외부 CSS·JS 파일이나 이미지를 불러올 수 있나요?
https 주소로 된 파일은 <link>·<script src>·<img> 로 불러올 수 있습니다. 내 컴퓨터의 파일 경로는 브라우저가 막아서 쓸 수 없어요.