피그마 기초 강의 2-5
프레임과 컨스트레인트
- 컨스트레인트
오토레이아웃 안에 있는 자식 개체들이 움직이는 방식을 제약, 조건, 제한
상하좌우센터 기준점 따라 움직인다.
피그마 기초 강의 2-6
프레임 리사이징
- 리사이징
프레임은 기본적으로 가로세로 길이 고정 (Fixed)
프레임을 오토레이아웃으로 감싸는 수간, Fixed 이외의 다른 사이즈값이 생긴다. (= Re-sizing)
부모 리사이징값 <--> 자식 리사이징값
부모 프레임- Fixed / 자식 프레임 - fill
-> 부모 프레임 크기 변경에 따라 자식 크기 변경
부모 프레임- Hug / 자식 프레임 - Fixed
-> 자식 프레임 크기 변경에 따라 부모 크기 변경
피그마 기초 강의 2-7
포지션 이해하기
- 포지션
개발에서 많이 사용하는 개념
디자인과 레이아웃을 위한 코드인 CSS에서 사용할 수 있다.
요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정해서 만든다.
- Static(스태틱)
기본값이자 스크롤을 하면 같이 움직임 - Fixed(픽스드)
스크롤과 관련없이 위치 고정 - Absolute(앱솔루트)
본인의 부모 컨테이너를 기준으로 위치함 - Sticky(스티키)
스크롤에 따라 기본값과 Fixed를 전환하는 포지션
스크롤을 따라 움직이다가 특정 위치부터는 상단 고정
피그마에서 포지션 설정하기
- 프로토타입 패널에서 설정
- Scroll with parent(static) : 부모 컨테이너의 스크롤을 따라 간다는 뜻
- Fixed(stay in place) : 현재 위치에 머무른다s는 뜻
- Sticky(stop at top edge) : 맨 위 모서리에서 멈춘다는 뜻
