본문 바로가기

UXUI design/회고・학습일지

[TIL] 0618 학습일지

📌컨스트레인트

Child Container와 Parent Container 컨테이너 사이에있 파란색점선이 Child Container가 Parent Container에 가지고 있는 제한, 즉 컨스트레인트이다.
정확히 말하면, 자식 컨테이너가 부모 컨테이너에 고정되어 움직이는 '핀의 위치'를 컨스트레인트라고 한다.

 

파란색 프레임 : Child Container


위 이미지로 보았을 때,

자식 컨테이너는 부모 컨테이너의 사이즈가 변할 때, 부모 컨테이너의 위쪽과 왼쪽을 기준으로 고정되어 움직인다는 뜻이다.
컨스트레인트는 댜른 말로 하면, '앵커'라고 한다. 

 

 

 

📌프레임 리사이징

프레임을 오토레이아웃으로 감싸는 순간, Fixed외의 다른 사이즈값이 생긴다. 

이를 피그마에서는 리사이징이라 부른다. 

 

 

종류

Fixed 고정값 

Hug 자식 컨테이너의 크기에 맞춰 조정 

Fill 부모 컨테이너의 크기에 맞춰 조정

 

 

컨스트레인트와 리사이징의 관계 

 

[Figma] 컨스트레인트, 리사이징의 관계

컨스트레인트 컨스트레인트는 오토레이아웃을 진짜 오토레이아웃으로 만들어주는 기능이다.    부모컨테이너 안에있는 자식 컨테이너를 클릭하면 오른쪽 디자인패널에 다음과같이 

updown0321.tistory.com

 

 


 

 

📌 반응형 웹사이트 그리드 만들기 (실습)

화면의 크기 변화에 실시간으로 반응한다. 

 

 

 

 

 

 

 

 

'UXUI design > 회고・학습일지' 카테고리의 다른 글

[TIL] 0620 학습일지  (0) 2024.06.20
[TIL] 0619 학습일지  (0) 2024.06.19
[TIL] 0617 학습일지  (1) 2024.06.17
[WIL] 0614 주간회고  (0) 2024.06.14
[TIL] 프로덕트 아이덴티티: 디자인 컨셉 구축법  (0) 2024.06.13