Lesson 03

Context Is Everything

Same component. One uses hardcoded values. One uses CSS custom properties. Toggle dark mode to see the difference.

Without context Hardcoded values — breaks in dark mode
Course

GSAP Animation

Scroll effects, 3D transforms, SVG drawing, smooth scroll — 17 essential patterns.

17 lessons Start → 
/* hardcoded */
background: #ffffff;
border: 1px solid #e5e5e5;
color: #111111;
.card-tag { color: #888888; }
.card-cta { color: #2563eb; }
With context CSS variables — adapts automatically
Course

GSAP Animation

Scroll effects, 3D transforms, SVG drawing, smooth scroll — 17 essential patterns.

17 lessons Start → 
/* CSS tokens */
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
.card-tag { color: var(--text-3); }
.card-cta { color: var(--accent); }

The prompt that made this

@design-tokens.css 파일의 CSS 변수를 사용해서 코스 카드 컴포넌트를 만들어줘.

- 배경: var(--bg)
- 테두리: 1px solid var(--border)
- 제목: var(--text)
- 설명: var(--text-2)
- 태그/메타: var(--text-3)
- CTA 링크: var(--accent)

이 카드는 라이트/다크 모드 모두에서 작동해야 해.
JS 없이 CSS만 사용.