HTML, CSS & JS 플레이그라운드

기능 소개

이 플레이그라운드는 프런트엔드 실험을 위한 작은 온라인 코드 에디터입니다. 구문 강조가 적용된 세 개의 탭에 HTML, CSS, JavaScript를 작성하면 입력하는 동안 미리보기가 갱신됩니다. CodePen이나 JSFiddle과 비슷하지만 계정이 필요 없습니다. 내장 콘솔이 console.log() 출력과 오류를 JavaScript의 줄 번호와 함께 보여주므로 개발자 도구를 열지 않고도 디버깅할 수 있습니다. 그래서 휴대폰이나 빌린 컴퓨터에서도 편리합니다.

CSS 레이아웃을 시험하거나, 동료에게 버그를 재현해 보여주거나, Stack Overflow에서 찾은 코드 조각을 테스트하거나, 초보자를 가르치거나, 빠른 프로토타입을 스케치할 때 사용하세요.

사용 방법

1. HTML, CSS, JS 탭에 코드를 입력하거나 예시를 눌러 작은 카운터 데모로 시작합니다. 탭에 점이 있으면 코드가 들어 있다는 뜻입니다.
2. 입력을 멈추고 0.6초가 지나면 미리보기가 자동으로 실행됩니다. 무거운 스크립트라면 자동 실행을 끄고, 준비가 되면 실행이나 Ctrl+Enter를 누릅니다.
3. 콘솔에서 로그, 경고, 오류를 확인합니다. 가장 최근 줄이 항상 맨 위에 표시됩니다. 객체, 배열, Map, Set, DOM 요소는 간결하고 읽기 쉬운 형태로 표시됩니다.
4. 공유로 다른 사람에게 코드를 보냅니다. ZIP 다운로드는 index.html, style.css, script.js를 별도 파일로 저장해 실제 프로젝트에 바로 쓸 수 있고, HTML 다운로드는 모든 내용을 어떤 브라우저에서든 열리는 index.html 파일 하나로 저장합니다.

코드는 이 브라우저에 보관되므로 다시 방문해도 그대로 남아 있습니다. Tab 키를 누르면 공백 두 칸으로 들여쓰기됩니다.

예시

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

클릭할 때마다 콘솔에 한 줄이 추가됩니다. 이름의 철자를 틀리면 콘솔에 빨간색 ReferenceError가 JS 탭에서 오류가 난 줄 번호와 함께 표시됩니다.

동작 원리

세 창의 내용은 하나의 HTML 문서로 합쳐져 sandbox 속성이 있는 iframe에 로드되므로 코드가 이 사이트의 쿠키나 저장소를 읽을 수 없습니다. 프레임에 추가된 작은 스크립트가 콘솔 호출과 처리되지 않은 오류를 페이지로 전달하며, 아무것도 기기 밖으로 나가지 않습니다.