CSS 스타일링과 반응형 디자인
AI와 함께 웹사이트를 스타일링해요 — Flexbox와 Grid로 반응형 레이아웃, 모던 CSS 기법, 디자인 토큰, 모바일 우선 디자인.
프리미엄 강좌 콘텐츠
이 레슨은 프리미엄 강좌의 일부예요. Pro로 업그레이드하면 모든 프리미엄 강좌와 콘텐츠를 이용할 수 있어요.
- 모든 프리미엄 강좌 이용
- 1000개 이상의 AI 스킬 템플릿 포함
- 매주 새로운 콘텐츠 추가
🔄 복습: 지난 레슨에서 AI와 함께 시맨틱 HTML 구조를 만들었어요 — 페이지 레이아웃, 폼, 접근 가능한 내비게이션. 이제 CSS로 보기 좋게 만들어볼게요.
디자인 토큰: CSS의 기초
컴포넌트 스타일을 작성하기 전에, 디자인 시스템을 먼저 만들어야 해요:
Create a CSS custom properties (variables) file for a website design system:
Brand colors:
- Primary: [your brand color, e.g., #3b82f6]
- Secondary: [secondary color]
- Accent: [accent color for CTAs]
Generate from these base colors:
1. Color scale: 50, 100, 200, ..., 900 for primary and secondary
2. Semantic colors: success, warning, error, info
3. Surface colors: background, surface, surface-raised (light and dark mode)
4. Text colors: primary, secondary, muted, on-primary
Spacing scale:
- 8px base unit: space-1 (4px) through space-20 (160px)
Typography:
- Font families: heading, body, mono
- Size scale: xs through 4xl using clamp() for fluid sizing
- Line heights and font weights
Border radius: sm, md, lg, xl, full
Shadows: sm, md, lg, xl
Use :root for light mode defaults and @media (prefers-color-scheme: dark) for dark mode.
✅ 확인 질문: 고정값 대신
clamp()를 사용해야 하는 이유는?
clamp()는 화면 크기 간에 매끄럽게 스케일되는 유동적 타이포그래피를 만들어요. font-size: clamp(1rem, 2.5vw, 1.5rem)는 폰트가 1rem보다 작지 않고, 1.5rem보다 크지 않으며, 그 사이에서 유동적으로 스케일된다는 뜻이에요 — 미디어 쿼리 브레이크포인트가 필요 없어요.
Grid로 반응형 레이아웃
페이지 레이아웃
Create a responsive page layout using CSS Grid:
Structure:
- Header (full width, sticky)
- Sidebar (left, 280px on desktop, hidden on mobile with toggle)
- Main content (flexible, centered, max-width 800px for readability)
- Footer (full width)
Responsive behavior:
- Mobile (< 768px): Single column, no sidebar, hamburger menu
- Tablet (768px - 1024px): Sidebar collapses to icons only (64px)
- Desktop (> 1024px): Full sidebar visible
Use mobile-first approach (base styles for mobile, min-width queries for larger).
Use CSS custom properties for spacing and colors.
No frameworks — vanilla CSS only.
한국에서 인기 있는 사이트들 — 토스, 당근마켓, 클래스101 — 을 보면 깔끔한 모바일 우선 레이아웃을 사용하고 있어요. 모바일 사용자 비율이 높은 한국 웹 환경에서 모바일 우선 접근은 필수예요.
카드 그리드
Create a responsive card grid using CSS Grid:
Requirements:
- Cards auto-fill available width
- Minimum card width: 280px
- Maximum card width: 1fr (flexible)
- Consistent gap: var(--space-6)
- Cards have equal height (stretch to tallest in row)
- Card content: image, title, description, button pinned to bottom
Use grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
Mobile: 1 column. Tablet: 2 columns. Desktop: 3-4 columns (automatic).
컴포넌트 스타일링
버튼 시스템
Create a button system with CSS:
Button types:
- Primary (solid background, white text)
- Secondary (outline, colored border and text)
- Ghost (text only, subtle hover)
- Danger (red variant for destructive actions)
Sizes: sm, md (default), lg
States for each: default, hover, focus-visible, active, disabled
Requirements:
- Use CSS custom properties for all colors
- focus-visible outline (not focus) for keyboard-only indicators
- Smooth transitions (150ms ease)
- Disabled state reduces opacity, removes pointer events
- All sizes maintain consistent padding ratios
Use .btn as base class with modifier classes (.btn-primary, .btn-sm, etc.)
내비게이션 바
Create a responsive navigation bar with CSS:
Desktop (> 768px):
- Horizontal layout, logo left, links center, CTA button right
- Dropdown menus appear on hover with smooth animation
- Active link indicated with bottom border
Mobile (< 768px):
- Logo left, hamburger icon right
- Menu slides in from right (off-canvas) when toggled
- Full-height overlay with large touch targets (48px minimum)
- Dropdown items expand vertically
Use Flexbox for the nav layout.
Include smooth transitions for hover states and mobile menu toggle.
Mobile menu toggle will need a small JavaScript snippet (provide it separately).
다크 모드
Add dark mode support to this stylesheet:
[paste your existing CSS]
Requirements:
1. Use @media (prefers-color-scheme: dark) to detect system preference
2. Override only the CSS custom properties (colors, shadows) — not component styles
3. Ensure sufficient contrast ratios (WCAG AA: 4.5:1 for text)
4. Adjust shadow colors (dark mode shadows should use darker rgba values)
5. Images and illustrations: add slight reduction in brightness
Also add a manual toggle class (.dark-mode on body) that overrides system preference.
✅ 확인 질문: 다크 모드에서 컴포넌트 스타일을 다시 작성하지 않고 커스텀 프로퍼티만 오버라이드하는 이유는?
컴포넌트가 var(--color-bg)와 var(--color-text)를 사용하면, 다크 모드로 전환할 때 변수 정의만 바꾸면 돼요 — 모든 컴포넌트를 다시 작성할 필요가 없어요. background: var(--color-primary)와 color: var(--color-on-primary)를 사용하는 버튼은 추가 CSS 없이 양쪽 모드에서 동작해요. 이것이 디자인 토큰의 힘이에요: 한 번의 변경이 모든 곳에 전파돼요.
CSS 검증
AI가 CSS를 생성한 후, 이런 일반적인 이슈를 확인하세요:
Review this CSS for quality and best practices:
[paste your CSS]
Check for:
1. Hardcoded colors or spacing (should use custom properties)
2. Missing mobile-first media queries (should use min-width, not max-width)
3. Accessibility issues (contrast, focus states, touch targets)
4. Performance issues (expensive selectors, large box-shadows, excessive animations)
5. Missing dark mode consideration
6. Inconsistent naming conventions
7. Specificity conflicts or !important usage
Suggest improvements for each issue found.
연습: 페이지 스타일링하기
- 커스텀 프로퍼티 프롬프트로 디자인 토큰 파일을 만드세요
- 레슨 2에서 만든 HTML 페이지를 반응형 레이아웃(Grid)으로 스타일링하세요
- 최소 4개 카드가 있는 카드 그리드 섹션을 추가하세요
- Primary와 Secondary 변형이 있는 버튼 시스템을 추가하세요
- 커스텀 프로퍼티 오버라이드로 다크 모드 지원을 추가하세요
- 모바일(375px), 태블릿(768px), 데스크탑(1200px) 너비에서 테스트하세요
핵심 정리
- 모든 프로젝트를 디자인 토큰(CSS 커스텀 프로퍼티)으로 시작하세요 — 색상, 간격, 타이포그래피, 그림자를 한 번 정의하고 어디서든 사용해요
- 모바일 우선 CSS(기본 스타일 + min-width 쿼리)가 데스크탑 우선(오버라이드 + max-width 쿼리)보다 깔끔해요
- CSS Grid는 2차원 레이아웃(페이지 구조, 카드 그리드)에, Flexbox는 1차원 정렬(내비 바, 카드 내부)에 사용해요
clamp()로 브레이크포인트 없이 매끄럽게 스케일되는 유동적 타이포그래피를 만들어요- 컴포넌트가 커스텀 프로퍼티를 사용하면 다크 모드가 쉬워져요 — 컴포넌트가 아니라 토큰만 오버라이드하면 돼요
- AI가 생성한 CSS에서 하드코딩된 값, 누락된 포커스 상태, 접근성 대비 이슈를 항상 확인하세요
다음 레슨: JavaScript로 인터랙티비티를 추가해요 — DOM 조작, 이벤트 핸들링, 페이지에 생명을 불어넣는 동적 기능.
이해도 체크
먼저 위의 퀴즈를 완료하세요
레슨 완료!