--이름으로 재사용 가능한 값을 만들고 var로 사용합니다.
사용자 정의 속성은 cascade와 상속에 참여하는 CSS 값입니다. :root에 전역 토큰을 두고 특정 컴포넌트에서 덮어쓸 수 있습니다. var(--name, fallback)의 두 번째 값은 변수가 없거나 유효하지 않을 때 사용되며, 일반 프로그래밍 변수처럼 값을 즉시 계산해 저장하는 개념과는 다릅니다.
이번 예제의 출발점은 :root { --brand: #176b45; } color: var(--brand);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 --space와 --brand를 한 곳에서 바꿔 두 요소에 어떻게 전달되는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
var 이름의 대소문자는 구분됩니다. --brand와 --Brand는 서로 다른 속성입니다.
직접 바꿔보세요--space와 --brand를 한 곳에서 바꿔 두 요소에 어떻게 전달되는지 확인하세요.