미디어 쿼리

미디어 쿼리(Media Query)는 웹 개발에서 특정 조건에 따라 스타일을 적용할 수 있는 CSS 기능이다. 주로 디바이스의 화면 크기, 방향, 해상도, 색상 선호도 등을 기준으로 웹 페이지의 스타일을 다르게 적용하고자 할 때 사용된다.

 

문법

@media 규칙을 사용한다. 

@media (조건) {
  /* 조건이 참일 때 적용될 CSS */
}

예시

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

/* 화면 너비가 600px 이상일 때 */
@media (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

이 경우 화면 너비가 600px 이하이면 배경화면의 색상이 lightblue, 600px 이상이면 lightgreen이 된다.

 

주요 조건들

1. 화면 크기 

• max-width / max-height : 화면 너비/높이가 특정 값 이하일 때
• min-width / min-height : 화면 너비/높이가 특정 값 이상일 때

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

2. 화면 방향

• landscape : 화면이 가로 모드일 때
• portrait : 화면이 세로 모드일 때

@media (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

3. 화면 해상도

• min/max-resolution : 화면 해상도가 특정 값 이상/이하일 때

@media (min-resolution: 192dpi) {
  img {
    width: 100%;
  }
}

4. 색상 선호도(color preference)

• prefers-color-scheme : 사용자가 선호하는 색상 테마(다크모드, 라이트모드) 조건을 확인

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

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}