6강. 반응형 웹: 모바일과 PC 화면에 맞게 구조 바꾸기

?1. 이번 강의에서 해결할 문제

데스크톱에서만 만든 메뉴와 간격은 작은 화면에서 눌리거나 가로 스크롤을 만듭니다. 특정 기기 이름이 아니라 콘텐츠가 깨지는 지점에서 레이아웃을 바꿉니다.

✓2. 학습 목표

✓이번 강의를 마치면

• viewport 설정과 모바일 우선 접근을 설명합니다.
• 상대 단위와 media query를 사용합니다.
• 개발자 도구의 기기 모드로 작은 화면을 점검합니다.

◇3. 핵심 개념

기본 스타일을 좁은 화면에 맞추고 공간이 충분할 때 min-width 조건으로 확장합니다. breakpoint는 유명 기기의 픽셀값이 아니라 메뉴와 콘텐츠가 읽기 어려워지는 지점입니다.

✎4. 단계별 실습

HTML · index.html의 head에 유지

game-dev-portfolio/index.html

<meta name="viewport" content="width=device-width, initial-scale=1" />

CSS · 파일 경로: css/style.css

game-dev-portfolio/css/style.css

.site-header { align-items: flex-start; flex-direction: column; }
nav { flex-wrap: wrap; }
h1 { font-size: clamp(2rem, 8vw, 4.5rem); line-height: 1.1; }

@media (min-width: 48rem) {
  .site-header { align-items: center; flex-direction: row; }
  section { padding-block: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

개발자 도구 확인: Device Toolbar에서 320px부터 1440px까지 드래그합니다. 가로 스크롤, 잘린 버튼, 겹친 메뉴가 없어야 하며 reduced motion 에뮬레이션에서는 부드러운 스크롤이 꺼져야 합니다.

→5. 코드가 동작하는 이유

viewport 메타가 CSS 픽셀과 기기 폭을 맞춥니다. 기본 세로 메뉴는 좁은 화면에서 안전하고, 48rem 이상에서만 가로 정렬합니다. clamp는 제목 크기에 최소·유동·최대 범위를 둡니다.

!6. 자주 하는 실수와 해결법

!자주 하는 실수

• 데스크톱 CSS를 먼저 쓰고 숨김 반복: 좁은 화면 기본값에서 확장합니다.
• 기기 모델별 breakpoint: 콘텐츠가 깨지는 실제 폭을 기준으로 잡습니다.
• 고정 px 폭: %, rem, min(), clamp()를 사용합니다.
• 화면에서만 숨기고 키보드 초점은 남김: 11강 메뉴에서 상태를 함께 처리합니다.

✎7. 직접 실습

✎직접 실습

개발자 도구로 320px, 768px, 1440px 화면을 확인하고 문제와 수정 결과를 표로 기록하세요. breakpoint를 48rem에서 바꾸어 콘텐츠 기준을 비교합니다.

?8. 이해 점검 질문 3개

?이해 점검

1. 모바일 우선 CSS의 기본 스타일은 어떤 화면을 대상으로 하나요?
2. breakpoint를 기기 이름보다 콘텐츠로 정해야 하는 이유는 무엇인가요?
3. prefers-reduced-motion은 어떤 사용자를 돕나요?

■9. 핵심 요약

■핵심 요약

모바일 우선 스타일을 만들고 콘텐츠가 충분한 폭에서만 확장합니다. 개발자 도구로 연속적인 폭과 사용자 모션 설정을 확인합니다.