CSS @property

CSS `@property`: 사용자 정의 속성에 애니메이션과 전환 적용

*@property*는 CSS에서 **사용자 정의 변수(CSS Variables)**에 애니메이션과 전환 효과를 추가할 수 있도록 허용하는 규칙입니다. 일반적으로 CSS 변수는 애니메이션이 적용되지 않지만, @property를 사용하면 사용자 정의 속성에 대해 애니메이션 효과를 자유롭게 사용할 수 있습니다.

1. `@property`의 기본 개념

CSS 변수를 사용하면 다양한 스타일을 효율적으로 관리할 수 있지만, 기본적으로 변수에 애니메이션이나 전환 효과를 적용할 수는 없습니다. 그러나 @property 규칙을 사용하면 CSS 변수를 애니메이션할 수 있도록 등록할 수 있으며, 이를 통해 트랜지션이나 애니메이션과 결합된 다이내믹한 스타일을 만들 수 있습니다.

기본 구문

@property --custom-property {
  syntax: '<color>'; /* 값의 유형 (예: 색상) */
  inherits: false; /* 상속 여부 */
  initial-value: #000000; /* 기본값 */
}

syntax: 속성의 유형을 정의합니다. 예를 들어, <color>, <length>, <number> 등이 있습니다.
inherits: 상속 여부를 정의하며, 기본값은 false입니다.
initial-value: 사용자 정의 속성의 초기값을 설정합니다.

2. `@property` 속성 설정

@property를 사용하면 변수에 대한 애니메이션이나 전환을 설정할 수 있습니다. 색상, 길이 등의 유형을 지정할 수 있으며, 이를 통해 CSS 변수가 어떻게 다루어질지 정의합니다.

예시: 색상에 대한 사용자 정의 속성 설정

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

이 코드는 **--bg-color**라는 사용자 정의 속성에 대해 색상 유형을 정의하고, 초기값을 **파란색(#3498db)**으로 설정합니다.

예시: 숫자에 대한 사용자 정의 속성 설정

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

이 코드는 **--spacing**이라는 사용자 정의 속성을 **길이(length)**로 설정하고, 초기값을 10px로 지정합니다.

3. 사용자 정의 속성에 전환(transition) 적용

@property로 정의한 속성에 transition을 적용하여 부드러운 변화를 만들 수 있습니다. 이렇게 하면 CSS 변수의 값이 바뀔 때 서서히 변화하는 효과를 줄 수 있습니다.

예시: 배경색 전환 효과

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

.box {
  width: 200px;
  height: 200px;
  background-color: var(--bg-color);
  transition: background-color 1s ease;
}

.box:hover {
  --bg-color: #e74c3c; /* 배경색이 빨간색으로 서서히 변화 */
}

이 코드는 --bg-color 변수가 파란색에서 빨간색으로 서서히 전환됩니다. 사용자가 <div> 요소에 마우스를 올리면 배경색이 1초 동안 부드럽게 변합니다.

4. 사용자 정의 속성에 애니메이션 적용

@property로 정의된 사용자 정의 속성에 애니메이션도 적용할 수 있습니다. **@keyframes**와 결합하여 CSS 변수에 대해 다양한 애니메이션 효과를 줄 수 있습니다.

예시: 배경색 애니메이션

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

@keyframes changeColor {
  0% {
    --bg-color: #3498db;
  }
  100% {
    --bg-color: #e74c3c;
  }
}

.box {
  width: 200px;
  height: 200px;
  background-color: var(--bg-color);
  animation: changeColor 3s infinite alternate; /* 3초 동안 색상 변경 반복 */
}

이 코드는 --bg-color 변수가 파란색에서 빨간색으로 3초 동안 천천히 변하는 애니메이션을 적용하며, 무한 반복됩니다.

5. 다양한 유형의 `@property` 적용

1) 크기(길이)에 대한 애니메이션

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

@keyframes resize {
  0% {
    --box-size: 100px;
  }
  100% {
    --box-size: 200px;
  }
}

.box {
  width: var(--box-size);
  height: var(--box-size);
  background-color: #3498db;
  animation: resize 2s infinite alternate;
}

이 코드는 **--box-size**가 100px에서 200px으로 커지며, 2초 동안 크기가 변하는 애니메이션을 적용합니다.

2) 숫자에 대한 전환 효과

@property --opacity-level {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  opacity: var(--opacity-level);
  transition: opacity 1s ease;
}

.box:hover {
  --opacity-level: 0.5; /* 투명도가 0.5로 서서히 전환 */
}

이 코드는 --opacity-level 변수가 투명도 1에서 0.5로 서서히 변화하도록 설정합니다.

6. 실전 예시: 반응형 애니메이션 카드

<div class="card"></div>

@property --card-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@keyframes scaleCard {
  0% {
    --card-scale: 1;
  }
  100% {
    --card-scale: 1.2;
  }
}

.card {
  width: 200px;
  height: 300px;
  background-color: #3498db;
  transform: scale(var(--card-scale));
  animation: scaleCard 2s infinite alternate;
}

이 코드는 카드 요소가 1배 크기에서 1.2배 크기로 부드럽게 확대되는 애니메이션을 적용합니다. 카드가 천천히 커지고 다시 작아지는 애니메이션이 무한 반복됩니다.

*CSS @property*는 사용자 정의 속성에 애니메이션과 전환 효과를 적용할 수 있게 해주는 강력한 도구입니다. 이를 통해 CSS 변수를 더 유연하게 사용할 수 있으며, 다양한 동적 효과를 만들 수 있습니다. 특히 색상, 크기, 숫자 등 다양한 데이터 유형에 대해 애니메이션을 적용할 수 있으므로, 복잡한 UI와 사용자 경험을 더욱 다이내믹하게 설계할 수 있습니다.

코딩 스쿨 CSS