Styled-Components를 이용하여 OZ 페이지 디자인하기

학습 목표

1. 이전 과제에서 작성한 SCSS 코드를 Styled-Components를 사용하여 리팩토링할 수 있다.
2. Styled-Components을 사용하는 방법에 대해 이해한다.
3. Styled-Components를 사용하는 경우의 장단점에 대해 이해한다.
4. Styled-Components를 재사용 하는 방법에 대해 알고있다.
5. Styled-Components에 props를 전달하여 원하는 스타일을 지정할 수 있다.

복습할 개념 체크 리스트

• Styled-Components을 사용하는 방법에 대해 이해한다.
  설명: Styled-Components을 사용하는 방법에 대해 복습하세요.
• Styled-Components를 사용하는 경우의 장단점에 대해 이해한다.
  설명: Styled-Components를 사용하는 경우의 장단점에 대해 복습하세요.
• Styled-Components를 재사용 하는 방법에 대해 알고있다.
  설명: Styled-Components를 재사용 하는 방법에 대해 복습하세요.
• Styled-Components에 props를 전달하여 원하는 스타일을 지정할 수 있다.
  설명: Styled-Components에 props를 전달하여 원하는 스타일을 지정하는 방법에 대해 복습하세요.

기본 요구 사항

1. npm install styled-components 를 터미널에 입력하여 설치합니다.
2. npm install & npm run dev 를 터미널에 입력하여 서버를 실행합니다.
3. import styled from "styled-components" 를 파일에 불러온 후 사용할 수 있습니다.
4. App.scss 에 작성된 코드를 요소에 해당하는 컴포넌트와 같은 일에 파일을 생성하여 새롭게 작성해주세요.
   1. App.jsx
   2. components/Content.jsx
   3. components/Header.jsx
5. css는 자유롭게 수정해도 좋습니다.