피그마 강의 (6) 프레임 리사이징

리사이징은 오토레이아웃 안에서 자식 개체들이 어떻게 이동할 것인지를 적용하는 기능

• 프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생긴다.
• 이걸 피그마에서는 리사이징(Re-sizing)이라 부른다. 사이즈가 변경된다는 의미다
• 즉, 리사이징을 사용하려면 부모개체가 오토레이아웃인 상태여야 한다.

1. 리사이징의 종류

 

- 피그마에서 리사이징은 3가지 값이 있다.

- 리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있다. 

 

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정 (자식에 맞춰 안음)	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정 (부모에 맞춰 키움)	자식만 쓸 수 있음

 

2. 리사이징 실습 

- Constraints를 오토레이아웃인 상태에서 적용하려면 ignore auto layout을 클릭해야되더라 

같은 곳 (높이, 넓이 영역) 을 둘 다 Hug와 Fill로 할 수는 없다.

한 쪽이 다른 쪽을 맞춰주는 개념이기 때문에 어느 한 쪽은 기준이 되어야 하기 때문이다. 

 

Fill은 자식이 부모에게 맞춰주는 것. hug는 부모가 자식에게 맞춰주는 것. 잊지 말자! 

 

만약 자식을 fixed, 부모는 둘다 hug로 한다면, 자식 개체를 늘리고 줄일 때 부모는 그에 맞춰서 늘렸다 줄였다가 된다.

하지만 부모 개체를 기준으로 늘리고 줄이면 자식 개체의 크기는 영향을 받지 않는다. 

 

만약 자식을 fill, 부모는 fixed로 한다면, 부모 개체를 늘리고 줄일 때 자식은 그에 맞춰서 늘었다 줄었다 한다. 

자식 개체를 기준으로 늘리면 부모 개체는 영향을 받지 않는다.