CSS 마스터하기: @property를 사용한 사용자 정의 속성 등록

사용자 정의 속성(CSS 변수라고도 함)은 CSS를 작성하고 유지 관리하는 방식을 혁신했습니다. 재사용 가능한 값을 정의하여 스타일시트를 더욱 유연하고 유지 관리할 수 있게 해줍니다. 그러나 단순히 값을 정의하는 것 이상을 할 수 있다면 어떨까요? 사용자 정의 속성이 보유하는 값의 유형, 초기 값 및 상속 동작과 함께 정의할 수 있다면 어떨까요? 바로 @property가 그 역할을 합니다.

@property란 무엇인가요?

@property는 브라우저에 사용자 정의 속성을 명시적으로 등록할 수 있도록 해주는 CSS 규칙입니다. 이 등록 프로세스는 속성의 예상 유형, 초기 값 및 부모 요소에서 상속해야 하는지 여부에 대한 정보를 브라우저에 제공합니다. 이를 통해 다음과 같은 몇 가지 고급 기능을 사용할 수 있습니다.

• 유형 검사: 사용자 정의 속성에 올바른 유형의 값이 할당되었는지 확인합니다.
• 애니메이션: 숫자 또는 색상과 같은 특정 유형의 사용자 정의 속성에 대해 부드러운 전환 및 애니메이션을 활성화합니다.
• 기본값: 사용자 정의 속성이 명시적으로 정의되지 않은 경우 대체 값을 제공합니다.
• 상속 제어: 사용자 정의 속성이 부모 요소에서 값을 상속할지 여부를 결정합니다.

CSS 변수에 유형 안전성을 추가하는 것으로 생각하세요. 더욱 강력하고 예측 가능한 스타일시트를 만들 수 있습니다.

@property의 구문

@property 규칙은 다음과 같은 기본 구문을 따릅니다.

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

각 부분을 자세히 살펴보겠습니다.

• --property-name: 등록하려는 사용자 정의 속성의 이름입니다. 두 개의 하이픈(--)으로 시작해야 합니다.
• syntax: 속성에 예상되는 값의 유형을 정의합니다. 이는 유형 검사 및 애니메이션에 매우 중요합니다. 아래에서 사용 가능한 구문 값을 자세히 살펴보겠습니다.
• inherits: 속성이 부모 요소에서 상속해야 하는지 여부를 나타내는 부울 값입니다. 지정하지 않으면 기본값은 false입니다.
• initial-value: 요소에서 명시적으로 설정되지 않은 경우 속성의 기본값입니다. 이렇게 하면 항상 대체 값을 사용할 수 있습니다.

syntax 설명자 이해

syntax 설명자는 @property 규칙에서 가장 중요한 부분입니다. 사용자 정의 속성에 어떤 종류의 값을 예상할지 브라우저에 알려줍니다. 다음은 몇 가지 일반적인 구문 값입니다.

