[TIL] 2022-03-30

오늘의 TIL

1. UI의 전체적인 구조를 잡아놓자! >> Layout

• 공통된 요소를 Layout에 만들어놓고 사용
• 화면 별로 나타낼 요소 설정

  레이아웃 컴포넌트를 만들고 _app.tsx의 Component를 감싸주면 모든 페이지에서 레이아웃이 공통적으로 보여지고, 레이아웃 컴포넌트 내부의 내용인 props.childeren만 변경된다.

2. 모든 페이지에 동일한 CSS를 주자! >> Global-Styles

• 모든 화면에 적용할 CSS 지정
• 폰트 패밀리 생성

  _app.tsx의 <Global/>
  아래의 모든 페이지에 공통 스타일을 적용시켰다. 글로벌스타일보다 자식 컴포넌트의 스타일이 우선 순위가 더 높다!
  폰트를 적용하기 위해서는 src에 폰트 파일 경로를 넣어주고 font-family에 지정한 이름으로 호출하면 된다.
  폰트는 압축률이 높은 폰트, 경량화 폰트를 사용해주는 것이 좋고 최우선 폰트가 적용되지 않았을 때 보여줄 보조 폰트를 지정해주어야 한다.

self-study

• react-slick 활용해서 배너 만들기
• 포트폴리오 레이아웃 구조 변경
• 포트폴리오 글로벌 스타일 적용
• 포트폴리오 배너 carousel 적용