CSS는 Custom Properties(또는 Variables)를 사용하여 코드의 유연성을 높이고 반복을 줄일 수 있습니다. 하지만 CSS 변수에는 몇 가지 제약조건이 있습니다. 여기에서는 CSS 변수를 사용할 때 주의해야 할 몇 가지 제약조건에 대해 살펴보겠습니다.

1. 변수 이름

변수 이름은 --로 시작해야 합니다. 예를 들어, --primary-color과 같이 지정할 수 있습니다. 또한 변수 이름은 대소문자를 구분하므로 --primaryColor와 --PrimaryColor는 서로 다른 변수로 간주됩니다.

2. 전역 및 로컬 범위

CSS 변수는 전역 범위 또는 로컬 범위를 가질 수 있습니다. 전역 변수는 :root 또는 html 선택자 내에서 정의되며 전체 문서에서 사용할 수 있습니다.

로컬 변수는 요소 내에서 정의됩니다. 예를 들어,

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

.element {
  --text-color: #000000;
}

3. 값 할당

값을 할당할 때 단위를 포함해야 하는 경우에는 해당 단위를 같이 지정해야 합니다. 예를 들어, --font-size: 16px와 같이 사용합니다.

4. 상속

CSS 변수는 상속됩니다. 부모 요소에서 정의된 변수를 하위 요소에서 사용할 수 있습니다.

5. 미디어 쿼리 내 변수 재정의

미디어 쿼리 내에서도 변수를 재정의할 수 있습니다. 이를 활용하여 다양한 디바이스나 화면 크기에 대응하는 스타일을 적용할 수 있습니다.

CSS 변수를 사용하여 코드를 보다 모듈화하고 유연하게 작성할 수 있지만, 이러한 제약조건을 준수하는 것이 중요합니다.

더 자세한 사항은 CSS 변수 사양 문서를 참고하세요.

이상으로 CSS 변수 사용 제약조건에 대해 알아보았습니다. 감사합니다!