[2강] 02. 오토레이아웃

오토레이아웃

• 레이어를 쌓고, 프레임을 배치,정렬하는 피그마의 핵심 기능으로, 크기가 변경되어도 유연하게 대응할 수 있게 레이아웃에 유연함을 만들어주는 중요한 기능.

1. 코드 블록 구조 : 
   
   패딩 : 코드 블록 안에 있는 개체와 함께 실제 블록 사이즈가 되는 내부 여백
   보더 : 코드 블록 내부 공간 바로 바깥 가장자리. 실제 코드 블록의 테두리
   마진 : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
   
   
2. 컨테이너 만들어지는 원리 : 오토레이아웃은 개체를 패딩으로 감싸 컨테이너 만들 때 사용.
   
   모든 코드 블록은 내부에 들어있는 개체와 개체를 둘러싼 패딩으로 만들어진다.
   즉, UI의 크기는 개체 크기+패딩 크기의 합이다.
   
   
3. 컨테이너 쌓기 : 오토레이아웃을 활용.
   
   컨테이너=개체+패딩으로 구성. 이러한 컨테이너는 아래로 쌓아 내려가는 게 코드 블록이 쌓이는 원리.
   컨테이너를 또 하나의 개체라고 본다면, 컨테이너를 또 패딩으로 삼싸서 컨테이너 안에 넣을 수 있다.
   이렇게 컨테이너는 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃을 활용하여 컨테이너를 간격에 맞게 규칙적으로 정렬할 수도 있다.
   
   
4.  요약
   오토레이아웃은 레이아웃을 자동 조정할 수 있는 기능으로, 오토레이아웃은 개체를 내부 여백인 패딩으로 감싸 컨테이너로 만들면서, 간격에 맞게 컨테이너를 쌓을 수 있게 한다.