기본 사용법
사용자 지정 속성은 :로 시작하는 속성의 이름과 함께, 유효한 CSS 값으로 지정해 선언한다.
예시:
element {
--main-bg-color: brown;
}
규칙 집합의 선택자는 사용자 지정 속성을 사용할 수 있는 범위를 정의한다.
:root 의사 클래스에 선언해서 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성하는 것이다.
:root {
--main-bg-color: brown;
}
사용자 지정 속성의 값을 사용할 때
일반적인 값의 자리에 var() 함수를 지정하고, 매개변수로는 사용자 지정 속성의 이름을 제공한다.
element {
background-color: var(--main-bg-color);
}
상속
사용자 지정 속성은 상속 대상이다.
특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용한다.
대안 값
주어진 변수가 아직 정의되지 않았을 때, 여러 개의 대체 변수를 정의할 수 있다.
첫 번째 argument -> 사용자 속성의 이름
두 번째 argument -> 잘못된 사용자 속성을 참조하였을 때 대신 사용할 수 있는 대체 변수
.two {
color: var(--my-var, red); / --my-var가 정의되지 않았을 경우 red로 표시됨 /
}
.three {
background-color: var(
--my-var,
var(--my-background, pink)
); / my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 /
}
.three {
background-color: var(
--my-var,
--my-background,
pink
); / 유효하지 않음: "--my-background, pink" /
}
유효성과 값
유효하지 않은 var() 구문을 만나게 되면
그 속성의 초기값이나 상속된 값이 사용된다.
JS에서 사용자 속성값 가져오기
// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");
// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");
// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);
