@property 규칙을 사용하면 커스텀 프로퍼티의 타입, 기본값, 상속 여부 등을명시할 수 있습니다.

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
  • –property-name: 커스텀 프로퍼티의 이름입니다.
  • syntax: 프로퍼티가 받을 수 있는 값의 형식을 정의합니다. 여기서는 <color>로, 색상 값을 의미합니다.

    • 기본 데이터 타입

      syntax 속성에서 사용할 수 있는 기본 데이터 타입에는 다음과 같은 것들이 포함됩니다:

      • <length>: 길이 단위 (예: px, em, rem 등).
      • <number>: 숫자.
      • <percentage>: 백분율.
      • <length-percentage>: 길이 또는 백분율.
      • <color>: 색상 값.
      • <image>: 이미지.
      • <url>: URL.
      • <integer>: 정수.
      • <angle>: 각도.
      • <time>: 시간.
      • <resolution>: 해상도.
      • <transform-function>: 변환 함수.
      • <custom-ident>: 사용자 정의 식별자.

      값 리스트

      • + (공백으로 구분된 값) 또는 # (쉼표로 구분된 값)는 여러 값의 리스트를 나타냅니다. 예를 들어, <color>#는 쉼표로 구분된 색상 값들의 리스트를 의미합니다.

      “Or” 조건

      • 수직선 (|)은 “또는(or)” 조건을 만듭니다. 예를 들어, <length> | auto는 <length> 타입의 값 또는 auto라는 키워드 중 하나를 허용합니다. <color># | <integer>#는 쉼표로 구분된 색상 값들의 리스트 또는 쉼표로 구분된 정수 값들의 리스트 중 하나를 의미합니다.

      이러한 규칙을 사용하면 개발자는 CSS 커스텀 프로퍼티가 허용하는 값의 타입과 형식을 매우 정밀하게 지정할 수 있습니다. 이는 코드의 오류를 줄이고, 의도치 않은 값의 사용을 방지하는 데 도움이 됩니다. 예를 들어, syntax에 <color>를 지정하면 해당 프로퍼티에 색상 값만 할당될 수 있으며, 다른 타입의 값이 할당되면 무시되거나 오류가 발생합니다.

  • inherits: 이 속성이 부모 요소로부터 상속될지 여부를 정의합니다. false로 설정된 경우, 상속되지 않습니다.
  • initial-value: 프로퍼티의 초기값을 정의합니다. 여기서는 #c0ffee라는 색상 값입니다.

@property 규칙을 사용함으로써 CSS에서 커스텀 프로퍼티를 더 명확하게 정의하고, 타입 안전성을 높일 수 있습니다. 이는 CSS의 기능을 확장하고, 특히 복잡한 웹 애플리케이션에서 스타일 관리를 더 효율적으로 만들어 줍니다. 그러나 이 기능은 모든 브라우저에서 지원되는 것은 아니므로, 사용 전에 호환성을 확인하는 것이 중요합니다.

 

Syntax 타입 예시

예시 1: 단일 타입

단일 타입의 값을 허용하는 커스텀 프로퍼티를 정의합니다.

@property --base-size {
  syntax: '<length>';
  initial-value: 16px;
  inherits: false;
}

.element {
  font-size: var(--base-size); /* 길이 단위 값만 허용 */
}

이 예시에서 --base-size는 길이 단위(<length>)의 값만 받습니다. 예를 들어, 16px, 1em과 같은 값이 여기에 해당됩니다.

예시 2: 쉼표로 구분된 값 리스트

쉼표로 구분된 여러 값의 리스트를 허용하는 커스텀 프로퍼티를 정의합니다.

@property --border-radii {
  syntax: '<length>#';
  initial-value: 5px, 10px, 5px, 10px;
  inherits: false;
}

.box {
  border-radius: var(--border-radii); /* 쉼표로 구분된 길이 값 리스트 */
}

