CSS 미디어 쿼리는 웹 페이지가 어떤 디바이스나 뷰포트 크기에 따라 다른 스타일을 가지도록 하는 데 사용됩니다. 이를 통해 반응형 웹 디자인을 만들 수 있습니다.

기본 구문

@media (조건) {
  /* 스타일 코드 */
}

위 구문에서 (조건) 부분에는 디바이스나 뷰포트 크기에 대한 조건을 명시합니다. 예를 들어, (max-width: 600px)와 같이 사용하여 뷰포트의 최대 너비가 600px일 때 스타일을 적용할 수 있습니다.

예시

다음은 미디어 쿼리를 사용하여 뷰포트의 크기에 따라 다른 배경색을 적용하는 예시입니다.

/* 뷰포트가 600px 이하일 때 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 뷰포트가 601px 이상일 때 */
@media (min-width: 601px) {
  body {
    background-color: lightgray;
  }
}

유의사항

• 미디어 쿼리는 CSS3부터 지원됩니다.
• 가능한 한 여러 디바이스에 대한 스타일을 하나의 미디어 쿼리에 모두 포함시키는 것이 좋습니다.

미디어 쿼리를 사용하여 웹 페이지를 다양한 디바이스에 맞게 최적화하는 것은 중요합니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.