CSS 사용자 정의 속성

개념 이해하기

사용자 정의 속성은 cascade와 상속에 참여하는 CSS 값입니다. :root에 전역 토큰을 두고 특정 컴포넌트에서 덮어쓸 수 있습니다. var(--name, fallback)의 두 번째 값은 변수가 없거나 유효하지 않을 때 사용되며, 일반 프로그래밍 변수처럼 값을 즉시 계산해 저장하는 개념과는 다릅니다.

:root에 둔 --brand와 --space는 상속되어 두 상자 모두 16px 여백과 초록 배경을 받을 수 있습니다. .second는 자기 안에서 --brand를 갈색으로 다시 정의하므로 두 번째 상자만 갈색 배경이 되고, 첫 상자는 :root의 초록을 그대로 씁니다. var()는 그 값을 쓰는 요소에서 계산되기 때문에, .second에 background: var(--brand)를 다시 적지 않았어도 .target 규칙만으로 같은 갈색이 나옵니다.

var()로 넣은 값이 그 속성에 맞지 않으면 앞에 적은 다른 선언으로 돌아가지 않고, 그 속성은 unset처럼 상속값이나 초깃값을 씁니다. 예를 들어 --space에 red를 넣으면 padding은 이전 선언이 아니라 초깃값인 0이 되어, 잘못된 값을 건너뛰는 일반 선언과 다르게 동작합니다.