강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-3] Frame 컴포넌트 완벽정리 (Tap, Hover, Pan, Drag)

개발자가 알려주는 프레이머 프레임(Frame) 컴포넌트를 다루는 마지막 포스팅입니다. 첫 번째 강의에서는 컴포넌트의 위치나 크기 그리고 시각적 요소를 다루는 Layout과 Visual에 대해서 다뤄봤고, 두 번째 강의에서는 프레임을 동적으로 변환시켜주는 Transform, Animation, Transition, Variants 속성들에 대해서 알아봤었습니다. 해당 부분을 안 보셨다면 한번 보고 오시는 걸 추천드릴게요! [개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual) [개발자가 알려주는 프레이머(Framer) #1-2] Frame 컴포넌트 완벽정리 (Transform, Animation, Transition, Variant..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual)

✍️ Frame이란? 레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다. 프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다. 프레임 컴포넌트를 사용하면 아래의 특성을 이용할 수 있습니다. - 크기와 레이아웃을 설정할 수 있습니다. - 수평, 수직 중앙정렬을 설정할 수 있습니다. - 색상이나 배경 이미지를 변경할 수 있습니다. - 상태에 따른 애니메이션을 추가할 수 있습니다. - 데스크톱 및 모바일에서 작동하는 탭 이벤트를 추가할 수 있습니다. - 드래그와 같은 제스처를 구현할 수 있습니다. - 팬과 같은 고급 제스처에 반응하도록 할 수 있습니다. ⚙️ 특징 Performance 애니메이션에서 최고의 성능을 얻으려면 GPU 가속을 활용하세요...