CSS @property 규칙

CSS @property 규칙

@property 규칙은 스타일 시트에서 직접 사용자 정의 CSS 속성을 정의할 수 있으며 어떤 JavaScript도 실행하지 않아도 됩니다.

@property 규칙은 데이터 타입 검사와 제약, 기본 값을 설정하고 속성이 값을 상속할 수 있는지 정의합니다.

사용자 정의 속성의 인스턴스를 정의합니다:

@property --myColor {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

위 정의는 다음과 같은 의미를 가집니다: --myColor 색상 속성으로, 부모 요소의 값을 상속할 수 있으며 기본 값은 lightgray입니다.

CSS에서 사용할 수 있는 사용자 정의 속성을 사용하려면 var() 함수:

body {
  background-color: var(--myColor);
}

사용 @property 의 장점:

• 타입 검사：사용자 정의 속성의 데이터 타입을 지정해야 합니다. 예를 들어 <number>、<color>、<length>와 같습니다. 오류를 방지하고 사용자 정의 속성을 올바르게 사용하도록 보장합니다
• 기본 값 설정：사용자 정의 속성에 기본 값을 설정할 수 있습니다. 이는 후에 잘못된 값을 할당했을 때 브라우저가 정의된 대체 값을 사용하도록 보장합니다.
• 상속 행동 설정：사용자 정의 속성이 부모 요소의 값을 상속할 수 있는지 지정해야 합니다.

브라우저 지원

표의 숫자는 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

간단한 @property 예제

다음 예제에서는 두 개의 사용자 정의 속성을 정의합니다：--my-bg-color 및 --my-txt-color. 그런 다음 div는 background-color 및 color 에서 사용자 정의 속성을 사용합니다：

예제

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

직접 시험해보세요

다른 @property 인스턴스

다음 예제에서는 <div> 요소에 기본 사용자 정의 속성을 사용합니다. 그런 다음 .fresh 및 .nature 클래스에서 사용자 정의 속성을 다른 색상으로 덮어 씁니다 (기타 색상을 설정하면), 효과가 매우 좋습니다：

예제

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

직접 시험해보세요

타입 검사와 대체 값을 통해 오류를 방지합니다

다음 예제에서는 우리는 .nature 클래스에서 사용자 정의 속성이 정수로 설정되면 initial-value 속성에서 정의된 대체 색상 (lightgray)：

예제

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

직접 시험해보세요

inherits 값을 사용합니다

다음 예제에서는 우리는 inherits 값이 설정됩니다: false이는 사용자 정의 속성이 부모 요소에서 값을 상속받지 않는다는 것을 의미합니다. 결과를 확인하세요：

예제

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

직접 시험해보세요

다음 예제에서는 inherits 값이 설정됩니다: true이는 사용자 정의 속성이 부모 요소에서 값을 상속받는다는 것을 의미합니다. 결과를 확인하세요：

예제

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

직접 시험해보세요

@property를 사용하여 부드러운 애니메이션을 생성합니다

사용 @property 이전에 애니메이션할 수 없었던 내용을 애니메이션할 수 있는 새로운 기회를 제공하는 규칙은 빛차기입니다. 다음 예제를 확인하세요:

예제

빛차기에 두 개의 사용자 정의 속성을 지정합니다:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

직접 시험해보세요

CSS @property 규칙