브라우저에서 HTML 실행하기

단계

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

예제

샘플 — 실행

HTML

<button id="demo">Hello</button>

CSS

#demo { padding: 12px 24px; color: white; background: #2563eb; border: 0; border-radius: 8px; }

JavaScript

document.getElementById("demo").addEventListener("click", () => console.log("Hello"));

각 코드를 해당 입력란에 붙여 넣고 실행하세요. 파란 버튼을 클릭하면 콘솔에 Hello가 표시됩니다.

팁

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

관련 도구