CSS의 사용자 정의 변수를 선언할 때, 변수에 값을 할당하지 않을 경우 기본값을 설정할 수 있습니다. 이것은 사용자 정의 변수의 디폴트 값을 설정하는 방법을 이해하는 것과 관련이 있습니다.

CSS 변수 정의 및 디폴트 값 설정

CSS에서 변수를 정의할 때는 -- 접두어를 사용하여 이름을 지정합니다. 변수를 선언하는 시점에서 디폴트 값을 할당할 수 있습니다. 아래 예시를 통해 이를 확인해보겠습니다.

:root {
  --primary-color: #007bff; /* 디폴트 값으로 파란색 지정 */
}

.btn {
  background-color: var(--primary-color, red); /* 버튼의 배경색에 변수를 사용하고, 변수가 정의되지 않았을 때는 빨간색으로 대체 */
}

위의 코드에서 --primary-color 변수는 기본값인 파란색으로 설정되어 있습니다. 그리고 버튼의 배경색 속성에서 var 함수를 사용하여 해당 변수를 참조하고 있습니다. 또한, 두 번째 매개변수로 전달된 red는 해당 변수가 정의되지 않았을 경우 사용할 대체값을 의미합니다.

언제 사용하는가?

이와 같은 방식으로 디폴트 값을 설정하면, 변수가 정의되지 않았을 때의 대체값을 명시적으로 지정할 수 있어서 안전한 사용이 가능해집니다. 또한, 변수의 유연성을 유지하며 사용자에게 다양한 선택지를 제공할 수 있게 됩니다.

이러한 디폴트 값 설정은 모듈화된 CSS 코드나 웹 앱 개발에서 특히 유용하며, 코드의 유지보수성을 높일 수 있습니다.

이상으로 CSS 변수의 디폴트 값을 설정하는 방법에 대해 알아보았습니다.

참고 자료:

• MDN Web Docs: CSS Custom Properties