미디어 쿼리 기본 개념과 사용법

목표

이번에서 **미디어 쿼리(media query)**가 어떻게 작동하는지 이해하고, max-width를 이용한 기본 사용법을 실습합니다.

---

미디어 쿼리란?

• 미디어 쿼리는 특정 뷰포트 너비에 따라 CSS 스타일을 다르게 적용할 수 있도록 해주는 기능입니다.
• 반응형 웹 디자인(Responsive Design)을 만들 때 필수적인 도구입니다.

미디어 쿼리 문법 기본

@media (max-width: 600px) {
  /* 여기에 특정 너비 이하에서 적용할 CSS를 작성 */
}

• 위 코드는 뷰포트 너비가 600px 이하일 때 적용됩니다.
• **max-width**는 데스크톱 우선 전략(Desktop-First)에서 자주 사용됩니다.
• 반대로 **모바일 우선 전략(Mobile-First)**에서는 min-width를 사용합니다.

---

예시

@media (max-width: 1200px) {
  .section-hero {
    background-color: orangered;
  }
}

@media (max-width: 600px) {
  .section-hero {
    background-color: blue;
    border: 10px solid blue;
  }
}

적용 예

• 폰 너비가 400px → 두 쿼리 모두 적용됨
• 폰 너비가 1000px → 1200px 쿼리만 적용
• 폰 너비가 1300px → 어떤 미디어 쿼리도 적용되지 않음

📌 중복 적용 시 우선순위

• 같은 속성을 재정의할 경우, 코드 상 더 아래 있는 것이 적용됩니다.

---

개발자 도구 활용

• 개발자 도구의 디바이스 툴바를 사용하면 다양한 뷰포트를 테스트할 수 있습니다.
  • 예: iPhone 6 Plus – 너비 414px, 높이 736px
• 브라우저에서 직접 크기를 조절하거나 미디어 쿼리 임계값(예: 600px)을 수동 설정할 수 있음

---

실습 내용 요약

1. section-hero의 배경색을 1200px 이하일 때 orangered로 설정
2. 600px 이하일 때는 blue 배경 + 파란 테두리 추가
3. 개발자 도구를 통해 동작 확인
4. 우선순위 충돌 테스트도 수행

---

결론

• 미디어 쿼리는 CSS의 일부를 특정 조건에서 재정의하는 도구
• 반응형 웹의 핵심 도구
• 다음 강의에서는 적절한 브레이크포인트 선택 전략을 배웁니다