본문으로 건너뛰기
작업 데이터는 서버에 저장하지 않고, 내 브라우저에서 처리합니다.
tools
HTML·CSS·JavaScript 코드 플레이그라운드

HTML·CSS·JavaScript 코드 플레이그라운드

HTML, CSS, JavaScript를 편집해 sandbox iframe 미리보기와 콘솔을 확인하고 단일 HTML 파일로 저장합니다.

집중모드
미리보기

신뢰할 수 없는 코드나 비밀 값은 실행하지 마세요. 외부 리소스와 일반 네트워크 API는 제한되지만 iframe 자체의 페이지 이동은 완전한 보안 경계가 아닙니다.

콘솔
console.log 출력이 여기에 표시됩니다

주요 기능

  • HTML, CSS, JavaScript 전용 CodeMirror 편집기와 실시간 미리보기를 제공합니다.
  • 자동 실행 또는 수동 실행을 선택하고 console.log·info·warn·error와 런타임 오류를 표시합니다.
  • 현재 코드를 복사하거나 CSS와 JavaScript를 포함한 단일 HTML 파일로 다운로드합니다.
  • 미리보기는 allow-scripts만 허용한 iframe과 외부 리소스·일반 네트워크 API를 제한하는 CSP를 사용합니다.
  • 코드와 자동 실행 설정을 현재 브라우저의 로컬 저장소에 보관합니다.

사용 방법

  1. HTML, CSS, JS 탭에서 코드를 작성합니다.
  2. 자동 실행을 사용하거나 실행 버튼으로 미리보기와 콘솔을 확인합니다.
  3. 필요하면 전체 문서를 복사하거나 HTML 파일로 다운로드합니다.

활용 예시

  • 프런트엔드 아이디어 빠른 검증

    HTML 구조, CSS 스타일과 JavaScript 동작을 한 화면에서 수정하며 미리보기로 확인할 수 있습니다.

  • 작은 재현 예제 공유 준비

    콘솔 출력과 오류를 확인한 뒤 현재 CSS와 JavaScript를 포함한 단일 HTML 파일로 저장할 수 있습니다.

개인정보 보호

코드는 해당 브라우저의 로컬 저장소에 보관되고 미리보기는 브라우저 안의 sandbox iframe에서 실행됩니다.

사용 환경

외부 리소스와 일반 네트워크 API는 제한되지만 iframe 자체의 페이지 이동은 완전한 보안 경계가 아닙니다. 신뢰할 수 없는 코드나 비밀 값은 실행하지 마세요.

자주 묻는 질문

외부 CSS나 JavaScript 라이브러리를 불러올 수 있나요?
미리보기 CSP가 외부 리소스와 일반 네트워크 API를 제한하므로, 필요한 코드는 편집기에 직접 포함해야 합니다.
작성한 코드는 새로고침하면 사라지나요?
코드와 자동 실행 설정은 현재 브라우저의 로컬 저장소에 보관됩니다. 예제 복원이나 전체 지우기는 직접 선택할 수 있습니다.

관련 도구