CSS 미디어 쿼리(Media Queries)란?

CSS 미디어 쿼리(Media Queries)란?

미디어 쿼리는 다양한 장치의 화면 크기, 해상도, 방향 등에 따라 CSS 스타일을 다르게 적용하는 기술입니다.
반응형 웹 디자인(Responsive Web Design)의 핵심 도구로, 모바일, 태블릿, 데스크톱 등 다양한 기기에 최적화된 레이아웃을 구현할 수 있습니다.

---

1. 기본 구조

@media [미디어 유형] and (조건) {
  /* 조건을 만족할 때 적용할 CSS */
}

• @media: 미디어 쿼리 시작을 선언합니다.
• 미디어 유형: screen, print, all 등 대상 장치를 지정 (생략 가능).
• 조건: 화면 너비(width), 높이(height), 방향(orientation) 등을 조건으로 설정.

---

2. 주요 사용 사례

(1) 화면 너비에 따른 스타일 조정

/* 모바일 (가로 600px 이하) */
@media (max-width: 600px) {
  body { background-color: lightblue; }
}

/* 태블릿 (600px ~ 900px) */
@media (min-width: 600px) and (max-width: 900px) {
  body { background-color: lightgreen; }
}

/* 데스크톱 (900px 이상) */
@media (min-width: 900px) {
  body { background-color: lavender; }
}

(2) 화면 방향(가로/세로) 감지

/* 세로 모드 (portrait) */
@media (orientation: portrait) {
  .header { height: 100px; }
}

/* 가로 모드 (landscape) */
@media (orientation: landscape) {
  .header { height: 50px; }
}

(3) 고해상도(Retina) 디스플레이 대응

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo { background-image: url("logo@2x.png"); }
}

---

3. 주로 사용하는 조건

조건	설명	예시
width, height	화면 너비/높이	(min-width: 768px)
orientation	화면 방향	(orientation: landscape)
aspect-ratio	화면 비율	(aspect-ratio: 16/9)
resolution	픽셀 밀도	(min-resolution: 300dpi)

---

4. 실제 예시: 반응형 네비게이션 바

/* 기본 스타일 (모바일) */
.navbar { display: block; }

/* 태블릿 이상에서 변경 */
@media (min-width: 768px) {
  .navbar { display: flex; }
}

---

5. 미디어 쿼리의 장점

1. 기기별 최적화: 스마트폰, 태블릿, PC 등 다양한 화면 크기에 맞춰 디자인 가능.
2. 유지보수 용이: 하나의 HTML 파일로 여러 기기 대응.
3. 사용자 경험 향상: 기기 환경에 맞는 레이아웃 제공.

---

6. 주의사항

• 모바일 퍼스트(Mobile First): 작은 화면부터 디자인 후 점진적으로 확장 (min-width 사용).
• 성능 고려: 과도한 미디어 쿼리는 로딩 속도 저하 가능성.
• 크로스 브라우징 테스트: 모든 기기/브라우저에서 호환성 확인.

---

요약

미디어 쿼리는 "어떤 조건에서 어떤 CSS를 적용할지" 정의하는 기술로,
반응형 웹을 구현하는 데 필수적입니다.
화면 크기, 해상도, 방향 등을 감지해 유동적인 디자인을 가능하게 합니다! 🚀

Was ist eine CSS -Medienfrage?