15강. 반응형 웹과 미디어 쿼리

이번 강의의 결과물은 작은 화면에서 1열, 충분히 넓은 화면에서 2열로 바뀌며 이미지와 메뉴가 화면 밖으로 넘치지 않는 포트폴리오입니다.

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

14강의 프로젝트 2열은 데스크톱에서는 보기 좋지만 작은 화면에서는 카드가 지나치게 좁아집니다. 특정 기기 이름을 맞히는 대신 콘텐츠가 불편해지는 너비를 기준으로 레이아웃을 변경합니다.

✓학습 목표

• 14강의 프로젝트 2열은 데스크톱에서는 보기 좋지만 작은 화면에서는 카드가 지나치게 좁아집니다. 특정 기기 이름을 맞히는 대신 콘텐츠가 불편해지는 너비를 기준으로 레이아웃을 변경합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

반응형 웹은 화면과 사용 환경에 맞춰 콘텐츠가 읽기 쉽고 조작 가능하도록 레이아웃을 조정하는 방식입니다.

• 모바일 우선: 기본 CSS를 작은 화면에 맞추고 공간이 늘어날 때 기능을 확장합니다.
• 유동 크기: width: 100%, max-width처럼 사용 가능한 공간에 반응합니다.
• 중단점: 콘텐츠 배치가 불편해져 레이아웃을 바꿔야 하는 경계입니다.
• 미디어 쿼리: 뷰포트 조건이 참일 때만 CSS 규칙을 적용합니다.

@media (min-width: 48rem) {
  /* 뷰포트가 충분히 넓을 때 적용 */
}

Media Queries 표준은 화면 물리 크기를 뜻하는 device-width보다 문서가 실제 사용할 수 있는 뷰포트 width를 사용하도록 안내합니다. W3C Media Queries Level 4

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

head에서 뷰포트 설정을 확인합니다.

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

파일명: web-basics/portfolio/css/style.css

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-container {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .page-container {
    padding: 0 1.5rem;
  }

  .nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

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

1. 기본 규칙은 미디어 쿼리 밖에 있으므로 모든 화면에서 먼저 적용됩니다.
2. 작은 화면에서는 메뉴와 프로젝트가 한 열로 배치됩니다.
3. 뷰포트가 48rem 이상이면 미디어 쿼리 안의 규칙이 추가로 적용됩니다.
4. 넓은 화면에서는 메뉴의 주축이 가로로 바뀌고 프로젝트가 2열이 됩니다.
5. 이미지의 max-width: 100%가 부모보다 커지는 것을 막고 height: auto가 원래 비율을 유지합니다.
6. 컨테이너의 max-width가 큰 모니터에서 한 줄이 지나치게 길어지는 것을 막습니다.

중단점은 “태블릿이니까 768px”처럼 기기 이름으로 정하기보다 실제 콘텐츠가 겹치거나 너무 좁아지는 지점에서 선택합니다.

!5. 자주 하는 실수

• meta viewport를 빠뜨려 모바일에서 축소된 데스크톱 화면이 보임
• 모든 크기를 고정 px로 지정함
• 기기 모델별로 미디어 쿼리를 계속 추가함
• 작은 화면에서 중요한 콘텐츠를 무조건 숨김
• 데스크톱 한 크기에서만 확인함
• CSS로 시각적 순서를 바꾸어 키보드·읽기 순서와 다르게 만듦
• 이미지에 고정 width만 주어 부모 밖으로 넘치게 함

✎6. 짧은 실습 과제

1. 기본 프로젝트 Grid를 1열로 변경합니다.
2. 콘텐츠가 2열을 감당할 수 있는 지점을 직접 찾고 미디어 쿼리를 작성합니다.
3. 브라우저 폭을 경계 바로 아래와 위로 바꾸어 전환을 확인합니다.
4. 320px, 768px, 1280px 폭에서 가로 스크롤이 생기는지 확인합니다.
5. 브라우저 확대를 200%로 설정하고 콘텐츠가 겹치거나 잘리지 않는지 확인합니다.
6. 실제 휴대전화 또는 개발자 도구의 기기 모드에서 링크와 폼을 조작합니다.

완료 기준은 특정 기기 이름과 무관하게 작은 화면에서 읽기 쉬운 1열, 공간이 충분한 화면에서 2열이 되고 가로 스크롤이 생기지 않는 것입니다.

?7. 이해 점검 질문 3개

1. 모바일 우선 CSS에서는 기본 규칙과 넓은 화면용 규칙을 각각 어디에 작성하나요?
2. 중단점을 특정 기기 이름보다 콘텐츠를 기준으로 정해야 하는 이유는 무엇인가요?
3. 이미지에 max-width: 100%와 height: auto를 함께 쓰는 이유는 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.