컴포넌트 만들기 2탄
아모레퍼시픽홈페이지 에서 Chips(칩)을 찾아서 만들어 보기로 했습니다!!
Chips은 간단한 아이콘과 텍스트로 구성된 UI요소.
주로 여러개의 칩이 한세트처럼 활용되며, 정보입력&선택, 콘텐츠 필터링등에 이용이 된다.
📌 버튼과 혼용되지 않게 주의 해야한다.
👊만들어 보자!
1️⃣ 필요한 요소를 하나씩 만들어준다.
2️⃣ 
1) 텍스트 상잘를 만들고 스킨케어라고 쓰고 auto layout 단축키 Shift+ A를눌러 설정을 해준다
2) 양쪽여백, 텍스트 설정, 선도 추가등 알맞게 설정을 해준다.
3)
이상태에서 일정간격으로 만들고 싶을때 사용할 수 있는 기능이 auto layout
auto layout을 하게 되면 일정간격으로 알맞게 나열된것을 볼 수 있다.
결과
밑에 검정박스가 내가 만든거!!!
2.
이걸 만들기로 했다!
우선은 프레임을 하나 만들어주고
그위에 참고할 사진을 넣어주고
1) 사각형을 한개를 만들고 그위엔 텍스트상자를 이용하여 오토레이아웃을 적용하여 만들어줬다.
모양을 보면 왼쪽위에 오른쪽밑에 코너가 있어서 코너효과를 10씩 넣어주고
둘을 선택해서 하나의 오토레이아웃을 지정을 해주려고 했다. 여기서 오류가 생겼다
뒤에 배경이 없어지고 숫자가 둥글어 진다!!!!! 😢 너무 당황 했다
그럼 1번을 오토레이아웃으로 걸고 배경도 걸고 따로하니까 저렇게 또 변했다...
결국 해결완료
우선 01번을레이아웃을 걸고 회색 배경을 또 오토레이아웃을걸어서 회색배경에 여백을 다 0으로 맞춰준다 그후 둘을 묶어서 다시 오토레이아웃 걸어주기!
밑에 텍스트 상자를 하나씩 만들어서 하나하나 또 엮어주면 끝...완성
마지막으로 복사 붙여넣기해서 다시 전체를 오토레이아웃 걸어주고 13씩 간격을 주고 끝!
전체 완성샷
