문법 · 웹

웹 미리보기 (HTML·CSS·JS)

결과물 페이지에서 화면을 만드는 최소 HTML·CSS·DOM 기초.

← 배우기 · 6레슨 · 약 81분

이 트랙 이어하기

beginner 1. HTML 뼈대와 미리보기 계약

14분 · index.html 최소 구조, sandbox iframe에서 무엇이 보이는지.

beginner 2. CSS 기초: 박스·플렉스·변수

16분 · 여백, display, flex, 커스텀 속성으로 레이아웃을 잡습니다.

beginner 3. DOM과 이벤트

15분 · querySelector, textContent, click 리스너로 화면을 반응하게.

beginner 4. 미리보기 워크플로: 멀티파일과 샌드박스

12분 · HTML/CSS/JS를 나눠 쓰고, iframe 샌드박스에서 확인하는 흐름.

beginner 5. 폼과 입력: label·value·submit

12분 · 미리보기에서 입력 값을 읽고 화면에 반영하는 최소 패턴.

beginner 6. 레이아웃: flex로 가로·세로 배치

12분 · 미리보기에서 카드·버튼을 flex로 정렬하는 최소 패턴.