CSS 미디어 쿼리 (Media Query)

미디어 쿼리(Media Query)는 CSS의 기능 중 하나로, 화면의 크기, 장치의 방향, 해상도 등과 같은 미디어에 대한 쿼리를 수행하여 스타일을 적용할 수 있습니다.

미디어 쿼리를 사용하면 각 디바이스에 최적화된 디자인을 적용하거나, 반응형 웹 디자인을 구현하는 데에 유용합니다. 예를 들어, 모바일 디바이스에서는 화면이 작아지므로 폰트 크기를 줄이거나 레이아웃을 바꾸는 등의 스타일을 적용할 수 있습니다.

미디어 쿼리는 @media 규칙으로 시작하며, screen, print, speech와 같은 미디어 유형에 따라 규칙을 정의할 수 있습니다. 또한, and, not, only와 같은 논리 연산자를 사용하여 조건을 결합할 수 있습니다.

 

사용법

 

/* 768px 이하일 때 */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 768px 초과일 때 */
@media screen and (min-width: 769px) {
  body {
    font-size: 20px;
  }
}

 

이렇게 작성된 미디어 쿼리는, 화면의 크기가 768px 이하일 때와 768px 초과일 때 각각 다른 스타일을 적용합니다. 이와 같이 미디어 쿼리를 사용하면 다양한 환경에서 최적화된 스타일을 적용할 수 있습니다.