대충 아는 Generalist도, 내 분야만 아는 Specialist가 아닌
전 분야를 통달하는 Special Generalist를 행해서
오늘도 한 걸음
일단 우리가 지금까지 배운 것만으로는 일반적으로 그냥 '디자인' 만 한다고 쳤을 때는 별 문제가 없다.
하지만 웹사이트처럼 상황에 따라 달라지는 반응형 레이아웃, 움직이는 레이아웃을 사용하기 위해서는
constraint 요 놈을 꼭 잡아야겠다.
what is constraint
constraint 제약, 제한 - anchor(앵커, 닻)으로도 부름
parent container 가 변할 때 child container가 무엇을 기준으로 변할지 정하는 것이다.
이렇게 Frame 안에 frame을 넣었을 때 생기는 파란 선을 constraint라고 한다.
자식 콘테이너가 부모에 고정돼 있는 '핀'이라고 생각하면 된다.
상단, 좌측에 고정 돼 있으니, 자식 컨테이너는 부모가 변할 때 상단, 좌측을 따라간다.
child container를 선택해 position을 직접 설정 해보자 그래야 빨리 는다
본격 프레임 리사이징
-
하지만 프레임은 기본적으로 가로, 세로 길이가 고정이다.
이 상태를fixed라고 한다. -
이때 프레임을
auto layout으로 감싸면resizing기능이 활성화 된다.
📍 프레임 리사이징의 종류
Fixed고정값 - 공통
Hug자식 컨테이너의 크기에 맞춰 조정 - 부모만 쓸 수 있음
Fill부모 컨테이너의 크기에 맞춰 조정 - 자식만 쓸 수 있음
w는 wide H는 hight 요건 뭐.. 말 안해도 알 거고부모 container를 auto lay out (shift+a)해서 auto layout으로 바꿔준 뒤 직접 써보자!!!
피그마 포지션 종류 4가지(웹페이지 스크롤 용어)
2회차 마지막에서 영상 보고 외우자.
실무에서도 많이 쓰는 표현이니 영상을 보고 어떤 의민지 외워두면 좋다.
Static(스태틱)
일반적인 요소들이 가지고 있는 포지션이
기본값이자 스크롤을 하면 같이 따라 같이 움직임
Fixed(픽스드;고정된)
화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치.
웹사이트의 헤더나 앱 하단의 버튼 등이 여기에 해당
Absolute(앱솔루트)
Fixed와 유사하지만, 고정되는 기준이 컨테이너 안.즉, 화면 전체가 아닌 본인이 담겨 있는 부모 컨테이너를 기준으로 움직임
Sticky(스티키)
스크롤에 따라서 기본값과 Fixed를 전환.
스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정
