CSS 변수(Custom Properties)를 JavaScript로 가져오는 완벽 가이드: 초보자도 바로 적용 가능!

🚀 CSS 변수, 왜 프론트엔드 필수 스킬이 되었을까?

혹시 디자인 시스템의 색상이나 간격 값을 수정할 때마다 CSS 파일을 이리저리 찾으면서 시간을 낭비하고 계시지는 않나요?
CSS 변수(Custom Properties)는 이런 비효율을 해결해 주는 마법 같은 도구입니다. var(--main-color); 와 같은 형태로 변수를 선언하고 재사용하면, 유지보수가 놀라울 정도로 쉬워집니다. 하지만 진정한 힘은 이 변수들을 JavaScript와 연동할 때 발휘되죠. JS를 이용해 CSS 변수 값을 동적으로 제어하면, 단 몇 줄의 코드로 다크 모드 토글이나 실시간 테마 변경 같은 복잡한 UI를 쉽게 구현할 수 있습니다. 오늘은 이 프론트엔드 필수 스킬을 초보자도 이해할 수 있도록 쉽게 알려드릴게요!

반응형

 

💡 CSS 변수(Custom Properties)란 무엇인가?

CSS 변수는 이름 그대로 CSS 안에서 재사용 가능한 값을 저장하는 역할을 합니다. 일반적인 CSS 속성 값과는 달리, 선언 시 -- (하이픈 두 개)로 시작하는 것이 특징입니다. 이 변수들은 특정 선택자(:root나 특정 요소) 안에 선언되어 해당 스코프 내에서만 유효하게 됩니다. 특히 최상위 선택자인 :root에 선언하면, 문서 전체에서 해당 변수를 사용할 수 있는 글로벌 변수처럼 작동합니다. 이 개념은 JavaScript에서 let이나 const를 사용하는 것과 비슷하다고 생각하시면 이해하기 쉽습니다.

특징	JavaScript 변수	CSS 변수 (Custom Properties)
선언 방식	let, const, var	--variable-name:
사용 방식	변수 이름 직접 호출	var(--variable-name)
주요 역할	동적 로직, 데이터 처리	스타일 값 저장 및 재사용

 

💡 핵심: JavaScript로 CSS 변수 값을 활용하 방법

이제 본론입니다. JavaScript에서 CSS 변수 값을 가져오는 것은 DOM 요소의 style 객체를 활용합니다. 가장 핵심적인 메서드는 getPropertyValue()입니다. 이 메서드는 특정 요소의 스타일 정보를 담고 있는 CSSStyleDeclaration 객체에 접근하여 우리가 원하는 CSS 변수(Custom Properties)의 실제 값을 문자열로 반환해 줍니다.

1. CSS 변수 선언

먼저 CSS에서 변수를 선언합니다. :root 선택자에 선언하면 문서 전체에서 전역 변수처럼 사용할 수 있습니다. 

:root {
    --main-color: blue;
    --font-size: 16px;
}
.target-element {
    color: var(--main-color);
    font-size: var(--font-size);
}

2. JavaScript로 CSS 변수 값 가져오기 (읽기) 

JavaScript에서 특정 요소에 적용된 CSS 변수 값을 읽으려면 window.getComputedStyle() 메서드를 사용합니다. 

// :root에 선언된 전역 변수에 접근하려면 document.documentElement를 사용합니다.
const rootStyles = window.getComputedStyle(document.documentElement);

// getPropertyValue()를 사용하여 변수 값을 가져옵니다.
const mainColor = rootStyles.getPropertyValue('--main-color').trim();
const fontSize = rootStyles.getPropertyValue('--font-size').trim();

console.log("현재 메인 색상:", mainColor); // 출력: 현재 메인 색상: blueviolet
console.log("현재 폰트 크기:", fontSize); // 출력: 현재 폰트 크기: 16px

.trim()을 사용하여 값 앞뒤의 공백을 제거하는 것이 좋습니다. 

