미디어 쿼리

미디어 쿼리 (Media Queries)

미디어 쿼리는 CSS의 기능으로, 디바이스의 특성(예: 화면 크기, 해상도, 방향 등)에 따라 스타일을 조건부로 적용할 수 있게 해줍니다. 주로 반응형 웹 디자인(Responsive Web Design, RWD)에 사용되며, 사용자의 기기에 맞춰 레이아웃이나 스타일을 동적으로 변경합니다.

기본 구조

@media (조건) {
  /* 조건이 충족될 때 적용되는 스타일 */
}

예시

/* 화면 너비가 600px 이하일 때 적용 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
  }
}

/* 화면 너비가 601px 이상일 때 적용 */
@media (min-width: 601px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

• max-width: 최대 너비 조건.
• min-width: 최소 너비 조건.
• 기타 조건: orientation (가로/세로), resolution (해상도) 등도 사용 가능.

특징

• 유연성: 다양한 디바이스와 화면 크기에 대응 가능.
• ** breakpoint**: 특정 화면 크기에서 스타일이 변경되는 지점을 설정해 사용.
• 주로 모바일, 태블릿, 데스크톱 등에 맞춘 반응형 디자인에 활용.

---

적응형 코딩 (Adaptive Coding)

적응형 코딩은 미디어 쿼리와는 조금 다른 접근 방식으로, 특정 디바이스나 화면 크기에 맞춘 고정된 레이아웃을 여러 개 준비해 제공하는 방식입니다. 반응형 디자인이 유동적으로 변한다면, 적응형은 미리 정의된 몇 가지 레이아웃 중 하나를 선택해 보여줍니다.

구현 방식

• 서버 측 또는 클라이언트 측에서 디바이스 정보를 감지.
• 그에 맞는 스타일시트나 HTML을 제공.
• 예: 모바일용(320px), 태블릿용(768px), 데스크톱용(1200px) 레이아웃을 별도로 설계.

예시

/* 모바일용 스타일 */
.mobile-layout {
  width: 320px;
}

/* 데스크톱용 스타일 */
.desktop-layout {
  width: 1200px;
}

// 클라이언트 측 감지 예시
if (window.innerWidth <= 320) {
  document.body.classList.add('mobile-layout');
} else if (window.innerWidth >= 1200) {
  document.body.classList.add('desktop-layout');
}

특징

• 고정된 레이아웃: 특정 해상도에 최적화된 디자인 제공.
• 성능 최적화: 필요한 리소스만 로드해 속도 개선 가능.
• 반응형보다 구현이 간단할 수 있지만, 유연성은 떨어짐.

---

미디어 쿼리 vs 적응형 코딩

| 구분 | 미디어 쿼리 (반응형) | 적응형 코딩 | |——————|————————————|——————————| | 접근 방식 | 유동적, 화면 크기에 따라 점진적 변화 | 고정된 레이아웃 선택 | | 유연성 | 높음 | 낮음 | | 복잡도 | 상대적으로 복잡 | 단순할 수 있음 | | 사용 사례 | 다양한 디바이스 대응 | 특정 디바이스 타겟팅 |

---

결론

• 미디어 쿼리는 현대 웹에서 더 널리 사용되며, 반응형 디자인이 표준으로 자리 잡았습니다. CSS Grid나 Flexbox와 함께 사용하면 더욱 강력합니다.
• 적응형 코딩은 과거에 많이 사용되었고, 특정 상황(예: 성능 최적화가 중요한 경우)에서 여전히 유용할 수 있습니다.

추가로 궁금한 점이 있으면 말씀해주세요! 예제 코드를 더 보거나 특정 상황에 맞춘 설명도 가능합니다.