diff --git a/README.md b/README.md
index 6e4f5b0..0c178c7 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,15 @@ ex)
다음과 같이 입력받을 때 font-weight, font-size 등이 수정되도록 바꾸어 주세요
+
+예를 들어 폰트 사이즈를 props를 통해 받으려면
+font-size: ${(props) => (props.fontSize ? props.fontSize : "24")}px;
+이렇게 적는다.
+마지막 : 오른쪽에 있는 값은 fontSize로 값을 받지 않았을 때 기본적으로 입력받는 값이다.
+props의 이름이라고 해야하나? 저거 받는 거 쨋든 저거 이름은 중간은 대문자로 해놓아야한다.
+css를 쓰기 위해서는 const 이름 = styled.div` 를 작성해야 하고 그 전에 import styled from ~ 를 작성해야한다.
+component 이름은 대문자로 시작해야한다.
+component 를 밖으로 꺼내려면 export default 이름 을 맨 마지막에 써야하며 쓰려는 곳에서 import 해야한다.
# 실습 2번문제
색상코드를 입력하면 색상과 text가 나오는 카드를 만들어봅시다! 제한된 조건 속에서 진행해 주시길 바랍니다!!
@@ -45,6 +54,13 @@ ex)
- ColorCard들 사이 간격은 10px 로 합니다.
- ColorCard를 서로다른 props를 통해서 5개 이상 화면에 출력합니다.
+
+
+색깔만 props로 받아서 쓸 수 있도록 설계했다.
+background-color: ${(props) => (props.backgroundColor ? props.backgroundColor : "black")};
+
+
+
# 실습 3번문제
대망의 끝판왕 MediaCard 컴포넌트를 제작합니다!
@@ -61,6 +77,14 @@ ex)
- 사진의 4번은 미디어 카드의 버튼의 색 입니다. props를 통해 입력받습니다.
- 서로 다른 props를 입력받은 미디어 카드를 최소 5개 이상 만듭니다.
+
+
+props를 이용해서 이미지의 경로를 받도록 했다.
+background-image: url('image/${(props) => (props.backgroundImage ? props.backgroundImage : "green")}');
+url(경로)가 이미지 경로를 이용해서 background-image를 받는 방법이므로 url()까지 써놓고 경로만 받을 수 있도록 설계하였다.
+
+
+
# 제출시 필수 사항
- 실습 모든 문제를 포함합니다.
- 실습의 각 문제마다 스크린샷을 포함합니다.
diff --git a/public/image/apps.jpg b/public/image/apps.jpg
new file mode 100644
index 0000000..87cee1f
Binary files /dev/null and b/public/image/apps.jpg differ
diff --git a/public/image/colorcard.jpg b/public/image/colorcard.jpg
new file mode 100644
index 0000000..2af789a
Binary files /dev/null and b/public/image/colorcard.jpg differ
diff --git "a/public/image/\352\263\274\354\240\2341.jpg" "b/public/image/\352\263\274\354\240\2341.jpg"
new file mode 100644
index 0000000..8fcac78
Binary files /dev/null and "b/public/image/\352\263\274\354\240\2341.jpg" differ
diff --git "a/public/image/\352\263\274\354\240\2342Mediacard.jpg" "b/public/image/\352\263\274\354\240\2342Mediacard.jpg"
new file mode 100644
index 0000000..d206cba
Binary files /dev/null and "b/public/image/\352\263\274\354\240\2342Mediacard.jpg" differ
diff --git a/src/App.js b/src/App.js
index 7f17a1e..ecb435e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,11 +9,11 @@ function App() {
-
-
-
-
-
+ Ironmanpic
+ Cathedral
+ Ironmanpic2
+ Ironmanpic3
+ The Greatest Showman
);
};
diff --git a/src/component/MediaCard/index.js b/src/component/MediaCard/index.js
index 6d21030..871c923 100644
--- a/src/component/MediaCard/index.js
+++ b/src/component/MediaCard/index.js
@@ -10,7 +10,6 @@ const CardWrapper1 = styled.div`
border: 1px black solid;
margin: 10px;
border-radius: 15px;
- }
//
`;
const TextWrapper = styled.div`
@@ -44,8 +43,8 @@ const MediaCard = (props) => {
- Heading
- This is a short description about the card.
+ {props.children}
+ {props.subtext}
diff --git a/src/component/Text/index.js b/src/component/Text/index.js
index 7941d4d..794c269 100644
--- a/src/component/Text/index.js
+++ b/src/component/Text/index.js
@@ -6,6 +6,9 @@ const StyledText = styled.div`
color: ${(props) => (props.color ? props.color : "black")};
font-weight: ${(props) => (props.fontWeight ? props.fontWeight : "500")};
text-align: ${(props) => (props.textAlign ? props.textAlign :"left")};
+ text-overflow: ellipsis;
+ overflow:hidden;
+ width:300px;
`;
const TextBox = (props) => {
+
+색깔만 props로 받아서 쓸 수 있도록 설계했다.
+