웹1 7일차 - 마켓컬리1

[마켓컬리 피그마 예제]

 

- 웹은 연령이 높을 수록 그리드(container)를 좁게 쓰고 (ex . 마켓컬리, 도서 사이트들),

  ㄴ고정형 + 적응형

- 연령이 낮을 수록 그리드를 넓게 쓴다. (ex. 나이키) 

  ㄴ반응형 + 적응형

 

✨✨(if, inline-block를 쓴다면)처음에는 그리드를 내가 그려서(계산해서) 중앙부터 맞춰나가야 한다.✨✨ 

          양쪽, 사이사이 여백까지 신경써서 계산하도록 한다. 

 

가장 큰 요소는 피그마에서 넓이나 높이를 줘도, 화면 크기와 같도록 맞춘다. 

 

상위 엘리먼트의 높이가 auto로 되어있으면 하위 엘리먼트의 높이(내용물)를 따라간다. 

그러니 특별한 경우가 아니라면 상위, 하위 엘리먼트 모두에게 높이를 주지 말고 하위에만 적용하도록 한다. 

 

 

 

 

{구글 아이콘 삽입하기 링크}

아이콘의 두께를 조절하고 싶다면 Filters 버튼을 누르고 Weight를 조절한다.

일반적으론 200 weight를 사용한다.

 

첨부하고 싶은 아이콘을 클릭한다.

 

오른쪽 사이드 화면에서 Variable icon font 항목의 코드를 복사해서 script에 삽입한다.

여러 개의 아이콘을 사용해도 한 번만 삽입하면 된다. 

 

 

 

오른쪽 사이드바에서 스크롤를 더 내려서 inserting the icon 항목의 코드를 복사하여, 사용하고 싶은 요소 부분에 삽입한다.