미디어 쿼리 (반응형 웹 디자인)

미디어 쿼리(Media Query)는 CSS3에서 도입된 기능으로, 사용자의 디바이스 환경(화면 크기, 해상도, 방향 등)에 따라 서로 다른 스타일을 적용할 수 있도록 도와줍니다. 주로 반응형 웹 디자인(Responsive Web Design, RWD)을 구현할 때 사용.

미디어 쿼리 기본 문법

@media (조건) {
  /* 적용할 스타일 */
}

1. @media 키워드를 사용하여 미디어 쿼리를 선언
2. 조건에는 화면 크기, 해상도, 디바이스 유형 등의 조건을 입력
3. 조건이 충족될 경우 해당 스타일이 적용됨.


예제

1. 화면 크기에 따른 반응형 스타일 적용

/* 화면 너비가 768px 이하일 때 적용 */
@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

✅ max-width: 768px → 화면 너비가 768px 이하일 때 스타일 적용
✅ 일반적으로 모바일, 태블릿 환경에서 적용하는 스타일


2. 최소/최대 너비 함께 사용

/* 화면 너비가 768px 이상 1024px 이하일 때 적용 */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
}

✅ 768px 이상, 1024px 이하 범위에서만 적용


3. 기기 방향(가로/세로) 변경 시 스타일 적용

/* 가로 모드일 때 스타일 변경 */
@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

✅ orientation: landscape → 가로 모드일 때 적용
✅ 반대로 orientation: portrait → 세로 모드일 때 적용


4. 고해상도(레티나 디스플레이) 대응

@media (min-resolution: 2dppx) {
  img {
    width: 200px;
    height: auto;
  }
}


✅ 2dppx는 **2배 해상도(레티나 디스플레이)**를 의미
✅ min-resolution: 192dpi와 같은 방식으로도 사용 가능


미디어 쿼리와 모바일 우선 디자인(Mobile-First Design)

미디어 쿼리는 일반적으로 모바일 우선(Mobile-First) 방식으로 설계하는 것이 권장됨
즉, 기본 스타일을 모바일에 맞게 작성하고, 화면이 커질수록 추가적인 스타일을 적용하는 방식임

/* 기본 스타일 (모바일 우선) */
body {
  font-size: 14px;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 데스크탑 이상 */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

✅ 모바일 → 태블릿 → 데스크탑 순으로 스타일을 적용
✅ 유지보수와 성능 최적화에 유리함


정리
미디어 쿼리는 디바이스 환경에 따라 CSS 스타일을 다르게 적용하는 기능
반응형 웹 디자인을 구현할 때 필수적으로 사용됨.