Prop For That

원문 발행 2026. 06. 17. 03:36원문 언어 영어AI 한국어 번역CSS-Tricks 원문 보기

요약

Prop For That은 JavaScript가 감지한 실시간 데이터(커서 위치, 스크롤 속도 등)를 CSS 변수로 자동 변환해주는 도구입니다. 데이터 속성을 사용하여 복잡한 스크립트 없이도 동적인 인터랙티브 스타일을 쉽게 구현할 수 있습니다.

핵심 포인트

커서 위치, 시간, 스크롤 속도 등 실시간 데이터를 CSS로 전달
data-props-for 속성을 사용한 간편한 라이브러리 활용
JavaScript 스크립트 작성 없이 선언적 방식으로 인터랙션 구현
Open Props 제작자 Adam Wathan의 새로운 도구

Adam이 _props(속성)_에 진심이라는 것은 비밀이 아닙니다. 그는 얼마 전 색상, 그림자, 크기, 타이포그래피 등 훨씬 더 많은 것들을 위한 수많은 사전 설정된 변수들을 제공하는 Open Props를 우리에게 선보였습니다. 이제 그는 Prop For That과 함께 돌아왔습니다. 비슷한 개념이지만, CSS가 브라우저에서 평소에 볼 수 없는 것들을 기반으로 실시간(live) props를 생성한다는 점에서 놀라운 도구입니다. 커서 위치, 진행 값(progress values), 특정 폼 상태(form states), 현재 시간, 스크롤 속도(scroll velocity)와 같이 JavaScript가 감지하여 CSS로 전달하는 것들 말이죠.

제가 이해하기로는 모든 스크립트 관련 작업은 이미 백그라운드에서 이루어지고 있습니다. 필요한 것은 라이브러리를 임포트(import)하고, HTML에 선언한 다음, CSS에서 스타일을 입히는 것뿐입니다.

예를 들어, 오래전 Chris가 커서 위치를 추적하기 위해 JavaScript에 등록된 사용자 정의 속성(custom properties)을 사용했던 방식은 다음과 같습니다:

CodePen Embed Fallback

Prop For That는 이 부분을 아주 깔끔하게 처리합니다. 차이점은 우리가 스크립트를 트리거하는 데이터 속성(data attributes)을 사용한다는 것입니다:

<div class="mover" data-props-for="pointer">...</div>

그리고 관련 props를 스타일에 넣기만 하면 됩니다:

.mover {
  aspect-ratio: 1;
  width: 50px;
...

CodePen Embed Fallback

데모가 핵심입니다. 세상에, Adam은 정말 품격 있는 결과물을 만들어내는군요.

AI 자동 생성 콘텐츠

원문 바로가기

Prop For That

요약

핵심 포인트

댓글