멋쟁이 사자처럼 10기 FE 2주차 과제 🦁

실습 1번문제

여러분은 프론트 엔드 작업을 진행하시면서 글자에 효과를 어떻게 주셨나요? 매번 id, class를 통해서 받지 않으셨나요? Text 컴포넌트를 수정하며 다양한 순간에 재사용성이 뛰어난 코드를 만들어봅시다!

제한조건

• text-weight , text-size 를 props를 통해서 입력받아서 수정합니다.

ex)

현재 상태입니다.

다음과 같이 입력받을 때 font-weight, font-size 등이 수정되도록 바꾸어 주세요

---

해결방법

1. Text Component 코드작성

> + props는 기본 설정되어 있는 값에 다른 값을 설정하고 싶은 요소들을 넣어주면 된다. > + 이 코드에서는 text-weight, text-size, text-color가 props로 변경됨

2. App.js 코드실행

실행결과

---

실습 2번문제

색상코드를 입력하면 색상과 text가 나오는 카드를 만들어봅시다! 제한된 조건 속에서 진행해 주시길 바랍니다!!
현재 사진입니다! 아래와 같게 만들어주세요!

목표)

다음과 같이 입력 받습니다.

제한조건

• 빈칸을 채워 다음 사진과 같게 구현합니다!
• ColorCard들 사이 간격은 10px 로 합니다.
• ColorCard를 서로다른 props를 통해서 5개 이상 화면에 출력합니다.

---

해결방법

1. ColorCard Component 코드작성

2. App.js 코드실행

실행결과

---

실습 3번문제

대망의 끝판왕 MediaCard 컴포넌트를 제작합니다! 무슨 방법을 사용하셔도 괜찮습니다. 최선을 다해서 사진과 유사한 미디어 카드를 만들어주세요! FE는 필수소양은 디자인을 완벽하게 같게 구사하는 능력입니다.

요런 컴포넌트를 만들어 주세요!

제한조건

• styled-component 를 이용합니다.
• 사진의 1번은 url을 props 로 입력받습니다.
• 사진의 2번은 미디어카드의 제목입니다. props를 통해 입력받습니다.
• 사진의 3번은 미디어 카드의 내용입니다. props를 통해 입력받습니다.
• 사진의 4번은 미디어 카드의 버튼의 색 입니다. props를 통해 입력받습니다.
• 서로 다른 props를 입력받은 미디어 카드를 최소 5개 이상 만듭니다.

---

해결방법

1. MediaCard Component 코드작성

2. App.js 코드실행

실행결과

• 앞서 만들어 놓았던 Component들을 활용해 최종적으로 CardWrapper로 감싸주는 형태로 만들었다.
• Image와 Text가 들어가는 틀을 CardWrapper 내부에서 위치조정 하기 위해 Margin이라는 Component를 새로 만들어 벽돌을 쌓듯이 쌓아 완성했다.

3. Margin Component 활용

_(출처: 든든한 조장 성인님)_

---