260507 4주 차 : 피그마 기초 완전 정복 (2)

Ch 2. 피그마 핵심 개념 학습

2. 부모 - 자식 관계와 레이어 정렬

1) 부모 - 자식 관계

 감싸고 있는 것과 감싸진 것의 관계

2) 정렬 기능

 컨테이너 안의 개체들을 정렬하고 배치하는 방법

- 단일 개체만 정렬하는 경우, 부모 컨테이너를 기준으로 위치가 정해진다.

 

(1) 정리하기 (Tidy up)

 선택된 개체들을 가로, 세로 딱 맞춰서 정렬된다. 정렬 되는 방법은 선택된 개체들이 어떻게 배치가 되어 있는지에 따라 조금씩 달라진다.

 

(2) 수직 균등 분배 (Distribute vertical spacing)

 선택된 개체들 사이의 세로 간격을 균일하게 맞춰준다.

 

(3) 수평 간격 균등 분배(Distribute horizontal spacing)

 선택된 개체들 사이의 가로 간격을 균일하게 맞춰준다.

 

3. 오토레이아웃 기능 살펴보기

1) 오토레이아웃

 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능

- 앱과 웹을 만들 때는 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야 함.

- 프레임을 배치하고 정렬해 레이러를 코드 블록처럼 쌓는 핵심 레이아웃 기능이다.

 

2) 오토레이아웃 활용

 오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능

- 컨테이너는 개체와 패딩으로 이루어진다.

- 아래로 쌓아 내려가는 게 코드 블록이 쌓이는 원리다.

 

4. 프레임과 컨스트레인트

1) 컨스트레인트 (Constraint: 제약(조건))

 오토레이아웃을 auto-layout으로 만들어주는 기능

- 오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있다.

- 반응형 웹 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어줘야 한다.

- 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻

- '부모 컨테이너 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?'

---