3. JavaScript로 CSS 변수 값 설정하기 (변경) 

CSS 변수 값을 동적으로 변경하려면 element.style.setProperty() 메서드를 사용합니다.

const newColor = 'coral';
const newSize = '20px';

// setProperty(propertyName, value)를 사용하여 변수 값을 설정합니다.
document.documentElement.style.setProperty('--main-color', newColor);
document.documentElement.style.setProperty('--font-size', newSize);

// 변경된 값 확인
const updatedColor = rootStyles.getPropertyValue('--main-color').trim();
console.log("변경된 메인 색상:", updatedColor); // 출력: 변경된 메인 색상: coral

이처럼 setProperty()를 사용하면, 별도의 클래스를 추가하거나 제거할 필요 없이 오직 변수 값 하나만 변경함으로써 웹사이트 전체의 스타일을 일괄적으로 조작할 수 있습니다.

728x90

 

4. 활용 팁

• 다크 모드 구현: :root의 --bg-color와 --text-color 변수 값을 JavaScript로 토글하여 웹사이트의 테마를 쉽게 변경할 수 있습니다.
• 동적 UI: 사용자의 입력이나 특정 이벤트(예: 슬라이더 조작)에 따라 UI 요소의 크기, 색상, 간격 등을 실시간으로 조절할 수 있습니다.
• 일관된 디자인 시스템: JavaScript 코드와 CSS 스타일 간에 동일한 변수를 공유함으로써 디자인 일관성을 유지하고 유지 보수를 용이하게 합니다. 

 

💡 퍼포먼스 및 코드 관리 관점에서의 이점

CSS 변수와 JavaScript의 연동은 단순한 문법적인 편리함을 넘어, 프론트엔드 개발의 품질을 향상시킵니다.

• 코드 유지보수성 향상: 모든 핵심 스타일 값이 변수에 집중되어 있어, 스타일 변경이 필요한 경우 변수 선언부만 수정하면 됩니다. 이는 마치 중앙 집중식 설정 파일처럼 작동합니다.
• 동적 UI 구현의 간소화: 클래스 추가/제거 대신 변수 값 변경만으로 복잡한 애니메이션이나 상태 변화를 쉽게 처리할 수 있어, JS 코드 자체가 훨씬 간결해지고 가독성이 높아집니다.
• 런타임 효율성: 브라우저가 CSS 변수를 인식하고 처리하므로, DOM을 직접 조작하는 횟수를 줄여 퍼포먼스 측면에서도 유리합니다.

관점	CSS 변수 활용 (권장)	클래스 토글 (기존 방식)
코드 간결성	매우 높음 (변수 값만 변경)	보통 (클래스 정의 및 토글 로직 필요)
유지보수	용이 (단일 지점 변경)	어려움 (여러 CSS 속성 분산)
동적 제어	탁월함	보통

 

✅ CSS 변수와 JS 연동, 개발 효율을 높이는 지름길

오늘 우리는 프론트엔드 필수 스킬인 CSS 변수(Custom Properties)를 JavaScript로 가져와 활용하는 핵심 방법을 알아보았습니다.

getComputedStyle()과 getPropertyValue()로 값을 읽고, style.setProperty()로 동적으로 값을 변경하는 이 패턴은 반응형 디자인과 사용자 상호작용이 많은 현대 웹 개발에서 필수적입니다. 이 기술을 마스터하는 것은 단순히 기능을 구현하는 것을 넘어, 코드를 더 효율적이고 깔끔하게 관리하는 프론트엔드 고수로 나아가는 첫걸음이 될 것입니다.

CSS 변수와 JavaScript의 조합은 현대 프론트엔드 개발에서 생산성과 유지보수성을 한 단계 끌어올리는 강력한 무기입니다. 오늘 배운 getPropertyValue와 setProperty 메서드를 활용하여 여러분의 프로젝트에 바로 적용해 보세요!

---

참고 문헌:

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN