[css] CSS 변수 코드 리뷰

22 Dec 2023

CSS 변수(칼라)는 웹 디자인에서 반복 사용되는 색상 값을 재사용하기 쉽도록 만들어주는 강력한 기능입니다.

다음은 간단한 예시 코드입니다.

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

.button {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--secondary-color);
}

.card {
  background-color: var(--bg-color);
  border: 1px solid var(--secondary-color);
}

이 예시 코드는 :root 의 --primary-color, --secondary-color, 그리고 --bg-color 변수를 정의하고, 이러한 변수를 .button 및 .card 클래스에 적용하여 사용할 수 있습니다.

이 예시는 CSS 변수를 효과적으로 활용하여 디자인의 일관성을 유지하고 코드의 유지보수성을 향상시킨 좋은 예시입니다.

참고 자료

CSS 변수 - MDN Web Docs