Ch.6 CSS Grid + 반응형 디자인

반응형이란? — 모바일 퍼스트

@media 쿼리의 문법과 역할을 이해한다viewport 메타 태그의 필요성을 안다모바일 퍼스트 접근법으로 반응형 CSS를 작성할 수 있다

같은 사이트를 폰에서 열면 왜 깨져 보일까?

데스크톱에서 완벽한 3열 레이아웃이 스마트폰에서는 글자가 너무 작고 가로 스크롤이 생깁니다. 화면 크기에 따라 레이아웃을 바꿔야 합니다.

하나의 CSS로 모든 화면 크기에 대응할 수 있을까?

@media 쿼리 — 화면 너비에 따라 다른 스타일을 적용하는 반응형 웹의 핵심입니다.

article

핵심 내용

화면 크기에 따라 CSS를 전환합니다

<!-- HTML <head>에 필수! -->
<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

<!-- 이게 없으면 모바일 브라우저가
     데스크톱 크기로 축소 렌더링함 -->

/* @media 쿼리 기본 문법 */
@media (조건) {
  /* 조건 충족 시 적용할 스타일 */
}

/* 예시: 화면 너비 768px 이상일 때 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* 예시: 화면 너비 1024px 이상일 때 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

작은 화면부터 설계하고 큰 화면으로 확장합니다

1. 모바일: 기본 CSS — 1열, 작은 여백

2. 태블릿: @media (min-width: 768px) — 2열

3. 데스크톱: @media (min-width: 1024px) — 3열

모바일 퍼스트의 장점: • 모바일 사용자에게 불필요한 CSS를 로드하지 않음 • 핵심 콘텐츠부터 설계하여 UX가 탄탄해짐 • min-width 사용 = 점점 넓어질 때 스타일 추가

모바일 1열 → 태블릿 2열로 변하는 카드를 만들어봅시다

모바일 퍼스트 접근법에서 사용하는 미디어 쿼리 조건은?

viewport 메타 태그가 없으면 모바일 브라우저는 페이지를 데스크톱 크기로 축소 렌더링한다

다음 중 반응형 웹 디자인을 위한 CSS 기능은?

반응형 웹 기초!

edit_note

정리 노트

반응형이란? — 모바일 퍼스트

반응형 핵심

미디어 쿼리: 화면 크기에 따라 다른 CSS를 적용하는 규칙
@media: @media (min-width: 768px) — 태블릿 이상일 때 적용
모바일 퍼스트: 작은 화면 먼저 디자인 후 큰 화면으로 확장

브레이크포인트

모바일: ~767px — 1열 레이아웃
태블릿: 768px~1023px — 2열 레이아웃
데스크탑: 1024px~ — 3~4열 레이아웃

★

모바일 퍼스트: 기본 CSS는 모바일용, min-width 미디어 쿼리로 확장하세요.

check_circle

핵심 정리

1viewport 메타 태그 = 모바일 반응형의 필수 전제
2@media (min-width: 768px) → 모바일 퍼스트 방식
3작은 화면 기본 → 큰 화면에서 열 수 증가

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작