맞춤 속성

사이트의 초기 스타일을 빌드하고 있는데 CSS에서 일부 값을 반복하고 있다고 가정해 보겠습니다. dodgerblue를 기본 색상으로 사용하고 버튼 테두리, 링크 텍스트, 헤더 배경에 추가하고 디자인 도구를 사용하여 사이트의 다른 부분에 사용할 파란색의 변형을 선택합니다. 그러면 스타일 가이드가 표시되고 기본 색상이 oklch(70% 0.15 270)로 변경됩니다.

맞춤 속성 또는 CSS 변수를 사용하면 CSS에서 값을 정리하고 재사용할 수 있으므로 스타일이 더 유연하고 이해하기 쉬워집니다.

속성 만들기

속성을 만드는 가장 간단한 방법은 정의한 이름으로 새 속성에 값을 설정하는 것입니다.

.card {
  --base-size: 1em;
}

모든 속성 이름은 대시 두 개로 시작해야 합니다. 이렇게 하면 기존 CSS 속성 이름을 맞춤 값에 사용하려고 시도하는 것을 방지할 수 있습니다. CSS 사양에서는 대시 두 개로 시작하는 속성을 추가하지 않습니다.

그런 다음 var() 함수를 사용하여 이 속성에 액세스할 수 있습니다. 이 예시에서는 .card-title 내의 글꼴 크기를 --base-size 값의 두 배로 설정합니다.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

맞춤 속성 사용

앞에서 살펴본 것처럼 var() 함수와 함께 맞춤 속성 값을 사용할 수 있습니다. var() 함수는 값에서 사용할 수 있지만 미디어 쿼리에서는 사용할 수 없습니다. 특히 다른 CSS 함수의 인수로 유용합니다.

대체

값이 설정되지 않은 맞춤 속성을 사용하려고 하면 어떻게 되나요? var() 함수는 대체 값으로 사용될 두 번째 값을 사용합니다. 대체 값은 중첩된 var()이 있는 다른 맞춤 속성일 수도 있습니다.

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

잘못된 값

맞춤 속성이 잘못된 값(예: background-color 속성의 1em 값)으로 확인되면 해당 속성에 대한 해당 요소의 다른 유효한 선언은 사용되지 않습니다. 브라우저는 값을 계산할 때 다른 선언을 삭제한 후에야 값이 유효한지 알 수 있기 때문입니다. 대신 사용된 값은 상속된 값 또는 초기 값이 됩니다.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

위의 예시에서 .invalid 요소의 배경은 파란색이 아닙니다. background-color는 상속되지 않으므로 값은 초깃값인 transparent이 됩니다.

재정의 및 상속

대부분의 경우 값이 상속되는 맞춤 속성의 기본 동작을 사용하는 것이 좋습니다. 속성의 새 값을 설정하면 다른 값으로 재정의될 때까지 해당 요소와 모든 하위 요소에 해당 값이 적용됩니다.

맞춤 속성은 캐스케이드에 의해 결정되므로 더 구체적인 선택기로 재정의할 수도 있습니다.

@property로 더 많은 제어

값을 설정하여 만든 맞춤 속성은 모든 유형이 될 수 있으며 상속됩니다. 맞춤 속성을 더 세부적으로 제어하려면 @property 규칙을 사용하면 됩니다.

이전에 만든 --base-size 속성은 이 @property 선언과 동일합니다.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

syntax 값은 속성에 유효한 CSS 값의 유형을 설정합니다. 해당 속성에 다른 유형을 설정하면 무효화되고 캐스케이드에서 더 높게 설정된 초깃값이나 상속된 값으로 대체됩니다.

@property를 사용하여 맞춤 속성을 만들 때 inherit: false를 사용하여 상속을 사용 중지할 수 있습니다. 상속이 사용 중지된 맞춤 속성의 값을 재정의하면 선택한 요소의 값은 변경되지만 하위 요소의 값은 변경되지 않습니다. 이는 여러 선택기가 동일한 요소를 타겟팅할 때 유용한 경우가 많습니다.

initial-value는 나중에 변경되지 않는 한 속성 값을 설정합니다. 구문이 *(모든 CSS 유형)이 아닌 경우 @property은 initial-value을 설정해야 합니다. 이렇게 하면 속성이 항상 지정된 구문의 값을 가지며 정의되지 않습니다.

JavaScript로 맞춤 속성 업데이트

요소의 맞춤 속성 값은 JavaScript를 사용하여 업데이트할 수 있으며, 이를 통해 사이트의 스타일을 동적으로 업데이트할 수 있습니다.

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

이 예시에서는 #my-button 요소의 스타일 태그를 업데이트합니다. DevTools에서 검사하면 다음이 표시됩니다.

<button id="my-button" style="--color: orange">Click me</button>

위의 예에서는 맞춤 HTML 속성에 저장된 데이터에 액세스하여 맞춤 속성을 설정하는 방법을 확인할 수 있습니다. 각 버튼에는 특정 색상 값이 있는 data-color 속성이 있습니다. 본문 요소에 설정된 --background 맞춤 속성이 클릭된 버튼의 data-color 값으로 재설정됩니다.

getComputedStyle(element).getPropertyValue("--variable")를 사용하여 특정 요소의 속성 값을 가져올 수도 있습니다. 이는 로직이 캐스케이드 값에 응답해야 하는 경우에 유용합니다.