CSS는 시간이 지남에 따라 발전하고 있으며 가장 일반적으로 사용되는 기능을 더 쉽게 구현할 수 있도록 새로운 기능이 추가되고 있습니다. 오늘 우리는 CSS를 더욱 강력하게 만드는 이러한 기능을 한 번 살펴보겠습니다.

@property(at-rule)를 사용하면 개발자가 사용자 정의 속성을 정의할 수 있습니다. 이번 포스팅에서는 @property가 무엇인지, 왜 유용한지, 어떻게 사용하는지 몇 가지 실제 예시를 통해 살펴보겠습니다.

@property At-Rule이란 무엇입니까?

CSS 사용자 정의 속성(변수)은 오랫동안 사용되어 왔으며 이를 통해 색상, 글꼴 크기 또는 기타 스타일 값과 같은 값을 저장하고 재사용할 수 있습니다. 그러나 최근까지 유형 정의, 기본값 정의와 같은 고급 기능이 부족했습니다. 이는 복잡한 애니메이션을 구현하려는 경우 특히 유용합니다(향후 게시물에서 자세히 설명).

@property 규칙은 js를 실행할 필요 없이 스타일시트에서 직접 사용자 정의 속성 등록을 나타냅니다.

기본 구문

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• 구문: 속성의 예상 데이터 유형을 정의합니다. 이 경우 색상()이지만 , 또는 와 같은 유효한 CSS 데이터 유형일 수 있습니다.
• 상속: 속성 값이 하위 요소에 상속되어야 하는지 여부를 결정합니다. true 또는 false로 설정할 수 있습니다.
• 초기값: 아무것도 제공되지 않은 경우 속성의 기본값을 설정합니다.

@property를 사용해야 하는 경우

• 원활한 동작을 보장하기 위해 사용자 정의 속성에 애니메이션을 적용하거나 전환해야 하는 경우.
• 잘못된 값으로 인한 버그를 방지하기 위해 데이터 유형(예: 색상, 길이, 숫자)을 적용합니다.
• 값이 누락된 경우 일관된 스타일을 유지하기 위해 사용자 정의 속성의 기본값을 설정합니다.
• 상위 요소와 하위 요소 간의 맞춤 속성 상속을 제어합니다.

더 읽어보세요

• MDN 문서 @property

원본 게시물