CSS 사용자 정의 속성(변수)은 무엇이며 이중 대시 접두사는 어떻게 작동합니까?

이중 대시 접두사가 붙은 사용자 정의 CSS 속성 이해

제공된 코드 조각에서 접두사가 이중 대시(--)인 CSS 속성을 발견했습니다. --color-link 및 --font-thin과 같은 것입니다. 이러한 속성은 CSS 스타일의 더 큰 유연성과 사용자 정의를 허용하는 사용자 정의 속성인 CSS 사용자 정의 속성 세트에 속합니다.

사용자 정의 속성에 대한 W3C 사양에 따르면 이러한 이중 대시 접두어 속성은 다음 구문을 사용하여 정의됩니다.

--<property-name>: <value>;

여기서 --property-name은 사용자 정의 속성의 이름이고 해당 속성에 대해 원하는 값입니다.

사용자 정의 속성은 여러 가지 용도로 사용됩니다.

• 스타일적 유연성: 여러 요소에 걸쳐 CSS 속성을 쉽게 수정할 수 있습니다. 중복 선언의 필요성을 줄입니다.
• 테마 관리: 사용자 정의 속성을 사용하여 다음을 수행할 수 있습니다. 테마별 변수를 정의하여 다양한 테마 간 전환 과정을 단순화합니다.
• 변수 대체: 변수를 다른 CSS 속성의 값으로 사용할 수 있어 스타일 지정의 유연성이 향상됩니다.

var() 함수를 사용하면 다른 CSS 선언 내의 사용자 정의 속성 값에 액세스할 수 있습니다. 예를 들어, 다음 코드에서 #foo h1 요소의 color 속성은 --main-color 사용자 정의 속성의 값으로 설정됩니다.

#foo h1 {
  color: var(--main-color);
}

참조 정보

• [W3C 사용자 정의 속성 사양](https://www.w3.org/TR/css-variables/)
• [MDN 웹 문서: CSS 사용자 정의 속성](https://developer.mozilla.org/en-US/ docs/Web/CSS/Using_CSS_custom_properties)
• [CSS 요령: 사용자 정의에 관한 모든 것 속성](https://css-tricks.com/custom-properties-all-the-things/)

위 내용은 CSS 사용자 정의 속성(변수)은 무엇이며 이중 대시 접두사는 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!