오토 레이아웃! 가장 쉽게 개념부터 완전 정복 Part.1

피그마 초보자가 가장 햇갈리는 기능. 오토 레이아웃! 가장 쉽게 개념부터 완전 정복 Part.1 #Fixed #Hug #Fill #autolayout #Figma (youtube.com)

피그마 초보자가 가장 햇갈리는 기능. 오토 레이아웃! 가장 쉽게 개념부터 완전 정복 Part.1

부모 자식 관계

이런 식의 종속 관계

그 관계를 구체적으로 설정해 줌

보라색 부분 의미 알아보기

안쪽에 배치돼있는 엘리먼트

- Content

자식을 감싸는 부모와 같은 존재

- Container

동사는 파란색 

목적어는 보라색

이런식의 구조

---

Hug

목적어 자리에 있는 컨텐츠를 감싸는 것

주어자리에 들어가야하는 것

의미 해석

2중 프레임

이름 설정

* 주의점 

: 콘텐츠라는 자식은 콘테이너 안에 종속돼있어야 함

부모가 될 파란 엘리먼트는 프레임으로 만들어줘야 함.

오토레이아웃 설정

프레임 => 오토레이아웃

텍스트를 늘려보면

자식에 의해서 부모가 늘어났다가 줄어듦

= 허그의 기능

부모가 허그를 한다 컨텐츠라는 자식을

허그를 할 때는 항상 부모가 되는 엘리먼트를

허그상태로 해야 함.

부모 허그 상태 확인

콘텐츠 ( 자식 -텍스트) 는 왜 Hug 로 설정 됐을 까?
 - 피그마 텍스트 박스의 특징.

텍스트 박스는 이런식으로 나타남

텍스트와 텍스트박스는 서로 다름

텍스트 박스는 텍스트를 감싸는 또 다른 컨테이너

 

텍스트 박스 ( 부모 )

텍스트 ( 자식 )

둘의 관계 -  허그 상태

 

텍스트 박스 변형할 경우

Hug 상태가 아니게 됨.

고정값을 지닌다.

= fixed

Content(자식-텍스트박스)이 Hug 였던 이유

= 알맹이 텍스트의 숨겨진 부모 였기 때문

- 자식에게 부모가 영향을 받음.

 

만약 Fixed 로 바꿨을 경우

고정 박스 안에 갇히게 됨.

---

Fill 의 사용

자식이 채움

Frame2 = 최상위 Container

- Grand Container 로 이름 변경

최상위 부모를 기준으로 오토레이아웃 실행

- 기본적인 세팅 = Hug로 돼 있음.

텍스트 늘릴 경우

자식의 영향을 그 위에 부모가 받고

또 그위의 최상위 부모가 영향을 받음

 

Fill Container

= 자식이 부모의 영향을 받음.

부모겸 자식을 (최상위의 자식) = Fill 로 바꾸고

최상위 부모의 사이즈를 조절해보면

부모의 변화에 자식(부모겸자식) 이 영향을 받는 구조가 된다.

그리고 최상위 부모의 Hug 상태는 큰의미가 없어진다.

사이즈를 살짝만 변화를 줘도 

FIxed 로 됨.

( 고정 값 )

 

자식이 오히려 부모의 변화에 연동해서

따라오는 구조로 만들어지는 것.

---

고정된 가로값

부모를 Fixed 로 바꿔봄.

컨텐츠를 아무거나 입력

 

컨테이너가 전혀 영향을 받지 않음을 확인.

 

부모는 부모대로

자식은 자식대로 

서로 영향을 받지 않음.