CSS에 변수와 미디어 쿼리를 적용하여 웹사이트의 반응형 디자인을 개선할 수 있습니다.

CSS 변수

CSS 변수를 사용하면 여러 곳에서 재사용되는 값을 정의하고 이 값을 한 곳에서 쉽게 변경할 수 있습니다. 예를 들어, 아래와 같이 변수를 정의하고 사용할 수 있습니다.

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

미디어 쿼리

미디어 쿼리를 사용하여 화면의 크기나 장치에 따라 스타일을 조정할 수 있습니다. 아래는 가로 폭에 따라 다른 스타일을 적용하는 예제입니다.

/* 작은 화면에서는 글자 크기를 작게 */
@media only screen and (max-width: 600px) {
  .text {
    font-size: 14px;
  }
}

/* 큰 화면에서는 글자 크기를 크게 */
@media only screen and (min-width: 601px) {
  .text {
    font-size: 16px;
  }
}

CSS 변수와 미디어 쿼리를 함께 사용하여 반응형 웹 디자인을 더욱 효과적으로 구현할 수 있습니다.

요약

CSS 변수를 사용하여 스타일을 중앙에서 관리하고, 미디어 쿼리를 사용하여 반응형 디자인을 쉽게 구현할 수 있습니다. 이를 통해 유지보수가 용이한 웹사이트를 구축할 수 있습니다.

참고 자료:

• CSS Variables: Why Should You Care?
• Using CSS Variables
• Using Media Queries