내일배움캠프 CH1 미니프로젝트 (2일차

✅241022

강의

· 2주차 복습

 

팀프로젝트

· 컬러 정하기

· 역할분담

· 맡은 부분 진행하기

---

📋2주차 복습

 

오토레이아웃

레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능

컨테이너는 개체와 패딩으로 이루어짐

컨테이너를 얼마만큼의 간격으로 몇 개 쌓을 건지를 편하게 만들 수 O

 

Frame1: 프레임이 아닌 텍스트 위에 바로 오토레이아웃 적용한 경우

 → 패딩 값이 자동으로 생김

Frame2: 텍스트에 프레임을 씌운 경우

Frame3: 프레임이 있는 개체를 오토레이아웃을 만든 경우

 → 패딩 값 자동으로 생기지 X

 

오토레이아웃은 레이어를 쌓아 내려가는 개념이기 때문에

내부 프레임의 레이어 순서가 일반적인 순서와 정반대임

 

---

 

컨스트레인트 : 오토레이아웃 안에 있는 자식 컨테이너가 움직이는 조건 값

Constraints Left / Top인 경우 부모를 오른쪽으로 늘리면 자식은 움직이지 X

왼쪽 위 대각선으로 움직이면 자식도 따라서 움직임

 

---

리사이징

 

기본 프레임을 오토 레이아웃으로 변경할 때 패딩 값은 컨스트레인트를 기준으로 생김

 

부모가 fixed, 자식이 fill인 경우 부모를 움직이면 자식이 따라옴

반대로 자식이 fixed, 부모가 hug인 경우 자식을 움직이면 부모가 따라옴

---

❇️TIL

· 처음 피그마 기초 강의를 들을 때는 모든 내용을 충분히 이해했다고 생각했지만, 막상 복습을 해보니 기억이 나지 않는 부분들이 많았다. 이를 통해 중요한 개념은 여러 번 반복해서 학습해야 진짜로 내 것이 된다는 점을 깨닫게 되었다.

· 팀 프로젝트를 진행하면서 웹 페이지의 가로 넓이를 1920px로 설정하고 디자인을 해야 했는데, 여백을 어떻게 설정해야 할지 감이 잡히지 않아 어려움을 겪었다. 그래서 마켓컬리, 오늘의집, 교보문고, 설빙 등 여러 사이트를 방문해 살펴보니, 그제서야 어느 정도 감이 잡혔다. 평소에는 아무 생각 없이 들어가던 사이트들이었지만, 이번 경험을 통해 앞으로는 웹사이트를 좀 더 주의 깊게 관찰하고 참고해야겠다는 생각이 들었다.