[css] CSS 변수 아이콘 관리

22 Dec 2023

CSS 변수를 사용하여 아이콘을 효과적으로 관리하는 방법을 살펴보겠습니다.

CSS 변수란?

CSS 변수는 -- 접두어를 사용하여 정의하고, var() 함수를 사용하여 값에 접근하는 방식으로 선언됩니다.

예시:

:root {
  --primary-color: #ff5500;
}

.element {
  color: var(--primary-color);
}

아이콘 관리를 위한 CSS 변수 활용

아이콘을 변수로 정의하여 여러 곳에서 사용할 수 있도록 관리할 수 있습니다. 이를 통해 코드의 중복을 줄이고 변화에 대한 유연성을 높일 수 있습니다.

예시:

:root {
  --icon-size: 24px;
  --icon-color: #333333;
  --icon-hover-color: #ff5500;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--icon-color);
  transition: fill 0.3s ease;
}

.icon:hover {
  fill: var(--icon-hover-color);
}

실전 예제

<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm5 11h-4v4h-2v-4h-4v-2h4v-4h2v4h4v2z"/>
</svg>

목차

CSS 변수란?

아이콘 관리를 위한 CSS 변수 활용

실전 예제

참고 자료