Properties

Properties

Editing
  • account_tree
  • bug_report

--*

사용자 정의 값을 설정할 때 연속된 하이픈(--)은 접두어로 사용한다.

설명

사용자 정의 값을 지정하기 위한 사용자 속성(변수)명은 대소문자를 구분한다. 다음의 선언은 별개로 처리한다.

--my-color: #FF0000;
--My-color: #FFFF00;

이렇게 선언된 값은 다음과 같이 var() 함수를 이용해 사용이 가능하다.

background-color: var(--my-color);
border-color: var(--My-color);

사용자 정의 값은 유효 범위를 가지고 있다. 루트(:root) 또는 html 선택자에서 정의한 사용자 정의 값은 전역 값으로 동일 웹 페이지내 모든 CSS 속성에서 사용이 가능하다. 사용자 정의 값은 하위로 상속되어지므로 루트가 아닌 다른 선택자에서 정의한 사용자 정의 값은 종속 관계가 아니라면 사용할 수 없다. 또한 종속 관계라 할 지라도 상위에서 사용할 수 없다.

사용 가능한 값 타입

<declaration-value>

<declaration-value> 타입은 시퀀스에 허용되지 않는 토큰이 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치한다. 유효한 선언이 값으로 가질 수 있는 전체를 나타낸다.

  • CSS Custom Properties for Cascading Variables Module Level 1
    <declaration-value>?

구문

  • --mycolor: #FFFF00;
    CSS3
    Example

버전 명세

Modules
Module NameStatusSummary
CSS Custom Properties for Cascading Variables Module Level 1

Last review date: 2022-11-27

연관 목록

지원 웹브라우저