1. 시맨틱 HTML 작성하기
HTML 창에 입력한 코드는 표준 HTML5 문서 템플릿에 자동 반영되어 핵심 인터페이스 구현에만 집중할 수 있습니다.
<div class="interactive-card">
<h2>작업 관리자</h2>
<input type="text" id="taskInput" placeholder="새 작업 입력..." />
<button id="addBtn">추가</button>
<ul id="taskList"></ul>
</div>2. 반응형 CSS 스타일 즉각 반영
CSS 창에서 스타일을 작성하면 입력과 동시에 미리보기가 부드럽게 갱신되며 스크롤과 포커스가 유지됩니다.
.interactive-card {
max-width: 480px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e6dfd8;
border-radius: 8px;
}3. 모던 자바스크립트 로직과 가상 콘솔
ES2024 자바스크립트 문법을 자유롭게 사용할 수 있으며, console 호출은 에디터 하단 가상 콘솔에 실시간 출력됩니다.
document.getElementById('addBtn').onclick = () => {
const input = document.getElementById('taskInput');
if (!input.value) return;
const li = document.createElement('li');
li.textContent = input.value;
document.getElementById('taskList').appendChild(li);
input.value = '';
};4. 독립 팝아웃 창 및 모바일 QR 코드 테스트
팝아웃 버튼을 눌러 미리보기를 별도 창으로 분리하거나 모바일 QR 코드를 스마트폰으로 스캔하여 실기기에서 반응형을 검증하세요.