Media Query

OlMinJe·2025년 8월 1일

CSS

Web FrontEnd Study

목록 보기

34/44

✅ 미디어 쿼리란?

CSS에서 조건에 따라 다른 스타일을 적용할 수 있도록 하는 기능.
주로 반응형 웹 디자인(responsive design)에 사용.

📌 기본 문법

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

주요 조건들

조건	설명	예시
`max-width`	최대 너비(이하일 때)	`@media (max-width: 768px)`
`min-width`	최소 너비(이상일 때)	`@media (min-width: 1024px)`
`orientation`	화면 방향	`@media (orientation: landscape)`
`max-height`	최대 높이 조건	`@media (max-height: 800px)`
`prefers-color-scheme`	다크모드 여부	`@media (prefers-color-scheme: dark)`

예시

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

💡 팁

모바일 우선 설계할 땐 min-width 중심으로 작성.
여러 조건은 논리 연산자 and, not, only 등의 키워드로 조합 가능.

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* 태블릿 사이즈에 적용 */
}

📌 미디어 타입(Media Type)

미디어 쿼리는 디바이스의 종류도 판단할 수 있음

all – 모든 디바이스 (기본값)
screen – 화면용 디바이스
print – 인쇄 시 적용
speech – 스크린 리더 등 음성 출력

@media print {
  body {
    color: black;
    background: none;
  }
}

📌 디바이스 특성 기반 쿼리

미디어 쿼리는 단순히 width만을 기준으로 하지 않고, 기기의 입력 방식, 방향, 선호 설정 등을 기준으로 조건을 만들 수 있음.

속성	설명
orientation	디바이스 방향 (가로/세로)
aspect-ratio	화면 비율 (예: 16/9, 3/4)
resolution	디바이스 해상도 (dpi or dppx)
hover	사용자가 hover 가능 여부 (hover, none)
pointer	포인팅 장치의 정밀도 (fine, coarse, none)
prefers-color-scheme	다크 모드 선호 여부 (light, dark)
prefers-reduced-motion	사용자 모션 효과 축소 요청 여부 (reduce, no-preference)
inverted-colors	색상 반전 여부 (inverted)

예시: orientation

@media (orientation: landscape) {
  /* 가로 모드일 때만 적용 */
  body {
    flex-direction: row;
  }
}

예시: hover + pointer

@media (hover: none) and (pointer: coarse) {
  /* 터치 기반 기기에서 */
  .button {
    padding: 16px;
  }
}

예시: prefers-color-scheme

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

예시: prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

📌 컨테이너 쿼리 (Container Queries) – 최신 CSS

기존 미디어 쿼리는 뷰포트 크기 기준이었지만, 컨테이너 쿼리는 부모 요소의 크기를 기준으로 스타일을 조정.

즉, 같은 컴포넌트를 여러 레이아웃에서 재사용할 때, 부모 너비에 따라 스타일이 달라지는 진정한 컴포넌트 단위 반응형을 만들 수 있음!

요소의 부모 요소 크기를 기준으로 스타일 적용 가능
기존 미디어 쿼리는 뷰포트 기준이었는데, 컴포넌트 단위 반응형 구현에 유용

기본 문법

컨테이너 등록 (부모 요소에)

.container {
  container-type: inline-size;
}

컨테이너 쿼리 작성

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

예시 코드

<div class="container">
  <div class="card">내용</div>
</div>

.container {
  container-type: inline-size; /* 컨테이너 등록 */
}
.card {
  display: flex;
  flex-direction: column;
}
@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

💡 이렇게 하면 .card의 스타일은 부모 .container의 너비가 600px 이상일 때만 바뀜!