**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 !유튜브에 '피튜브' 추천해요. 피알못에게 최고 ㅠㅠ

오토 레이아웃이란?

프레임에 자동으로 간격을 걸어주는 기능으로 프레임을 동적으로 (반응형) 만들어준다.

초급

1. 오토 레이아웃 걸기 : 프레임을 선택해 Shift + A 클릭, 우클릭 해도 됨.

2. 오토 레이아웃 해제 : 프레임을 선택해 커맨드 + 백스페이스 하거나 Control+Shift+G를 클릭

3. 오토 레이아웃 조정하는 방법

아 귀찮은데, 프레임 여러개 한번에 걸면 안되나요???

안된다! 작은 블록단위부터 걸어주어야 한다.

중급

Advanced Layouts (=오토 레이아웃 더보기 기능)

1. spacing mode

현재는 spacing mode 가 없다. 이 모드가 없어도 space between 부분에 auto인지 숫자를 입력해 간격을 딱 고정할 것인지 정할 수 있어서 없어진 것 같다.

첫 줄은 간격을 auto로 설정해서 마우스로 프레임을 늘리면 간격이 자동으로 조정이 된다. 

두번째 줄은 간격을 -17로 설정해둔 것인데 프레임을 늘려도 간격이 고정되어있는 것을 볼 수 있다. 

2. Strokes

Strokes 에는 Excluded, Included가 있는데 프레임 사이즈안에 선 굵기를 포함하냐 포함하지 않느냐로 크기가 달라진다.

먼저 Stroke excluded in Layout -> 스트로크는 레이아웃에 제외시킨다.

빗금쳐진 부분은 패딩이다. 스트로크를 레이아웃에서 제외시켰다함은 스트로크의 자리를 따로 인정해주지 않는 거니까 스트로크가 패딩에 겹쳐져 버린다. 그래서 사이즈가 작다.

두번째, Stroke included in Layout ->  스트로크는 레이아웃에 포함된다.

반대로 스트로크의 자리를 인정해주어 (포함해주어) 사이즈가 더 커지는 것이다.

헷갈리시면 진짜 골똘하게 잘 생각해보세요 (?) 그럼 이해 됨 !

3. Canvas stacking

겹쳤을 때 쌓이는 순서로 First on top, Last on top 두 종류가 있다.

4. Align text baseline

명칭이 약간 바뀌었다.

Absolute position (앱솔루트 포지션)

오토 레이아웃을 프레임 안에서 원하는 요소들을 절대적인 자리에 위치를 지정해 줄 수 있다.

고급

Auto layout resizing (오토 레이아웃 리사이징)

고오급 기능 나온다. 이것도 헷갈리는데 잘 알아 두어야 한다. 나는 할쑤 이따!!!!!

먼저 콘텐츠와 컨테이너를 알아보자.

오토레이아웃 리사이징은 컨텐츠 혹은 컨테이너의 가변적인 속성에 대해서 알 수 있다. 

이 개념이 너무 헷갈려서 나름 쉽게 이해하는 방법을 생각해보려 애썼다..

1. Fill container

아오 뭐가 뭔지 헷갈린다면 앞에 주어를 붙여보자.

Contents fill container.

-> 컨텐츠는 컨테이너를 채운다.

주어가 행동하는거니까 주어인 컨텐츠에 fill container 해준다.

그러면 컨텐츠는 컨테이너가 어떠한 길이를 가졌든지 간에 가득 채운다. 그래서 컨테이너의 크기를 옆으로 늘려보면 컨텐츠도 같이 늘어날 것이다. 

2. Hug contents

Containers hug contents.

-> 컨테이너는 컨텐츠를 감싸안는다.

주어인 컨테이너에 hug contents를 해준다.

그러면 컨테이너는 컨텐츠가 어떠한 길이를 가졌든지 간에 품어주는 것이다!

컨텐츠를 옆으로 늘려보면 컨테이너도 같이 쫙쫙 늘어난다.

3. Fixed size

이건 모.. 말 그대로 컨텐츠나 컨테이너의 사이즈를 고정시켜주는 것이다.

여기서 제일 중요한 점들이 있는데,,

fixed size는 상대적인 개념이 아니라서 모든 경우에 다 뜬다.

하지만 리사이징을 fill container으로 하면 컨테이너가 꼭 필요하기 때문에 상대적으로 제일 바깥에 있는 컨테이너의 경우에는 fill container가 없고 리사이징을 hug contents로 하면 컨텐츠가 꼬옥 필요하기 때문에 상대적으로 제일 안에 있는 컨텐츠의 경우에는 더 이상 컨텐츠가 없으니 hug contents 를 쓸 수 없다. (암,, 당연한 소리,, 근데 글로 적으니 나만 이해 할 것 같아서 사진첨부)

그리고 알면 좋은 거 하나 더 !