본 포스트에서는 미디어 쿼리를 활용하여 브라우저의 화면 크기에 따라 다른 테마를 적용하는 방법에 대해 다룹니다.

1. 미디어 쿼리란?

미디어 쿼리는 CSS3의 기능 중 하나로, 미디어 타입이나 장치에 따라 스타일을 다르게 적용할 수 있도록 하는 기술입니다. 주로 반응형 웹 디자인에서 활용되며, 화면의 너비, 높이, 방향 등을 고려하여 스타일을 변경하는 데 사용됩니다.

2. 테마 기반 스타일링

아래 예시는 화면의 너비에 따라 밝은(light) 테마와 어두운(dark) 테마를 전환하는 방법을 보여줍니다.

/* 기본 스타일 */
body {
  background-color: #ffffff; /* 밝은 배경색 */
  color: #333333; /* 어두운 글자색 */
}

/* 미디어 쿼리를 활용한 테마 전환 */
@media (min-width: 768px) {
  body {
    background-color: #333333; /* 어두운 배경색 */
    color: #ffffff; /* 밝은 글자색 */
  }
}

위 코드에서 @media (min-width: 768px)는 화면의 너비가 768px 이상일 때 해당 스타일이 적용됨을 의미합니다.

3. 결론

미디어 쿼리를 활용하여 화면 크기에 따라 다양한 테마를 적용할 수 있습니다. 이를 통해 사용자 경험을 향상시키는 반응형 웹 디자인을 구현할 수 있습니다.

이상으로 미디어 쿼리를 활용한 테마 기반 스타일링에 대해 알아보았습니다.

CSS 미디어 쿼리 MDN 문서에서 더 자세한 내용을 확인할 수 있습니다.