0602 (금) pinterest 만들기, google main 만들기

variant 안에서 오토 레이아웃 설정 가능

인스턴스도 생성 가능(But 컴포넌트 세트 안에서는 구분 모호)

 

CTA 버튼

사용자의 행동을 유도하는 버튼

---

실습 리뷰

 

pinterest 구현에서 가장 어려웠던 점

이미지 호버시 이미지를 어둡게 하면서 저장 버튼 띄우기 variants

이미지를 호버해도 해당 이미지 톤 다운이 아니라 마스터로 지정된 이미지가 나오는 오류

해결 방법: 위와 같은 오류는 variants 내부에서 default와 hover 속성을 각기 다른 이미지로 받아들이기 때문에 생김

따라서 각각 속성 안에 원본이미지를 복사한 rectangle 2를 추가하고 defaultd의 r2의 투명도를 0으로 조절

> hover의 r2는 image에서 fill로 채우기 변경 후 투명도 50 검은색 부여 > 인스턴스 복사후 우측 항목 생성

 

삐침 있는 문자와 원형 벡터 레이아웃

원형 프로필같은 사진과 삐침 있는 (1같은) 문자를

오토레이아웃 맞출때는 양옆 패딩에 여유두기

반응형 레이아웃

반응형으로 조절 시에는

오토레이아웃에서 가로/세로 정렬, 텍스트 단락 fill, 텍스트 정렬을 꼭 꼭 체크

 

+ '홈으로' 프로토타입 부여 시에는 마스터 컴포넌트에서 연결해두자

구글 메인 화면 구현