반응형 HTML 테스트

단계

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

예제

샘플 — 실행

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

600px보다 넓으면 3열, 600px 이하에서는 1열입니다. 너비 시뮬레이션은 실제 기기 테스트를 대신하지 않습니다.

팁

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

관련 도구