Lesson 04

Iteration & Refinement

One nav component. Five rounds of prompting. Each step adds exactly one thing.

Basic structure
Prompt
nav 컴포넌트를 만들어줘. 왼쪽에 로고, 오른쪽에 링크 3개.
Courses Tutorials About
Structural skeleton. No polish — just the shape.
Responsive
Prompt
이걸 유지하면서 모바일(640px 이하)에서 햄버거 메뉴로 바뀌게 해줘.
Resize the window below 640px to see the hamburger. Links show/hide on click.
Scroll behavior
Prompt
스크롤 시 nav 배경이 흰색으로 바뀌고 shadow가 생기게 해줘. 기존 CSS는 건드리지 마.
Courses Tutorials About
↑ This nav has a scroll effect (simulated below)
The `기존 CSS는 건드리지 마` constraint prevents unintended refactoring.
Accessibility
Prompt
햄버거 버튼에 aria-expanded, aria-controls 추가하고 ESC로 메뉴 닫히게 해줘.
Inspect the button in DevTools — aria-expanded updates on click. ESC closes the menu.
Active state polish
Prompt
nav 링크에 active 상태 추가. 현재 페이지 링크는 font-weight 600, color #000.
Courses Tutorials About
Production-ready. Five prompts. Zero manual code.