왜 분리하나
한 파일에 HTML+CSS+JS를 몰아넣으면 금방 읽기 어려워집니다. 미리보기에서는 구조·모양·동작을 나눠 편집합니다.
따로 떼어 놓은 미리보기
미리보기는 본문과 분리된 작은 화면에서 돕니다. 사이트에 저장된 기록이나 채점 과정과 섞이지 않게 하려는 것입니다.
- 외부 사이트에서 불러오는 파일은 막힐 수 있음
alert·팝업은 제한될 수 있음
짧은 원리 브라우저에서 코드를 돌리는 이유와 같은 맥락입니다.
추천 순서
- HTML 뼈대·버튼·입력
- CSS로 간격·대비
- JS로 선택자 → 이벤트 → 상태
- 콘솔 오류를 한 줄씩 수정
연습
/preview/에서 클릭 카운터를 만들고, CSS 변수로 배경색만 바꿔 보세요.
파일 역할
| 파일 | 책임 |
|---|---|
| HTML | 의미 있는 태그·id/class |
| CSS | 레이아웃·색·간격 |
| JS | 상태·이벤트·DOM 갱신 |
스타일을 JS로 직접 때려 넣지 말고, 클래스를 토글하는 편이 유지보수에 유리합니다.
한 줄
> 구조 → 모양 → 동작 순으로 쌓고, 미리보기 콘솔로 검증한다.
최소 카운터 스케치
HTML: <button id="btn">+</button><span id="n">0</span>
JS: 클릭 시 숫자 +1 후 textContent 갱신
CSS: 버튼 패딩·대비만
이 세 파일이 분리되어도 같은 미리보기에서 합쳐집니다.
막히면 브라우저 콘솔을 먼저 보세요. 선택자 오타가 가장 흔합니다.
한 줄: 구조→모양→동작, 미리보기에서 확인.
외부 자원 제한
미리보기는 보안 설정 때문에 외부에서 불러오는 파일이 막힐 수 있습니다.
가능하면 CSS/JS를 에디터 칸에 직접 두고, 외부 의존을 줄이세요.
내 컴퓨터에서 보이는 것과 미리보기에서 보이는 것이 다르면, 콘솔의 오류 메시지를 먼저 확인합니다.
더 깊게
읽은 뒤 연습장에서 예제 코드를 한 번 타이핑해 보세요. 눈으로만 보면 하루 뒤 사라집니다.
관련 원리 카드와 문제 태그로 바로 이어서 풀면, 문법·패턴이 한 묶음으로 남습니다.
막히면 30분 규칙: 입력을 로그로 확인 → 기대/실제 한 줄 비교 → 그래도 안 되면 배우기 레슨으로 잠시 복귀.