• *: 모든 값을 허용합니다. 이는 가장 허용적인 구문이며 기본적으로 등록 없이 표준 CSS 변수의 동작을 복제합니다. 이 기능은 신중하게 사용하세요.
• <length>: 길이 값(예: 10px, 2em, 50%)을 예상합니다. 이는 서로 다른 길이 값 사이의 부드러운 애니메이션을 가능하게 합니다.
• <number>: 숫자 값(예: 1, 3.14, -5)을 예상합니다. 불투명도 또는 크기와 같은 숫자 속성에 애니메이션을 적용하는 데 유용합니다.
• <percentage>: 백분율 값(예: 25%, 100%)을 예상합니다.
• <color>: 색상 값(예: #f00, rgb(255, 0, 0), hsl(0, 100%, 50%))을 예상합니다. 부드러운 색상 전환 및 애니메이션을 사용하도록 설정합니다.
• <image>: 이미지 값(예: url(image.jpg), linear-gradient(...))을 예상합니다.
• <integer>: 정수 값(예: 1, -10, 0)을 예상합니다.
• <angle>: 각도 값(예: 45deg, 0.5rad, 200grad)을 예상합니다. 회전에 애니메이션을 적용하는 데 유용합니다.
• <time>: 시간 값(예: 1s, 500ms)을 예상합니다. 사용자 정의 속성을 통해 애니메이션 지속 시간 또는 지연을 제어하는 데 유용합니다.
• <resolution>: 해상도 값(예: 300dpi, 96dpi)을 예상합니다.
• <transform-list>: 변환 함수 목록(예: translateX(10px) rotate(45deg))을 예상합니다. 복잡한 변환에 애니메이션을 적용할 수 있습니다.
• <custom-ident>: 사용자 지정 식별자(문자열)를 예상합니다. enum과 유사합니다.
• <string>: 문자열 값(예: "Hello World")을 예상합니다. 문자열에 애니메이션을 적용하는 것은 일반적으로 지원되지 않으므로 주의하십시오.
• 사용자 정의 구문: 위의 연산자와 |(또는), [](그룹화), +(하나 이상), *(0개 이상) 및 ?(0개 또는 1개)의 조합을 사용하여 더 복잡한 구문을 만들 수 있습니다. 예를 들어 <length> | <percentage>는 길이 또는 백분율 값을 허용합니다.

올바른 syntax를 선택하는 것은 @property의 모든 기능을 활용하는 데 필수적입니다.

@property의 실제 예

CSS에서 @property를 사용하는 몇 가지 실제 예를 살펴보겠습니다.

예시 1: 배경색 애니메이션

버튼의 배경색에 애니메이션을 적용한다고 가정해 보겠습니다. @property를 사용하여 배경색에 대한 사용자 정의 속성을 등록한 다음 CSS 전환을 사용하여 애니메이션을 적용할 수 있습니다.

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

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

이 예에서는 --bg-color 사용자 정의 속성을 <color> 구문으로 등록합니다. 즉, 색상 값을 예상합니다. initial-value는 흰색(#fff)으로 설정됩니다. 버튼 위로 마우스를 가져가면 --bg-color가 빨간색(#f00)으로 변경되고 전환은 배경색 변경에 부드럽게 애니메이션을 적용합니다.

예시 2: 숫자로 테두리 반경 제어

@property를 사용하여 요소의 테두리 반경을 제어하고 애니메이션을 적용할 수 있습니다.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

여기서는 --border-radius를 <length>로 등록하여 px, em 또는 %와 같은 길이 값을 허용합니다. 초기 값은 0px입니다. .rounded-box 위로 마우스를 가져가면 테두리 반경이 20px로 애니메이션됩니다.

예시 3: 그림자 오프셋에 애니메이션 적용

상자 그림자의 가로 오프셋에 애니메이션을 적용한다고 가정해 보겠습니다.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

이 경우 --shadow-offset-x는 <length>로 등록되고 초기 값은 0px입니다. box-shadow 속성은 가로 오프셋에 이 사용자 정의 속성을 사용합니다. 마우스를 가져가면 오프셋이 10px로 애니메이션됩니다.

예시 4: 테마 지정을 위한 <custom-ident> 사용

<custom-ident> 구문을 사용하면 미리 정의된 문자열 값 집합을 정의하여 CSS 변수에 대한 enum을 효과적으로 만들 수 있습니다. 이는 테마 지정 또는 개별 상태를 제어하는 데 유용합니다.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

여기에서 --theme은 <custom-ident> 구문으로 등록됩니다. @property 규칙 자체에서 허용되는 식별자를 명시적으로 나열하지는 않지만 코드는 light와 dark임을 의미합니다. 그런 다음 CSS는 조건부 논리(var(--theme) == light ? ... : ...)를 사용하여 현재 테마에 따라 다른 스타일을 적용합니다. 클래스 dark-theme을 요소에 추가하면 테마가 어둡게 전환됩니다. var()를 사용한 조건부 논리는 표준 CSS가 아니며 종종 전처리기 또는 JavaScript가 필요합니다. 더 표준적인 접근 방식은 CSS 클래스와 계단을 사용하는 것입니다.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

이 수정된 예제에서는 body 요소의 data-theme 특성을 사용하여 테마를 제어합니다. JavaScript(주석 처리됨)는 특성을 light와 dark 사이에서 전환하는 데 사용됩니다. 이는 CSS 변수를 사용한 테마 지정에 대한 더욱 강력하고 표준적인 접근 방식입니다.

@property 사용의 이점

@property를 사용하면 몇 가지 이점이 있습니다.

• 코드 가독성 및 유지 관리성 향상: 사용자 정의 속성에 대한 예상되는 값의 유형을 명시적으로 정의하면 코드를 더 이해하기 쉽고 오류가 발생하기 쉽지 않도록 할 수 있습니다.
• 애니메이션 기능 향상: @property를 사용하면 사용자 정의 속성에 대해 부드러운 전환과 애니메이션을 사용할 수 있으므로 동적이고 매력적인 사용자 인터페이스를 만들 수 있는 새로운 가능성이 열립니다.
• 더 나은 성능: 브라우저는 등록된 사용자 정의 속성을 사용하여 요소의 렌더링을 최적화하여 성능을 향상시킬 수 있습니다.
• 유형 안전성: 브라우저는 할당된 값이 선언된 구문과 일치하는지 확인하여 예기치 않은 동작을 방지하고 디버깅을 더 쉽게 만듭니다. 이는 많은 개발자가 코드베이스에 기여하는 대규모 프로젝트에서 특히 유용합니다.
• 기본값: 사용자 정의 속성이 명시적으로 설정되지 않은 경우에도 항상 유효한 값을 갖도록 하여 오류를 방지하고 CSS의 견고성을 향상시킵니다.

브라우저 호환성

2023년 말 현재 @property는 양호하지만 보편적이지 않은 브라우저 지원을 제공합니다. Chrome, Firefox, Safari 및 Edge를 비롯한 대부분의 최신 브라우저에서 지원됩니다. 그러나 이전 브라우저는 지원하지 않을 수 있습니다. 프로덕션에서 @property를 사용하기 전에 Can I use...와 같은 웹사이트에서 최신 브라우저 호환성 정보를 항상 확인하세요.

이전 브라우저를 처리하려면 기능 쿼리(@supports)를 사용하여 대체 스타일을 제공할 수 있습니다.

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

--property 및 value를 실제 사용자 정의 속성 및 해당 값으로 바꿉니다.

@property를 사용해야 하는 경우

다음과 같은 시나리오에서 @property 사용을 고려하세요.

• 사용자 정의 속성에 애니메이션을 적용해야 하는 경우: 이는 @property의 주요 사용 사례입니다. 올바른 구문으로 속성을 등록하면 부드러운 애니메이션이 가능해집니다.
• 사용자 정의 속성에 대한 유형 안전성을 적용하려는 경우: 사용자 정의 속성이 항상 특정 유형의 값을 유지하도록 하려면 @property를 사용하여 등록합니다.
• 사용자 정의 속성에 대한 기본값을 제공하려는 경우: initial-value 설명자를 사용하면 대체 값을 지정할 수 있습니다.
• 대규모 프로젝트에서: @property는 코드 유지 관리성을 향상시키고 오류를 방지하므로 여러 개발자가 있는 대규모 프로젝트에 특히 유용합니다.
• 재사용 가능한 구성 요소 또는 디자인 시스템을 만들 때: @property는 구성 요소 간의 일관성 및 예측 가능성을 보장하는 데 도움이 될 수 있습니다.

피해야 할 일반적인 실수

• syntax 설명자를 잊어버린 경우: syntax 설명자가 없으면 브라우저는 예상되는 값 유형을 알 수 없으며 애니메이션이 제대로 작동하지 않습니다.
• 잘못된 syntax 값을 사용하는 경우: 잘못된 구문을 선택하면 예기치 않은 동작이 발생할 수 있습니다. 값의 예상 유형을 정확하게 반영하는 구문을 선택해야 합니다.
• initial-value를 제공하지 않는 경우: 초기 값이 없으면 사용자 정의 속성이 정의되지 않아 오류가 발생할 수 있습니다. 항상 적절한 기본값을 제공하세요.
• *를 구문으로 과도하게 사용하는 경우: 편리하지만 *를 사용하면 유형 검사 및 애니메이션의 이점이 무효화됩니다. 실제로 모든 유형의 값을 허용해야 하는 경우에만 사용하세요.
• 브라우저 호환성을 무시하는 경우: 항상 브라우저 호환성을 확인하고 이전 브라우저에 대한 대체 스타일을 제공하세요.

@property 및 CSS Houdini

@property는 CSS Houdini라고 하는 더 큰 API 집합의 일부입니다. Houdini를 사용하면 개발자가 브라우저의 렌더링 엔진을 활용하여 스타일 지정 및 레이아웃 프로세스를 전례 없이 제어할 수 있습니다. 다른 Houdini API는 다음과 같습니다.

• Paint API: 사용자 지정 배경 이미지와 테두리를 정의할 수 있습니다.
• Animation Worklet API: 브라우저의 컴포지터 스레드에서 직접 실행되는 고성능 애니메이션을 만드는 방법을 제공합니다.
• Layout API: 사용자 지정 레이아웃 알고리즘을 정의할 수 있습니다.
• Parser API: 브라우저의 CSS 파서에 대한 액세스를 제공합니다.

@property는 배우기 비교적 간단한 Houdini API이지만 더 발전된 Houdini 기능을 탐색할 수 있는 기회를 제공합니다.

결론

@property는 사용자 정의 속성에 대한 고급 기능을 잠금 해제하는 강력한 CSS 규칙입니다. 브라우저에 사용자 정의 속성을 등록하면 유형 안전성을 적용하고 부드러운 애니메이션을 활성화하며 CSS 코드의 전반적인 견고성을 향상시킬 수 있습니다. 브라우저 지원이 보편적이지는 않지만 특히 대규모 프로젝트 및 디자인 시스템에서 @property를 사용하면 현대 웹 개발에 귀중한 도구가 됩니다. @property를 활용하여 CSS 기술을 한 단계 더 발전시키세요!