이 예시에서 --border-radii는 쉼표로 구분된 여러 길이 단위 값의 리스트(<length>#)를 받습니다. 이를 통해 상자의 각 모서리에 다른 border-radius 값을 적용할 수 있습니다.

예시 3: “Or” 조건

여러 타입 중 하나를 허용하는 “또는(or)” 조건을 사용하는 커스텀 프로퍼티를 정의합니다.

@property --grid-span {
  syntax: '<integer> | auto';
  initial-value: auto;
  inherits: false;
}

.item {
  grid-column: var(--grid-span); /* 정수 값 또는 'auto' */
}

이 예시에서 --grid-span은 정수(<integer>) 또는 auto 중 하나를 받습니다. 이를 통해 그리드 아이템의 컬럼 스팬을 유연하게 설정할 수 있습니다.

이러한 예시들은 @property의 syntax 속성을 활용하여 커스텀 프로퍼티의 허용 값의 타입과 형식을 다양하게 정의하는 방법을 보여줍니다. 이를 통해 CSS 스타일링을 더 안정적이고 정확하게 관리할 수 있습니다.

예시 1: 색상 프로퍼티

@property --main-bg-color {
  syntax: '<color>';
  inherits: true;
  initial-value: lightblue;
}

body {
  --main-bg-color: peachpuff;
  background-color: var(--main-bg-color);
}

예시 2: 수치 프로퍼티

@property --gap {
  syntax: '<length>';
  inherits: false;
  initial-value: 16px;
}

.container {
  display: grid;
  grid-gap: var(--gap);
}

예시 3: 애니메이션 지속 시간

@property --animation-duration {
  syntax: '<time>';
  inherits: false;
  initial-value: 0.5s;
}

.animated-element {
  animation-duration: var(--animation-duration);
}

예시 4: 폰트 크기

@property --font-size {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 18px;
}

.text {
  font-size: var(--font-size);
}

@property 규칙을 사용하는 것은 CSS에 몇 가지 주요 장점

  1. 타입 안전성 강화: @property를 사용하면, 커스텀 프로퍼티에 할당될 수 있는 값의 타입을 명시적으로 정의할 수 있습니다. 이는 실수로 잘못된 타입의 값을 할당하는 것을 방지하고, 코드의 안정성을 향상시킵니다.

  2. 기본값 설정: 커스텀 프로퍼티에 기본값을 지정할 수 있습니다. 이는 해당 프로퍼티가 다른 곳에서 정의되지 않은 경우에도 안전하게 사용될 수 있도록 해줍니다.

  3. 상속 제어: 커스텀 프로퍼티가 부모 요소로부터 상속될지 여부를 결정할 수 있습니다. 이를 통해 스타일링의 일관성을 유지하면서도 필요에 따라 더 세밀한 제어가 가능해집니다.

  4. 애니메이션과의 호환성: 타입과 기본값이 명시된 커스텀 프로퍼티는 CSS 애니메이션이나 전환에 사용될 때 더 예측 가능하고 안정적인 동작을 보장합니다.

  5. 향상된 유지 보수성: 프로퍼티의 사용 의도와 범위가 코드 내에서 명확해지므로, 대규모 프로젝트 또는 팀 환경에서 작업할 때 코드의 가독성과 유지 보수성이 향상됩니다.

  6. 개발자 도구와의 통합: 최신 웹 브라우저의 개발자 도구는 @property 규칙을 인식하고, 이를 통해 스타일링을 더 쉽게 디버깅하고 조정할 수 있습니다.

이러한 장점들로 인해 @property 규칙은 CSS의 사용성을 크게 향상시키며, 특히 복잡한 웹 애플리케이션과 대규모 프로젝트에서 그 가치가 더욱 두드러집니다.

@property 규칙은 기존 CSS 커스텀 프로퍼티의 몇 가지 제한사항을 극복하기 위해 도입되었습니다. 기존 방식에서 발생할 수 있는 문제점들을 예시를 통해 설명하겠습니다.

기존 CSS 커스텀 프로퍼티의 문제점

예시 1: 타입 안정성 부족

기존 CSS 커스텀 프로퍼티는 어떤 타입의 값이든 받을 수 있어, 잘못된 타입의 값이 할당될 위험이 있습니다.

:root {
  --main-color: blue; // 정상적인 색상 값
}

.element {
  color: var(--main-color, black);
}

// 잘못된 사용
.element {
  --main-color: 10px; // 색상 대신 길이 단위를 사용
}

위 예시에서 --main-color는 색상 값을 나타내지만, 실수로 길이 단위가 할당될 수 있습니다. 이는 예상치 못한 스타일 결과를 초래할 수 있습니다.

예시 2: 기본값 부재

기존 방식에서는 커스텀 프로퍼티가 어디에서도 정의되지 않았을 때의 기본값을 설정할 수 없습니다. 이로 인해 예상치 못한 스타일링 문제가 발생할 수 있습니다.

.element {
  color: var(--undefined-color); // 정의되지 않은 프로퍼티
}

위 코드에서 --undefined-color가 정의되지 않았으므로, .element는 기대했던 색상을 표시하지 않을 것입니다.

@property의 해결책

@property 규칙을 사용하면 이러한 문제점들을 해결할 수 있습니다.

예시 1: 타입 안정성 향상

@property는 프로퍼티에 할당될 수 있는 값의 타입을 정의할 수 있어, 잘못된 타입의 값이 할당되는 것을 방지합니다.

@property --main-color {
  syntax: '<color>';
  initial-value: black;
  inherits: false;
}

.element {
  color: var(--main-color);
}

위 코드에서 --main-color는 색상 값만 받을 수 있습니다. 다른 타입의 값이 할당되면 무시됩니다.

예시 2: 기본값 설정

@property를 사용하면 커스텀 프로퍼티에 기본값을 설정할 수 있어, 프로퍼티가 정의되지 않은 경우에도 안정적인 스타일링을 보장합니다.

@property --theme-color {
  syntax: '<color>';
  initial-value: green;
  inherits: false;
}

.element {
  background-color: var(--theme-color); // 기본값 green이 적용됨
}

initial-value를 변경하는 방법

@property에서 설정한 initial-value를 직접 수정하거나, 해당 커스텀 프로퍼티를 사용하는 요소에 새로운 값을 할당함으로써 색상을 변경할 수 있습니다.

@property에서 설정한 initial-value를 직접 수정합니다. 이는 전역적으로 해당 커스텀 프로퍼티의 기본값을 변경하는 것입니다.

@property --main-color {
  syntax: '<color>';
  initial-value: red; /* 기존의 기본값에서 새로운 값으로 변경 */
  inherits: false;
}

이렇게 변경하면, --main-color를 사용하는 모든 요소에서 새로운 기본값 red가 적용됩니다.

개별 요소에서 색상을 변경하는 방법

개별 요소에 새로운 값을 할당합니다. 이 방법은 특정 요소에만 변경된 색상을 적용할 때 유용합니다.

.element {
  --main-color: blue; /* 이 요소에서만 색상을 blue로 변경 */
  color: var(--main-color);
}

위 코드에서 .element 클래스를 가진 요소의 --main-color 값을 blue로 변경했습니다. 이 변경은 해당 요소에만 적용됩니다.

두 방법 모두 색상 변경을 달성할 수 있지만, 사용하는 컨텍스트나 필요에 따라 적합한 방법을 선택해야 합니다. 전역적인 변경을 원한다면 @property의 initial-value를 수정하고, 특정 요소에만 적용하고 싶다면 해당 요소에 커스텀 프로퍼티를 직접 할당하세요.

여러 개의 색상을 사용하고자 할 때, 각각의 색상에 대해 별도의 @property 규칙을 선언해야 합니다. 이렇게 함으로써 각 색상에 대해 타입, 기본값, 상속 여부를 명확하게 지정할 수 있고, 이를 통해 스타일 시트의 유지 보수와 확장성을 향상시킬 수 있습니다.

예를 들어, 서로 다른 목적으로 사용되는 세 가지 색상이 있다고 가정해 보겠습니다: 배경색, 텍스트 색상, 그리고 강조 색상. 이들 각각에 대해 @property를 사용하여 선언할 수 있습니다.

@property --background-color {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
}

@property --text-color {
  syntax: '<color>';
  initial-value: black;
  inherits: true;
}

@property --accent-color {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}

이 코드에서 --background-color, --text-color, --accent-color는 각각 배경색, 텍스트 색상, 강조 색상을 나타내는 커스텀 프로퍼티입니다. 각 프로퍼티는 해당하는 색상의 기본값을 가지며, 이 값들은 필요에 따라 수정될 수 있습니다.

이러한 방식으로 여러 색상을 각각의 @property로 선언하는 것은 스타일 시트에서 색상 관리를 체계적이고 유연하게 만들어 줍니다.

예시: 색상 상속

부모 요소에서 정의된 색상이 하위 요소로 상속되는 경우를 생각해 보겠습니다.

@property --main-color {
  syntax: '<color>';
  initial-value: blue;
  inherits: true;
}

.container {
  --main-color: green; /* 상위 요소에서 색상을 green으로 설정 */
}

.container .child {
  /* 하위 요소에서는 상위 요소로부터 색상을 상속받음 */
  color: var(--main-color); /* green 색상이 적용됨 */
}

이 예시에서 .container 클래스를 가진 요소는 --main-color를 green으로 설정했습니다. --main-color의 inherits 속성이 true이기 때문에, .container의 하위 요소인 .child 역시 이 색상을 상속받아 green 색상이 적용됩니다. 만약 .child에서 --main-color를 다르게 설정하지 않았다면, 자동으로 상위 요소의 값을 상속받게 됩니다.

예시: 색상 상속 안 됨

부모 요소에서 정의된 색상이 하위 요소로 상속되지 않는 경우를 생각해 보겠습니다.

@property --main-color {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}

.container {
  --main-color: green; /* 상위 요소에서 색상을 green으로 설정 */
}

.container .child {
  /* 하위 요소에서는 상위 요소로부터 색상을 상속받지 않음 */
  color: var(--main-color); /* 초기값인 blue 색상이 적용됨 */
}

이 예시에서 .container 클래스를 가진 요소는 --main-color를 green으로 설정했습니다. 하지만 --main-color의 inherits 속성이 false이기 때문에, .container의 하위 요소인 .child는 이 색상을 상속받지 않고, 대신 --main-color의 초기값인 blue 색상이 적용됩니다.