Media Query란?

Media Query는 CSS에서 **특정 조건(화면 크기, 해상도, 기기 특성 등)**에 따라 다른 스타일을 적용할 수 있는 기능.

반응형 웹 디자인(Responsive Web Design)의 핵심 기술로, 같은 웹사이트가 PC·태블릿·모바일 화면에서 각각 적절히 보이도록 만들어줌.

기본 문법

@media 조건 {
  /* 조건이 참일 때 적용될 스타일 */
}

조건으로 자주 쓰이는 속성은 width, height, orientation, resolution 등.

예시: 화면 크기에 따라 배경색 변경

/* 모바일 (최대 600px) */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

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

/* PC (1025px 이상) */
@media (min-width: 1025px) {
  body {
    background-color: lightyellow;
  }
}

min-width / max-width 차이

• max-width: 조건보다 작거나 같은 화면에 적용
• min-width: 조건보다 크거나 같은 화면에 적용

모바일 퍼스트 접근법

/* 기본: 모바일 */
body { font-size: 14px; }

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

/* PC 이상일 때 */
@media (min-width: 1024px) {
  body { font-size: 18px; }

orientation (가로/세로 방향)

@media (orientation: portrait) {
  /* 세로 모드일 때 */
  body { background: pink; }
}

@media (orientation: landscape) {
  /* 가로 모드일 때 */
  body { background: skyblue; }
}