[css] CSS 변수 모듈

22 Dec 2023

CSS 변수 모듈은 사용자가 CSS 속성 값을 재사용하고 중앙 집중식으로 관리할 수 있게 도와주는 기능입니다. 이 모듈을 사용하면 코드를 더 간결하게 작성하고 유지보수하기 쉽게 만들 수 있습니다.

기본 사용법

CSS 변수는 --로 시작하며 다음과 같이 정의됩니다:

:root {
  --main-color: #FF0000;
}

이후에 변수를 다른 속성에서 사용할 수 있습니다:

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

이렇게 하면 element 클래스의 텍스트 색상이 빨간색으로 지정됩니다.

변수 상속

CSS 변수는 상속 구조를 통해 계층적으로 정의됩니다. 만약 하위 요소에서 변수를 재정의하면, 해당 요소와 그 후손들에게만 적용됩니다.

:root {
  --main-color: #FF0000;
}

.container {
  --main-color: #00FF00;
}

.element {
  color: var(--main-color); /* 이 경우, 녹색이 적용됨 */
}

미디어 쿼리와 변수

미디어 쿼리 내에서 CSS 변수를 사용하여 반응형 디자인을 구현할 수 있습니다:

:root {
  --main-color: #FF0000;
}

@media (max-width: 768px) {
  :root {
    --main-color: #00FF00;
  }
}

.element {
  color: var(--main-color); /* 브라우저 폭에 따라 다른 색상이 적용됨 */
}

요약

CSS 변수 모듈은 코드의 유연성을 높이고 중앙 집중식으로 스타일을 관리할 수 있게 해줍니다. 이를 통해 코드의 가독성을 높이고 유지보수를 더 쉽게 만들 수 있습니다.

이렇게 함으로써 효율적인 프론트엔드 디자인을 구현할 수 있습니다.

참고 자료

CSS 변수 모듈 - W3C에서 제공하는 CSS 변수 모듈에 대한 공식 문서