[css] CSS 변수 사용 사례

22 Dec 2023

CSS 변수는 스타일 시트에서 재사용 가능한 값을 지정할 때 유용하게 활용될 수 있습니다. 이 포스트에서는 CSS 변수를 효과적으로 활용하는 몇 가지 사례를 살펴보겠습니다.

변수 정의

CSS 변수를 사용하려면 --로 시작하는 이름을 선택하고 해당 값에 할당해야 합니다. 예를 들어, 다음과 같이 변수를 정의할 수 있습니다.

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

위의 코드에서 :root는 문서 트리의 루트 요소를 가리키며, 전역 변수를 정의하는 데 사용됩니다.

이제 변수를 사용하여 스타일을 지정할 수 있습니다. 예를 들어, 다음과 같이 변수를 사용할 수 있습니다.

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
}

위의 코드에서 var(--primary-color)와 같이 var() 함수를 사용하여 해당 변수의 값을 가져와 사용할 수 있습니다.

미디어 쿼리에서도 변수를 사용할 수 있습니다. 예를 들어,

@media (max-width: 768px) {
  .btn-primary {
    padding: 10px;
  }
}

위의 코드를 변수를 사용하여 다음과 같이 변경할 수 있습니다.

@media (max-width: 768px) {
  .btn-primary {
    padding: var(--button-padding);
  }
}

CSS 변수를 사용하면 일관성 있는 디자인을 유지하고 유지보수를 더 쉽게 할 수 있습니다. 변수를 사용하여 자주 사용되는 색상, 여백 또는 글꼴과 같은 값들을 중앙에서 관리할 수 있습니다.

이러한 이점들로 인해 CSS 변수를 적극적으로 활용하여 코드를 관리하고 유지보수하기 쉬운 스타일 시트를 작성할 수 있습니다.