[STYLE] CSS 작업(#3)

Hongmoon-gak · Jul 22, 2023 · 994076f · 994076f
1 parent 45a42b1
commit 994076f
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/job1/src/Component/InfoCard.js b/job1/src/Component/InfoCard.js
@@ -4,9 +4,11 @@ import styled from "styled-components";
 function InfoCard(props){
     return(
         <Card>
-            <img src={props.img} alt={props.name} />
-            <p>{props.name}</p>
-            <a href='tel:{props.tel}' >Tel: {props.tel}</a>
+            <Img src={props.img} alt={props.name} />
+            <Text>
+                <Institution>{props.name}</Institution>
+                <Tel href='tel:{props.tel}' >☎️ Tel: {props.tel}</Tel>
+            </Text>
         </Card>
     )
 }
@@ -21,4 +23,32 @@ const Card=styled.div`
     border-radius: 1.5rem;
     background: var(--neutral-colors-white, #FFF);
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+`
+
+const Text=styled.div`
+    padding-left: 1.5rem;
+    text-align: left;
+`
+
+const Institution=styled.p`
+    color: #000;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: DM Sans;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 700;
+`
+
+const Img=styled.img`
+    margin-top: 1.5rem;
+`
+
+const Tel=styled.a`
+    text-decoration: none;
+    color: #000;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: DM Sans;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 400;
 `