반응형 레이아웃 설계

모바일 퍼스트란?

화면이 작은 모바일을 기준으로 먼저 디자인하고, 화면이 커질수록 레이아웃을 확장하는 방식입니다. 반대 방향(Desktop First)보다 코드가 단순하고 성능에 유리합니다.

Mobile First (권장):
/* 모바일 기본 */
.card { display: block; }

/* 태블릿 이상에서 2단 */
@media (min-width: 768px) {
  .card { display: grid; grid-template-columns: 1fr 1fr; }
}

/* 데스크탑에서 3단 */
@media (min-width: 1024px) {
  .card { grid-template-columns: repeat(3, 1fr); }
}

Desktop First (비권장):
/* 데스크탑 기본 */
.card { display: grid; grid-template-columns: repeat(3, 1fr); }

/* 태블릿에서 2단 */
@media (max-width: 1024px) {
  .card { grid-template-columns: 1fr 1fr; }
}

브레이크포인트 전략

Flexbox vs Grid

/* Flexbox — 내비게이션 */
nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Grid — 카드 목록 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* auto-fill + minmax: 공간에 따라 자동으로 열 개수 조정 */

실습 1 — 랜딩 페이지 반응형 변환

6강에서 만든 FRESH:ON 랜딩 페이지를 완전한 반응형으로 만들어줘.

브레이크포인트: 640px (모바일), 768px (태블릿), 1024px (데스크탑)

각 섹션별 변환:
- Hero: 모바일 세로 스택 / 데스크탑 좌우 2단 (텍스트 60% + 이미지 40%)
- Features: 모바일 1열 / 태블릿 2열 / 데스크탑 4열
- Reviews: 모바일 1열 / 태블릿 이상 3열
- 내비게이션: 모바일 햄버거 메뉴 / 데스크탑 수평

모바일 퍼스트 방식으로 작성해줘.

실습 2 — 햄버거 메뉴 구현

모바일 햄버거 메뉴를 HTML + CSS + 바닐라 JavaScript로 만들어줘.

기능:
- 햄버거 아이콘 클릭 시 메뉴 펼침/접힘
- 펼칠 때 X 아이콘으로 변환 (CSS transform 활용)
- 메뉴 열릴 때 슬라이드 다운 애니메이션
- 메뉴 바깥 클릭 시 닫힘
- 768px 이상에서는 햄버거 아이콘 숨김, 수평 메뉴 표시

JavaScript: 바닐라 JS, classList.toggle 방식

유연한 이미지 처리

/* 이미지 반응형 기본 */
img { max-width: 100%; height: auto; }

/* 비율 유지 컨테이너 (16:9) */
.aspect-video {
  position: relative;
  padding-bottom: 56.25%;
}
.aspect-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 모바일에서만 이미지 숨기기 */
@media (max-width: 767px) {
  .hide-on-mobile { display: none; }
}

반응형 작업 시 Chrome DevTools의 기기 시뮬레이터(F12 → 기기 아이콘)를 항상 켜두세요. 모바일, 태블릿, 데스크탑 3개 화면을 동시에 확인하며 작업하면 실수가 크게 줄어듭니다.

관련 검색어  ·  반응형 웹 디자인, 모바일 퍼스트 CSS, 미디어 쿼리, 햄버거 메뉴, Flexbox Grid 차이, CSS 반응형 레이아웃