CSS 변수를 사용하는 것은 코드의 재사용성을 높이고, 유지보수를 용이하게 만드는 매우 유용한 방법입니다. 하지만 CSS 변수를 사용할 때 몇 가지 반직관적인 함정이 존재합니다. 이번 포스트에서는 이러한 함정들에 대해 자세히 알아보고, 어떻게 피할 수 있는지 살펴보겠습니다.
1. CSS 변수를 정의할 때의 스코프
CSS 변수는 특정 스코프 내에서만 유효하다는 점을 유념해야 합니다. 전역적으로 정의된 변수는 어디서든 사용할 수 있지만, 특정 요소 내에서 정의된 변수는 그 요소와 그 자식 요소에서만 유효합니다. 예를 들어:
:root {
--main-color: blue;
}
.container {
--container-color: green;
}
.box {
background-color: var(--main-color); / blue /
color: var(--container-color); / green /
}위 코드에서 --main-color는 전역적으로 설정된 변수이기 때문에 어디서든 사용할 수 있습니다. 반면 --container-color는 .container 내에서만 유효하므로, .box에서 사용할 경우 undefined가 됩니다.
2. 변수의 상속
CSS 변수는 기본적으로 상속을 지원합니다. 그러나 이는 예상치 못한 결과를 초래할 수 있습니다. 자식 요소가 부모 요소에서 정의된 변수를 사용할 때, 부모 요소의 스타일이 자식 요소에 영향을 줄 수 있습니다. 예를 들어:
.parent {
--text-color: red;
}
.child {
color: var(--text-color);
}
.child.no-inherit {
color: black; / 이 경우에는 부모의 영향을 받지 않음 /
}여기서 .child 클래스는 부모의 변수를 상속받아 빨간색 글씨가 되지만, .child.no-inherit는 상속을 받지 않으므로 검은색 글씨가 됩니다. 이러한 점을 주의해야 합니다.
3. 기본값 설정의 중요성
CSS 변수는 기본값을 설정할 수 있습니다. 변수가 정의되지 않은 경우 기본값을 사용하도록 설정할 수 있는데, 이 부분은 종종 간과되곤 합니다. 예를 들어:
.box {
background-color: var(--box-color, yellow); / --box-color가 정의되지 않았다면 yellow 사용 /
}이렇게 기본값을 설정하면 변수의 정의 여부에 상관없이 코드의 안전성을 높일 수 있습니다. 특히, 동적으로 생성되는 스타일에서 유용하게 사용됩니다.
4. CSS 변수와 미디어 쿼리
CSS 변수를 미디어 쿼리 안에서 사용할 때도 주의가 필요합니다. 미디어 쿼리 내에서 변수의 값을 수정하려면 해당 변수를 전역적으로 정의해야 합니다. 아래를 보시죠:
:root {
--font-size: 16px;
}
@media (max-width: 600px) {
:root {
--font-size: 12px;
}
}
.text {
font-size: var(--font-size);
}이 코드에서는 뷰포트가 600px 이하일 때 글꼴 크기가 12px로 변경됩니다. 하지만 만약 변수를 특정 컨테이너에서 정의했다면 미디어 쿼리 내에서 변경하지 못할 수 있습니다. 따라서 변수의 범위를 정확히 이해하고 정의하는 것이 중요합니다.
5. 브라우저 호환성 문제
마지막으로, CSS 변수를 사용할 때 고려해야 할 점은 브라우저 호환성입니다. CSS 변수는 최신 브라우저에서 지원되지만, 구형 브라우저에서는 지원되지 않을 수 있습니다. 예를 들어, Internet Explorer에서는 CSS 변수를 사용할 수 없습니다. 이러한 점을 고려하여, 필요한 경우 폴리필을 사용하는 것을 고려해야 합니다.
마무리
CSS 변수는 매우 유용한 도구이지만, 사용 시 몇 가지 반직관적인 함정이 존재합니다. 변수의 스코프, 상속, 기본값 설정, 미디어 쿼리 내에서의 사용, 그리고 브라우저 호환성 문제를 충분히 이해하고 활용한다면, 보다 효율적이고 유지보수가 용이한 프론트엔드 코드를 작성할 수 있습니다. 이 글이 CSS 변수를 보다 효과적으로 사용할 수 있는 가이드가 되기를 바랍니다.