[강의내용]기초 2주차

강의노트 : https://teamsparta.notion.site/2-ca1d21ca028446b7bdb176196f9e38d6

체계적으로 배우는 피그마 기초 완전 정복(2) | Notion

2-1. 이번에 배울 것

프레임과 컨스트레인트

• 프레임 이해하기
• 컨스트레인트 살펴보기

오토레이아웃과 리사이징

2-2. 프레임과 그룹

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

자식이 있는 부모개체는 모두 화살표가 생성됨

균등분배

• Tidy up : 규칙적으로 그리드를 맞춰서 분배할때 유용한 기능(어느정도 정렬이 되어있을 때 동작함)
• Distribute vertical spacing : 수직간격 균등 분배(수직적으로 균등으로 분배 됨)
• Distribute horizontal spacing : 수평간격 균등 분배(수평적으로 분배 됨)

2-4. 오토 레이아웃 기능 살펴보기

오토레이아웃이란?

• 레이어를 쌓고 프레임을 배치하고 정렬하는 피그마의 핵심기능
• 다양한 디스플레이에 따라 레이아웃에 유연함을 만들어주는 가장 중요한 기능

코드블록의 구조

• 피그마에서 프레임으로 코드블록 생성 가능 → 다른말로는 컨테이너
• 컨테이너의 구조
  • 패딩 : 코드 블록 안에있는 바깥테두리. 실제 블록의 사이즈가 되는 내부 여백
  • 보더 : 코드블록 공간 바깥의 가장자리. 실제 코드 블록의 테두리
  • 마진 : 코드블록 바깥의 여백이자 다른 코드블록과의 간격

<aside> 💡

오토레이아웃 적용해보기

1. 텍스트를 생성한 후 마우스 오른쪽을 클릭하여 add auto layout(shift+A)을 클릭. → 그럼 자동으로 프레임이 씌어지게 되고 패딩값도 생성됨.
2. 텍스트를 생성한 후 frame selaction(control + alt + G)을 선택 후 오토레이아웃 클릭 → 오토레이아웃으로 속성이 바뀌고 패딩값은 추가되지 않음 </aside>

두가지 방식의 차이점 알기

프레임이 아닌 개체에 오토레이아웃을 적용하는 것 → 자동으로 패딩값이 적용 됨

이미 프레임인 개체에 오토 레이아웃 속성을 적용하는 것 → 패딩값은 추가되지 않음

간격 확인하는 법

• 개체를 클릭한 후 alt를 누르고 확인하고싶은 개체를 누르면 두개 사이의 간격 확인 가능

<aside> 💡

오토레이아웃 내부 프레임 순서

레이어 패널에서는 일반적으로 더 위에 있는 레이어가 더 앞에 있는 레이어다. 반대로, 오토레이아웃 프레임 안에선 더 밑에 있는 레이어가 더 앞에 있는 레이어예요.

</aside>

2-5. 프레임과 컨스트레인트

2-6. 프레임 리사이징

2-7. 포지션 이해하기