CSS 변수 (사용자 지정 속성)

CSS 저작자가 정의하는 개체, 문서 전반에 걸쳐 재사용할 임의의 값을 담음 (= CSS 변수, 종속 변수) 전용 표기법(eg. —-main-color: black;)을 사용해 정의하며, var( ) 함수를 사용하여 접근 할 수 있음

/* 기본구조 */

:element {
	--사용자-지정-속성-이름: 속성값;
}

var(--사용자-지정-속성-이름);

--------------------------------

/* HTML 전체에 적용하고 싶을 경우 */

:root {
	--사용자-지정-속성-이름: 속성값;
}

var(--사용자-지정-속성-이름);

예시

<body>
   <h1>hamburger</h1>
</body>

:root {
    --title-color: gray;
}

h1 {
    color: var(--title-color);
}