CSS 반응형 디자인 ✅ 미디어쿼리, 모바일 퍼스트, 컨테이너 쿼리

 

 

반응형 디자인은 하나의 코드로 다양한 화면 크기를 지원하는 방법입니다.
사용자가 어떤 기기를 쓰든지, 최적화된 UI/UX를 제공할 수 있도록 만드는 것이 목표입니다.

---

🧩 1. 미디어쿼리(Media Query)

📌 기본 문법

 

@media (조건) {
  /* 적용할 CSS */
}

예제 – 화면 크기에 따른 스타일 변경

 

.container {
  width: 100%;
}

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

@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

 

👉 화면 크기에 따라 유동적으로 레이아웃 변경 가능

---

📱 2. 모바일 퍼스트 전략

• 기본 스타일 = 모바일 기준
• 큰 화면(태블릿/PC)은 min-width를 이용해 점진적으로 스타일 확장

예제

 

/* 모바일 기본 */
.card {
  flex-direction: column;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

 

👉 모바일 사용자가 더 많기 때문에 모바일 퍼스트가 현재 웹 디자인의 표준입니다.

---

🖥️ 3. 데스크톱 퍼스트 전략

• 기본 스타일을 PC 기준으로 작성
• 작은 화면(모바일)은 max-width로 줄여나감

예제

 

/* PC 기본 */
.card {
  flex-direction: row;
}

/* 모바일 */
@media (max-width: 767px) {
  .card {
    flex-direction: column;
  }
}

 

👉 기존 레거시 시스템에서는 아직도 자주 쓰이지만, 최신 프로젝트에서는 잘 사용하지 않음.

---

🧱 4. 컨테이너 쿼리(Container Query)

최신 CSS 기능 (2022~) – 브라우저 크기가 아닌 부모 컨테이너 크기를 기준으로 반응형 스타일 적용

예제

 

.card {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card-item {
    flex-direction: row;
  }
}

 

👉 특정 컴포넌트 단위로 반응형 처리가 가능 → 컴포넌트 기반 개발(React, Vue)에 최적

---

💡 5. 실무 적용 팁

• ✅ 모바일 퍼스트 전략으로 기본 구조를 잡고, PC 전용 레이아웃은 미디어쿼리로 확장
• ✅ 레이아웃은 flex, grid와 함께 사용하면 강력한 반응형 구조 가능
• ✅ 컨테이너 쿼리는 최신 브라우저부터 지원 → 점진적 도입 권장
• ✅ 반응형 테스트는 크롬 DevTools → 디바이스 모드로 반드시 확인

---

📝 마무리 정리

• 미디어쿼리: 화면 크기에 따라 스타일 변경
• 모바일 퍼스트: 모바일을 기준으로 스타일 확장 (현실적이고 권장)
• 컨테이너 쿼리: 컴포넌트 단위 반응형 → 차세대 표준

👉 반응형 디자인을 잘하면 UX, SEO, 유지보수성까지 크게 향상됩니다!