# CSS @property와 새로운 스타일

> Clean Markdown view of GeekNews topic #16613. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16613](https://news.hada.io/topic?id=16613)
- GeekNews Markdown: [https://news.hada.io/topic/16613.md](https://news.hada.io/topic/16613.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-09-05T10:00:20+09:00
- Updated: 2024-09-05T10:00:20+09:00
- Original source: [ryanmulligan.dev](https://ryanmulligan.dev/blog/css-property-new-style/)
- Points: 2
- Comments: 1

## Topic Body

- @property 규칙은 모든 최신 브라우저에서 지원되며, CSS 사용자 정의 속성의 구문, 초기 값, 상속을 명시적으로 정의할 수 있는 기능을 제공함  
- CSS Houdini와 CSS Properties and Values API가 처음 도입된 이후로 많은 시간이 흘렀음  
- @property의 가능성을 탐구하는 데모를 통해 다음 세대의 CSS가 어떤 것을 제공할 수 있는지 살펴봄  
  
##### Calls to action(행동 유도 요소)  
  
- 웹페이지에서 주목을 끄는 CTA는 많은 사이트에서 사용되고 있음  
- 이 스타일을 직접 시도해보았으며, 결과는 CodePen에서 확인 가능함  
- 데모의 CSS 패널을 열어보면 애니메이션이 필요한 사용자 정의 속성에 관련된 @property 규칙을 확인할 수 있음  
  
```css  
@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}  
```  
  
- @property 규칙은 브라우저에  구문을 허용하고 초기 값을 0deg로 설정함  
- 이를 통해 브라우저는 0deg에서 360deg로 부드럽게 전환하고 회전하는 그라디언트를 출력할 수 있음  
  
```css  
@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}  
```  
  
- 간단한 그라디언트 회전 데모를 통해 이 개념을 구현하는 데 필요한 몇 줄의 코드를 확인할 수 있음  
  
##### 부드러운 호버 전환  
  
- 요소가 호버될 때 부드러운 그라디언트 전환을 위해 몇 가지 특별한 요소가 필요함  
- 각 애니메이션이 필요한 사용자 정의 속성은 @property 정의에서 구문을 선언하여 브라우저가 값 변경을 원활하게 전환할 수 있도록 함  
  
```css  
.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}  
```  
  
- --gradient-percent 값은 빛나는 영역의 크기를 결정하며, 호버 시 더 높은 퍼센트로 빛을 길게 만듦  
- --gradient-angle-offset 값은 그라디언트 각도를 재조정하여 호버 시 빛이 되돌아가지 않도록 함  
  
##### 회전 속도 조절  
  
- 호버 시 회전을 느리게 하는 CSS 팁은 매우 유용함  
- 동일한 회전 애니메이션을 두 번 선언하고, 두 번째는 반대로 설정하여 일시 중지하고, 지속 시간을 절반으로 나눔  
- 요소가 호버될 때 animation-play-state: running이 일시 중지 값을 덮어쓰고 회전을 절반 속도로 느리게 함  
  
##### 작은 빛나는 점  
  
- 버튼 내부에 작은 점들이 빛나는 효과를 추가함  
- 이를 위해 radial-gradient 배경을 생성함  
  
```css  
.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}  
```  
  
- --gradient-angle 사용자 정의 속성은 conic-gradient 마스크에서 사용되어 점 패턴의 일부를 회전하면서 드러냄  
  
##### 호버 색상 향상  
  
- 호버 스타일을 개선하여 더 깊이감 있고 눈에 띄게 만듦  
- 버튼 텍스트를 span 요소로 감싸고, 블러 처리된 박스 그림자를 적용하여 호버 시 확장되고 축소되도록 설정함  
  
##### 새로운 스타일 도입  
  
- 위의 많은 기술들은 얼마 전까지만 해도 거의 불가능했음  
- 사용자 정의 속성을 명시적으로 정의함으로써 많은 기회를 열어줌  
- @property가 대규모 애플리케이션과 디자인 시스템에서 어떻게 활용될지 기대됨  
  
#### GN⁺의 정리  
  
- @property 규칙은 CSS 사용자 정의 속성의 구문, 초기 값, 상속을 명시적으로 정의할 수 있는 기능을 제공함  
- 이 기능을 통해 웹 개발자는 더 복잡하고 정교한 애니메이션과 스타일을 구현할 수 있음  
- 특히 대규모 애플리케이션과 디자인 시스템에서 유용하게 사용될 가능성이 큼  
- 유사한 기능을 제공하는 다른 프로젝트로는 CSS Houdini와 CSS Properties and Values API가 있음

## Comments



### Comment 28595

- Author: neo
- Created: 2024-09-05T10:00:20+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41448740) 
- 새로운 개념을 접할 때 뇌가 저항하는 느낌을 받음
  - MDN 기사 읽기를 추천함
  - @property를 직접 사용해보며 이해할 필요가 있음
  - 복잡한 UI 구현 시 JS 의존성을 최소화하는 것이 중요함

- 웹 개발자는 아니지만 기본적인 웹 프레임워크 사용 가능함
  - CSS가 처음 나왔을 때 기억함
  - 첫 번째 코드펜 예제의 CSS가 이해되지 않음
  - 스타일링 시스템에 미니 애니메이션 프로그래밍 언어가 필요한지 의문
  - JavaScript로도 가능하지 않을까 생각함

- 최근 CSS 작업, 특히 Houdini에 대해 흥미를 느낌
  - IE 5.5 기능 책을 받았을 때와 비슷한 느낌
  - CSS에 새로운 기능들이 추가되었지만 기본적인 것들이었음
  - IE 개발자들은 JS 코드를 모듈로 만들어 CSS로 요소에 붙일 수 있었음
  - 이제 다시 그런 기능들을 얻고 있음

- 가능하다고 해서 꼭 해야 하는 것은 아님
  - 밝은 파란색 LED가 처음 나왔을 때 모든 하드웨어에 사용되었지만 사용자에게는 가치가 없었음

- CSS 애니메이션으로 할 수 있는 것들이 마법처럼 느껴짐
  - CSS만을 위한 것이어서 배우기 어렵고 개념화하기 어려움
  - JS로 프로그래밍하는 것이 더 쉬움
  - CSS flex 사용 옵션이 많아 어려움을 겪음

- 기술적으로 흥미로운 데모지만 버튼을 이렇게 애니메이션하지 말아야 함
  - 모든 것이 보라색 그라데이션 테두리를 추가하고 애니메이션하려고 함
  - 가능하다고 해서 꼭 해야 하는 것은 아님
  - 이런 스타일을 제거하기 위해 맞춤 CSS를 작성하는 것이 지침

- 이전 제출물들은 주목받지 못했지만 흥미롭고 교육적임
  - [링크](https://news.ycombinator.com/from?site=ryanmulligan.dev)

- 이 웹사이트가 기쁨을 줌
  - CSS를 만지작거리는 것을 항상 좋아했음
  - 웹 개발 경력을 쌓으며 많은 사람들이 CSS를 싫어한다는 것을 배움
  - HTML+CSS를 탐구하고 실험하는 데 많은 시간을 쏟음
  - 대부분의 사람들이 시간 낭비라고 생각할 것임
  - 이 사이트가 하루를 즐겁게 해줌

- CSS 작업을 즐기지만 동료들이 어려움을 겪는 것을 봄
  - Kevin Powell의 YouTube 채널을 강력히 추천함
  - 등록된 속성에 대한 유용한 기능을 설명하는 비디오가 있음
  - [비디오 링크](https://youtu.be/U8NykwZNbGs)
  - 등록된 속성을 쉽게 설명하는 기사도 있음
  - [기사 링크](https://moderncss.dev/providing-type-definitions-for-css-with-at-property/)

- 웹 개발을 한동안 하지 않았고 이 기능이 무엇을 하는지 이해하는 데 시간이 걸림
  - 기사가 잘 설명하지 못했다고 생각함
  - 새로운 기능이 `@property --gradient-angle {...}` 블록에서 정의된 값을 사용하게 함
  - `inherits: false;` 부분이 무엇을 하는지 명확하지만 왜 필요한지 이해하지 못함
  - CSS 선택자가 이미 상속을 제어할 수 있는데 왜 두 번째 장소에서 제어해야 하는지 의문
  - @property 블록에서 타입을 정의해야 하는 이유를 이해하지 못함
  - 브라우저가 @property가 사용된 곳을 보고 타입을 추론할 수 없을까 생각함