프로그래밍을 하다 보면 불특정 다수의 곳에서 동일한 값을 반복해서 참조해야 하는 경우가 생긴다. 해당 경우에 값을 리터럴 하게 직접 작성해 주면, 이후에 해당 값을 변경해야 하는 시점에 값을 작성한 모든 곳을 전부 찾아내 수정을 해줘야 할 것이다. 이는 엄청난 괴로움을 발생시키는 끔찍한 일이다.
CSS로 스타일링을 할 때에도 이런 문제 상황은 빈번하게 발생한다. 스타일 가이드에 따라 많은 곳에서 반복적으로 사용되는 색상값, 폰트 사이즈 등이 예시이다. CSS는 이러한 상황을 효과적으로 처리하기 위해 사용자 지정 CSS 속성을 제공한다.
기타 프로그래밍 언어에서의 변수와 마찬가지로, CSS 변수는 특정 값을 참조하는 이름을 정의할 수 있게 해준다.해 준다. 그리고, 해당 스타일 값이 사용돼야 하는 곳에 변수명을 통해 값을 치환해 사용할 수 있도록 해준다. 이렇게 변수명으로 스타일을 정의하면, 이후 값의 수정이 필요할 땐 변수에 할당된 값만 바꿔주면 되기 때문에 유지보수가 훨씬 쉬워진다.
스타일을 변수에 할당하는 해당 문법의 공식적인 이름은 '사용자 지정 CSS 속성'인 것 같다(참조: CSS 명세). 하지만, 이후 설명에선 좀 더 직관적이며, 충분히 보편적으로 사용되는 것 같은 'CSS 변수'라는 이름을 사용해 내용을 작성하겠다.
CSS 변수 기본 문법
CSS 변수는 --변수명: 값의 형태로 정의한다. 문법 상 --가 변수명 앞에 반드시 위치해야 하고, 대소문자를 구분(--main-color와 --Main-color는 다른 값을 나타낸다)한다는 점 주의하자.
--main-color: red;
--sub-color: blue;보통은 HTML 문서 최상단인 <html> 태그를 가리키는 가상 선택자 :root에 값을 정의하여 HTML 문서의 어떤 요소에서도 접근할 수 있게 사용하는 것이 일반적이다.
:root {
--main-color: red;
--sub-color: blue;
}물론, 경우에 따라서는 최상단 요소가 아닌, 원하는 위치에서만 지역 변수처럼 적용되게 변수를 정의할 수도 있다. CSS 변수는 DOM 트리 중 변수가 정의된 요소의 하위 요소에서만 값에 접근할 수 있다.
/* HTML 문서 어디에서든 사용할 수 있는 변수 */
:root {
--main-color: red;
--sub-color: blue;
}
/* elem이는 클래스 이름이 적용된 요소의 하위에서만 사용할 수 있는 변수 */
.elem {
--text-regular-size: 14px;
}정의된 변수는 var()라는 키워드를 통해 원하는 위치에 사용될 수 있다.
.elem .child {
background-color: var(--main-color);
font-size: var(--text-regular-size);
}CSS 변수는 일반적인 CSS와 같이 선택자가 일치하거나 해당 선택자의 하위 항목일 경우에만 설정된다. 부모-자식, 또는 조부모-손자 등 DOM 트리의 위계에 따라 값을 상속받아 사용한다.
변수를 사용할 때, 만약에 정의된 변수가 아닐 경우 적용될 default value를 var()에 ,로 구분해서 대체 값을 정의할 수 있다.
.elem .child {
background-color: var(--main-color, red); /* --main-color가 정의되지 않았을 경우 red로 표시됨 */
font-size: var(--text-regular-size, 16px); /* --text-regular-size가 정의되지 않았을 경우 16px로 표시됨 */
}만약에 대체 값을 정의하지 않은 변수가 정의되지 않은 변수였을 경우 상위의 값을 상속받아 사용한다. 만약에 상위 요소에 CSS 변수로 값이 할당되었더라도, 하위 요소에서 별도 값을 지정하면 값을 오버라이딩하는 것도 가능하다.
자바스크립트로 CSS 변수 제어하기
자바스크립트로 DOM 요소를 Select 하여 원하는 요소에 적용된 CSS 변수의 값을 가져오고(get), 수정(set)할 수 있다.
먼저, DOM 요소에 현재 적용된 스타일 정보를 가져오기 위해 getComputedStyle 메서드를 사용할 수 있다. 해당 메서드를 사용하면 DOM 요소에 최종적으로 적용된 모든 스타일 정보를 가져올 수 있다.
// :root에 적용된 styles
const rootStyles = window.getComputedStyle(document.documentElement);받아온 스타일 정보에 getPropertyValue라는 메서드를 사용하고, 인자로 확인이 필요한 CSS 변수명을 문자열로 넣어주면, 해당 변수명에 할당된 값이 반환된다.
// :root에 적용된 --main-color 변수의 값
console.log(rootStyles.getPropertyValue('--main-color')) // red만약에 특정 DOM 요소에 저장된 변수에 해당하는 값을 변경하고 싶으면 (DOM 요소).style.setElement 메서드를 사용하면 된다. 인자로는 적용하고 싶은 변수, 변경할 값을 문자열로 전달하면 된다.
const elem = document.querySelector('.elem');
elem.style.setProperty('--main-color', 'blue');--main-color는 전역인 :root 가상 선택자에 정의된 변수지만, 값의 변경을 .elem 요소에서 해주고 있기 때문에, .elem 하위에 있는 요소들부터 색상이 바뀌고 그 상위 요소들에는 최초에 정의된 red가 동일하게 적용된다.
이렇게, 자바스크립트로 CSS 변수에 적용된 값을 동적으로 변경하면서 필요한 동작을 처리해 주는 게 가능하다.
결론
프로젝트의 규모가 커질수록 CSS의 반복되는 스타일을 처리하는 게 귀찮아질 것 같다는 생각을 했는데, 변수명을 잘 사용하면 필요한 스타일을 효과적으로 잘 정의할 수 있을 것 같다. 프로젝트에서 잘 활용해 봐야겠다. 끝.
'HTML-CSS' 카테고리의 다른 글
| input 태그로 Date Picker 구현하기 (1) | 2024.12.04 |
|---|---|
| 프로젝트에 module.css 적용하기 (1) | 2024.12.03 |
| HTML label 태그 사용하기 (1) | 2024.11.17 |
| Form 태그의 유용한 기능들 (0) | 2024.11.10 |
| 반응형 웹과 미디어 쿼리(Media Query) (4) | 2024.11.04 |