반응형 디자인.

미디어 쿼리, 유동 레이아웃, 모바일 우선. 화면 크기에 맞추는 CSS.

반응형 디자인은 뷰포트 너비, 높이에 따라 레이아웃과 타이포를 바꾸는 것이다. 프론트에서는 모바일 우선 + 미디어 쿼리 + 유동 단위 조합이 흔하다.

📱 뷰포트

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

이게 없으면 모바일에서 "축소된 데스크톱"처럼 보일 수 있다.

📱 모바일 우선

모바일 태블릿 데스크톱 레이아웃 변환

작은 화면 스타일을 기본으로 두고, min-width로 넓힐 때 규칙을 더한다.

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

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

max-width만으로 데스크톱 먼저 짜면, 덮어쓰기와 특이도 싸움이 늘기 쉽다.

🌊 유동 레이아웃

%, fr, minmax, auto-fill로 고정 px 격자를 줄인다.
이미지
- max-width: 100%
- height: auto
컨테이너: width: min(100%, 72rem) 같은 min / clamp 패턴

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

✍️ 타이포와 터치

본문은 rem으로 키를 맞추고, 필요 시 clamp()로 뷰포트에 따라 살짝 키운다.
버튼, 링크는 터치 영역(대략 44px 권장)을 확보한다.
hover만으로 필수 기능을 숨기지 않는다. (터치 디바이스)

🏠 이 프로젝트에서의 패턴

mason-log는 mobileMediaQuery, hoverMediaQuery로 브레이크포인트와 hover를 나눈다.

모바일에서 hover 스타일이 남지 않게, hover는 hover 미디어로 감싼다.
레이아웃 분기와 인터랙션 분기를 섞지 않는 편이 안전하다.

✅ 체크리스트

좁은 폭에서 가로 스크롤이 생기지 않는가
이미지가 컨테이너를 뚫지 않는가
폰트, 버튼이 너무 작지 않은가
테이블, 코드블록은 스크롤 또는 줄바꿈 대안이 있는가

🔗 참고 자료

MDN: Using media queries — 미디어 쿼리 사용법을 설명한다.
MDN: Responsive design — 반응형 레이아웃 원칙을 다룬다.
W3C: Media Queries Level 5 — 미디어 쿼리 공식 명세다.