✍️ Frame이란?
레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다.
프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다.
프레임 컴포넌트를 사용하면 아래의 특성을 이용할 수 있습니다.
- 크기와 레이아웃을 설정할 수 있습니다.
- 수평, 수직 중앙정렬을 설정할 수 있습니다.
- 색상이나 배경 이미지를 변경할 수 있습니다.
- 상태에 따른 애니메이션을 추가할 수 있습니다.
- 데스크톱 및 모바일에서 작동하는 탭 이벤트를 추가할 수 있습니다.
- 드래그와 같은 제스처를 구현할 수 있습니다.
- 팬과 같은 고급 제스처에 반응하도록 할 수 있습니다.
⚙️ 특징
Performance
애니메이션에서 최고의 성능을 얻으려면 GPU 가속을 활용하세요.
이런 식으로 최신 모바일 장치에서 수백 개의 레이어에 애니메이션을 적용 할 수 있습니다.
CSS 특성으로 GPU 동작 방식은 여기를 참고하면 좋습니다.
Integration
Frame 구성요소는 주로 DOM 요소 (일반 div)이기 때문에 모든 DOM 요소와 잘 작동하도록 설계되었습니다.
크기, 너비, 높이, 위쪽, 오른쪽, 아래쪽, 왼쪽 및 가운데 사이의 레이아웃 조합을 사용할 수 있습니다.
Text Centering
프레임에 텍스트 내용만 포함된 경우 편의상 기본적으로 가운데에 배치됩니다.
span 요소에 텍스트를 배치하여 이 동작을 피할 수 있습니다.
// 텍스트가 중앙으로 배치됩니다!
<Frame>Hello</Frame>
// 텍스트가 중앙으로 배치되지 않습니다!
<Frame><span>Hello</span></Frame>
Event Handling
이벤트 전파는 React에 의해 처리되며 DOM 이벤트처럼 작동합니다.
preventDefault()로 이벤트를 취소하고 stopPropagation()으로 전파를 중지 할 수 있습니다.
DOM
Frame 컴포넌트는 HTML div를 기반으로 하므로 모든 DOM 속성을 상속합니다.
📑 레이아웃(Layout)
Frame의 레이아웃 규칙은 일반 CSS처럼 동작하고 부모 요소 (Frame 또는 div)의 크기가 조정되면 다시 레이아웃됩니다. 선택적으로 가운데와 같은 편리한 단축키를 사용하여 부모에서 요소를 빠르게 가운데에 맞출 수 있습니다.
프레임은 기본적으로 절대 위치에 있습니다. position 속성을 사용하여이를 명시 적으로 변경할 수 있습니다. 상대 레이아웃 (예 : 스택)이 필요한 구성 요소의 자식으로 프레임을 추가하면 편의상 해당 구성 요소가 상대적으로 위치를 재정의 할 수 있습니다.
레이아웃 속성 조합이 호환되지 않으면 재정의 순서가 CSS와 일치합니다. x 및 y 변환은 일반 레이아웃 규칙이 설정된 후에 적용되므로 항상 작동합니다.
- height > top, bottom > center=“y”
- width > left, right > center=“x”
width
타입: number | string | MotionValue<number | string>
CSS width(너비) 속성을 조정합니다. 너비 기본값은 200으로 설정되어 있습니다. 모든 CSS 값 유형(픽셀, 백분율, 키워드 등)을 허용합니다.
// Pixels
<Frame width={100} />
// Percentages
<Frame width={"100%"} />
height
타입: number | string | MotionValue<number | string>
CSS height(높이) 속성을 조정합니다. 높이 기본값은 200으로 설정되어 있습니다. 모든 CSS 값 유형(픽셀, 백분율, 키워드 등)을 허용합니다.
// Pixels
<Frame height={100} />
// Percentages
<Frame height={"100%"} />
size
타입: number | string
너비와 높이를 동시에 설정할 수 있습니다. string으로 사용할 경우에는 '300px'처럼 뒤에 유형을 적어야 됩니다.
<Frame size={100} />
top, right, bottom, left
타입: number | string | MotionValue<number | string>
포지션으로부터의 거리(픽셀)입니다. 기본값은 0입니다. string으로 사용할 경우에는 '300px'처럼 뒤에 유형을 적어야 됩니다.
<Frame size={150} top={110} left={120} bottom={20} right={50} />
center
타입: boolean | "x" | "y"
중앙정렬을 시켜주는 속성입니다.
// 중앙
<Frame center />
// 수평으로 중앙정렬
<Frame center="x" />
// 수직으로 중앙정렬
<Frame center="y" />
position
타입: string
CSS 포지션 속성을 변경합니다. 기본값은 absolute입니다.
<Frame position={"relative"} />🖌 시각요소(Visual)
style
타입: MotionStyle
Frame에서 명시적으로 받지 않는 CSS 속성을 세팅하기 위한 속성입니다.
<Frame style={{ mixBlendMode: "difference" }} />visible
타입: boolean
프레임의 표시 여부를 정의합니다. 불투명도와 달리 해당 속성은 애니메이션을 적용할 수 없습니다. 기본값은 true입니다.
<Frame visible={false} />
opacity
타입: number | MotionValue<number>
불투명도 값을 설정하면 요소를 반투명하거나 완전히 숨길 수 있습니다. 숨기기 애니메이션을 적용할 때 유용합니다.
기본값은 1입니다.
<Frame opacity={0.5} />
background
타입: Background | null
프레임의 배경을 설정합니다. src를 사용하여 이미지를 불러올 수 있고, 색상 문자열, 색상 객체 및 이미지를 지원합니다.
기본적으로 반투명 청색으로 설정됩니다. 이것은 이미지 속성에 의해 설정된 값보다 우선으로 적용됩니다.
색상과 이미지를 사용하려면 backgroundColor를 대신 사용하세요.
<Frame background="#09F"/>
<Frame background={Color({r: 255, g: 0, b: 102})} />
<Frame background={{ alpha: 1, angle: 75, start: "#09F", end: "#F09"}} />
<Frame background={{ src: "https://example.com/logo.png"}} />
backgroundColor
타입: string | Color
프레임의 배경색을 설정합니다. 색상 문자열과 객체를 지원합니다.
<Frame backgroundColor="#09F"/>
<Frame backgroundColor={Color({r: 255, g: 0, b: 102})} />
image
타입: string
프레임의 백그라운드 이미지를 설정합니다.
<Frame image="https://source.unsplash.com/random" />color
타입: string | MotionValue<string>
프레임 안에서 텍스트 요소의 색상을 결정합니다. 기본값은 검은색입니다.
<Frame color="#09F" />border
타입: string | MotionValue<string>
CSS border 속성입니다. 너비와 테두리의 스타일 그리고 색상을 값으로 받습니다. 기본값은 "none"입니다.
<Frame border="1px solid #09F" />radius
타입: number | string | MotionValue<number | string>
CSS border-radius 속성입니다. 기본값은 0입니다.
// Radius with pixels
<Frame radius={10} />
// Radius with percentages
<Frame radius="50%" />
shadow
타입: string | MotionValue<string>
CSS의 box-shadow 속성입니다. 속성의 자세한 정보는 아래를 참고해주세요.
box-shadow
box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산
developer.mozilla.org
<Frame shadow="10px 5px 5px black" />overflow
타입: "visible" | "hidden"
CSS의 overflow 속성입니다. 기본값은 "visible"입니다.
<Frame overflow="hidden" />🎉 마무리
이번 포스팅에서는 프레임 컴포넌트의 레이아웃과 시각요소 부분을 다루는 방법을 알아봤습니다.
다음 포스팅 Frame 컴포넌트 완벽정리 2에서는 Transform, Animation, Transition, Variants와 같은 애니메이션과 연관되어 있는 부분을 다뤄보도록 하겠습니다.
'강의 > Framer' 카테고리의 다른 글
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
