HTML 플레이그라운드 사용하기

단계

1. 시작 템플릿에서 시작하거나 예제 프로젝트를 로드합니다.
2. HTML 구조, CSS 스타일, JavaScript 동작을 편집합니다.
3. 실행(Ctrl/Cmd + Enter)으로 sandbox 미리보기를 새로고침합니다.
4. Console 패널에서 log, warn, error를 확인합니다.
5. 반응형 컨트롤로 일반적인 너비에서 레이아웃을 확인합니다.
6. 포맷, 복사 또는 index.html로 다운로드합니다.

예제

샘플 — 실행

HTML

<button id="counter">0</button>

CSS

#counter { font-size: 2rem; padding: 16px; }

JavaScript

let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
  event.currentTarget.textContent = ++count;
});

클릭할 때마다 숫자가 증가합니다. 다시 실행하면 값이 초기화됩니다. 로컬 저장소에는 코드만 저장되며 카운터 상태는 저장되지 않습니다.

팁

미리보기용 HTML, CSS, JavaScript 기본 실행은 브라우저에서 로컬로 이루어집니다.

관련 도구