[TIL] 0715

 

1. 오늘 학습 키워드

• 프레임
• 오토레이아웃
• 컨테이너
• 컨스트레인트
• 리사이징
• 포지션

 

2. 오늘 학습한 내용을 나만의 언어로 정리하기

 

오토레이아웃

• 레이아웃을 자동으로 조정하는 기능
• 개체를 패딩(내부 여백)으로 감싸 컨테이너로 만듦
• 간격에 맞게 컨테이너(개체 + 패딩)를 쌓을 수 있게 함
• 아래로 쌓이는 형태

 

컨스트레인트

• 제약 또는 조건의 의미
• 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻
• 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할지 정할 수 있음
• 각각 Top, Right, Bottom, Left 방향에 고정 시킬 수 있음
  • scale: 프레임의 사이즈에 따라 오브젝트의 비율 & 사이즈가 결정됨

 

리사이징

• 프레임을 오토레이아웃으로 감싸기 ▶️ 다른 사이즈 값이 생김
• 부모 개체의 길이나 크기에 따라 자식 개체의 리사이징 값이 영향을 받음
• 리사이징에는 Fixed, Hug, Fill 이 있음
  • 자식이 고정값이면 부모는 이를 감싼다.
    자식: fixed -> parent: hug 가능
  • 자식: fill -> parent: fixed 여야 한다. 
  • 부모: hug -> 자식: fixed 여야 한다. 
  • 부모 자식 둘 다 fixed 일수도 있다. 

 

실습

• 부모: hug, 자식: fixed ▶️ 자식 개체가 변해도 부모 개체는 따라서 유동적으로 변함
• 부모: hug, 자식: fill ▶️ 부모 컨테이너: fixed 가 됨

 

 

실습 - 숙제

 

3. 학습하며 겪었던 문제점 & 에러

- 어려웠던 점

• 이전에 오토레이아웃, 컨스트레인트, 리사이징을 활용한 숙제를 했을 때는 3번 문제부터 막혀서 많은 시간이 걸렸다. 특히 각각의 기능이 어떤 역할을 하고, 서로 어떻게 연결되는 지 감이 잘 오지 않았었다. 

 

- 새롭게 알게 된 점

• 이번에 다시 강의 복습하고 실습해 보면서, 이전에 잘 이해되지 않는 부분을 내 방식대로 정리해보니 헷갈렸던 부분이나 놓치고 있었던 개념이 눈에 들어오기 시작했다. 
• 오토레이아웃과 컨스트레인트처럼 화면 크기나 콘텐츠 변화에 따라 자동 정렬과 반응형 구조를 만드는 데 꼭 필요한 기능이다. 앞으로 프로젝트를 수행할 때도 필요하기 때문에, 앞서 정리해둔 내용을 다시 읽어보거나 다른 실습 자료를 찾아보며 연습해두면 큰 도움이 될 것 같다. 

 

4. 내일 학습 할 것은 무엇인지

 

• 피그마 기초 3주차 복습 + 숙제
• 온보딩 조금씩 해놓기
• 컨스트레인트 복습 ▶️ https://figma-play.tistory.com/12