반응형 디자인

같은 페이지라도 휴대폰, 태블릿, 데스크톱에서 잘 보여야 합니다. 반응형 디자인은 화면 크기에 따라 레이아웃과 크기를 유연하게 바꾸는 기법입니다.

학습 목표

• @media 미디어 쿼리로 화면 크기별 스타일을 적용한다.
• 모바일 퍼스트 접근법을 이해한다.
• viewport 메타 태그의 역할을 안다.
• 유연한 단위와 반응형 이미지를 사용한다.

viewport 메타 태그

반응형의 출발점은 HTML의 viewport 설정입니다. 이것이 없으면 모바일 브라우저가 데스크톱 너비를 흉내 내어 화면이 축소됩니다.

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

미디어 쿼리

@media로 조건에 맞을 때만 적용되는 스타일을 묶습니다.

.container {
  padding: 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 32px;
  }
}

min-width는 "그 너비 이상", max-width는 "그 너비 이하"를 뜻합니다.

모바일 퍼스트

기본 스타일을 모바일 기준으로 작성하고, min-width로 큰 화면을 덧붙이는 방식입니다. 작은 화면에서 불필요한 규칙을 줄여줍니다.

/* 기본: 모바일 (세로 1열) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 태블릿 이상: 2열 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 데스크톱: 3열 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

💡 TIP — 분기점(breakpoint)은 디자인이 깨지는 지점을 기준으로 정합니다. 특정 기기 해상도에 집착하기보다 콘텐츠가 보기 좋게 유지되는 너비를 고르세요.

유연한 단위

고정 px 대신 비율 단위를 쓰면 화면에 맞춰 자연스럽게 늘고 줄어듭니다.

.box {
  width: 90%;
  max-width: 640px;   /* 너무 커지지 않게 제한 */
  margin: 0 auto;
}

.hero {
  font-size: clamp(1.5rem, 4vw, 3rem); /* 최소·유동·최대 */
}

vw는 뷰포트 너비의 1%, clamp(min, 선호, max)는 범위 안에서 유동적으로 변하는 값을 줍니다.

반응형 이미지

이미지가 부모 너비를 넘지 않게 하는 기본 규칙입니다.

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

⚠️ 주의 — width: 100% 대신 max-width: 100%를 쓰세요. width: 100%는 작은 이미지를 억지로 늘려 흐리게 만들 수 있습니다.

요약

• viewport 메타 태그가 있어야 모바일에서 의도대로 보입니다.
• @media로 화면 크기별 스타일을 분기합니다.
• 모바일 퍼스트는 기본을 모바일로 두고 min-width로 확장합니다.
• %, vw, clamp, max-width: 100%로 유연하게 만듭니다.

연습문제

1. 모바일 브라우저에서 화면이 축소되지 않게 하려면 HTML에 무엇을 넣어야 할까요?
2. 화면 너비가 1024px 이상일 때만 .menu를 가로로 펼치는 미디어 쿼리를 작성하세요.
3. 이미지가 부모를 넘지 않으면서 비율을 유지하게 하는 규칙을 작성하세요.
4. 모바일 퍼스트로 작성할 때 기본 스타일은 어느 화면 기준으로 작성하나요?

힌트 — viewport 메타 태그, min-width 미디어 쿼리, 이미지는 max-width와 height auto입니다.