프레이머 기초 강의 Framer Fundamentals | #2. Layout, Sizing & Positioning

# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다.

---

Layout

Stacks, Grids를 활용해 레이아웃을 스타일링 할 수 있습니다. 마치 CSS의 Flexbox나 Figma의 Auto Layout 같은 옵션입니다.

왼쪽) Layout Type이 Stack일 때     오른쪽) Layout Type이 Grid일 때

Layout 프로퍼티는 Stack과 Grid 2가지 타입이 있습니다.

• Stack : Layout이 적용된 프레임 안의 모든 엘리먼트들을 특정 방향으로 정렬합니다.
  • Direction : 정렬 방향을 가로, 세로로 정합니다.
  • Distribiue : Stack이 적용되는 엘리먼트들의 간격을 분배합니다. Start, Center, End, Space Between, Space Around, Space Evenly 옵션이 있습니다.
  • Align : 상단 배치, 중앙 배치, 하단 배치 옵션이 있습니다.
  • Wrap : 프레임의 Width, Height보다 컨텐츠가 많으면 자동으로 정렬을 해주는 옵션입니다. 반응형 레이아웃에서 뷰포트의 Width에 따라 특정 컨텐츠의 레이아웃이 변하는 걸 생각하면 됩니다.
  • Gap : 엘리먼트 사이의 간격을 정합니다.
  • Padding : 엘리먼트를 둘러싸는 프레임의 내부 여백을 정합니다.
• Grid : 프레임 내부의 엘리먼트를 행과 열에 맞게 정렬합니다.
  • Columns : 프레임 내부에 몇 개의 열을 세워 엘리먼트를 정렬할 것인지 정합니다.
  • Rows : 몇 개의 행을 세워 엘리먼트를 정렬할 것인지 정합니다.
  • Gap, Padding : Stack에 있던 옵션과 동일

Grid 타입일 때 Advanced를 누르면 Column과 Row를 세밀하게 조절할 수 있는 고급 옵션들이 나옵니다.

---

Sizing

Sizing 옵션은 엘리먼트(혹은 프레임)의 Width, Height의 옵션을 지정하는 속성입니다. Fixed, Relative, Fill, Fit Content 4가지 속성이 있습니다. 기본적으로 프레임을 그리게 되면 Fixed 상태가 지정됩니다. 더 디테일한 작업을 위해 Width, Height에 Min, Max 값을 넣을 수 있습니다.

• Fixed : 뷰포트의 Width에 상관없이 항상 같은 크기로 엘리먼트를 표시합니다.
• Relative : 부모과 자식 관계인 프레임-엘리먼트가 필요합니다. 뷰포트의 Width가 변하면 부모의 크기에 영향을 받습니다.
• Fill : Relative처럼 부모-자식 관계인 프레임-엘리먼트가 필요합니다. 부모의 Width, Height를 그대로 따라갑니다. 단, 부모의 Layout 타입이 Stack일 때만 가능합니다.
• Fit Content : 마찬가지로 부모-자식 관계인 프레임-엘리먼트가 필요합니다. 자식 엘리먼트의 Width, Height대로 부모 프레임의 크기를 조정합니다.

---

Positioning

프레임이나 엘리먼트가 배치되는 타입을 정합니다. Absolute, Relative, Fixed, Stictky 4가지가 있으며, CSS의 Position 속성에 대해 알고 있다면 쉽게 사용할 수 있습니다.

Figma의 Constraints와 유사하다

• Absolute : 웹에 접속하는 기기의 Width, Height를 고려하지 않고 고정된 위치에 자리합니다. 기본적인 포지셔닝 옵션입니다.
• Relative : 가장 쉽게 쓸 수 있는 포지셔닝 타입입니다.
• Fixed : 네비게이션 바 처럼 특정 위치에 프레임을 고정시킬 때 사용합니다. Absoltue와 다른 점은 Fixed의 경우 뷰포트를 기준으로 프레임을 고정시킨다는 특징이 있습니다.
• Sticky : Fixed는 뷰포트를 기준으로 '항상' 고정시킨다면 Sticky는 조건을 걸어서 스크롤 시에만 Top 값만큼 떨어진 곳에 엘리먼트를 위치시킵니다.