사용 방법
- 편집기에 HTML, CSS와 JavaScript를 입력하세요.
- 자동 실행을 켜거나 실행을 눌러 미리보기를 갱신하세요.
- 콘솔에서 JavaScript 출력을 확인하세요.
- 필요하면 HTML 다운로드를 눌러 결과를 저장하세요.
옵션 설명
- 자동 실행
- 편집 내용이 바뀔 때 미리보기를 자동으로 실행해요.
- 샌드박스
- 코드는 이 사이트 데이터에 접근하지 않는 격리된 환경에서 실행돼요.
- 다운로드
- HTML, CSS와 JavaScript를 합친 하나의 HTML 파일을 다운로드해요.
페이지가 구성되는 방식
세 편집기의 내용은 다음 순서로 하나의 문서로 합쳐져요. HTML 다운로드를 눌렀을 때 받는 파일도 같은 구조인데, 콘솔 출력을 미리보기 아래 영역으로 보내는 작은 스크립트만 다운로드에서 빠져요.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>스크립트가 HTML 뒤에 오기 때문에 페이지가 로드되기를 기다리지 않고 바로 document.getElementById를 쓸 수 있어요. HTML 편집기에는 html, head, body 태그 자체가 아니라 body 안에 들어갈 내용만 쓰세요. 미리보기는 스크립트 실행 권한만 있는 iframe이라서 alert 대화상자와 이 사이트 쿠키에 대한 접근이 차단돼요.
자주 묻는 질문
코드가 업로드되나요?
아니요. 코드 실행과 미리보기는 브라우저에서 처리돼요.
JavaScript에서 document와 window를 사용할 수 있나요?
샌드박스는 DOM에 접근하지 않아요. fetch, 타이머, JSON과 Intl 같은 내장 기능은 사용할 수 있어요.
Tab 키로 포커스가 이동하지 않으면 어떻게 하나요?
편집기에서 Esc를 누른 뒤 Tab을 누르면 편집기 밖으로 포커스를 이동할 수 있어요.
개인정보 보호
이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.