[#1] Feat : main0 css, main 틀

src/components/Home.js

@@ -1,11 +1,14 @@
 import React from 'react';
+import Main0 from './main-detail/Main0';
+import Main1 from "./main-detail/Main1";
+import Main2 from "./main-detail/Main2";
 
 const Home = () => {
   return(
-    <div className="page">
-      <section>
-        <div className="subtit">ABOUT US</div>
-      </section>
+    <div id="Home">
+      <Main0/>
+      <Main1/>
+      <Main2/>
     </div>
   )
 }

src/components/main-detail/Main0.js

@@ -2,7 +2,14 @@ import React, {useState} from 'react';
 
 const Main0 = () => {
   return(
-
+    <section id="main0" className="page">
+      <div id="catchphrase">
+        <p className="main_tit">
+          <span className="bold">WE ARE EWHA CHAIN</span><br/>
+          <span>where we lead the industry of block chain</span>
+        </p>
+      </div>
+    </section>
   )
 }
 

src/components/main-detail/Main1.js

@@ -0,0 +1,18 @@
+import React, {useState} from 'react';
+
+const Main1 = () => {
+  return(
+    <section id="main1" className="page">
+      <div>
+        <div>OUR MISSION</div>
+        <div>넥스트 블록체인 네트워크 형성</div>
+        <p>블록체인에 관심있는 사람들끼리 모여 직접 블록체인 관련 프로젝트를 기획 및 개발할 수 있는 “차세대 블록체인 생태계 리더”를 만드는 것입니다.</p>
+      </div>
+      <div>
+      {/*  img*/}
+      </div>
+    </section>
+  )
+}
+
+export default Main1

src/components/main-detail/Main2.js

@@ -0,0 +1,13 @@
+import React, {useState} from 'react';
+
+const Main2 = () => {
+  return(
+    <section id="main2" className="page">
+      <div>OUR ACTIVITY</div>
+      <div>
+      </div>
+    </section>
+  )
+}
+
+export default Main2

src/components/style.css

@@ -1,3 +1,5 @@
+
+
 /* Header - nav var */
 header {
     background-color: white;
@@ -33,9 +35,48 @@ header li a {
 .page {
     margin-top: 80px;
     padding: 20px;
+    height: 500px;
+    align-content: center;
 }
 
 .page .subtit {
     font-size: 24px;
     font-weight: 900;
+}
+
+#catchphrase {
+    background-color: black;
+    margin: 0 auto;
+    width: 90%;
+    height: 95%;
+    text-align: center;
+}
+
+#catchphrase > .main_tit {
+    color: white;
+    font-size: 40px;
+    font-weight: 300;
+    text-align: left;
+    position: absolute;
+    top: 50%;
+    left: 40%;
+    transform: translate( -50%, -50% );
+}
+
+#catchphrase > .main_tit > .bold {
+    font-weight: 900;
+    font-size: 60px;
+}
+
+#catchphrase > .sub_tit {
+    color: white;
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate( -50%, -50% );
+}
+
+/* responsive */
+@media screen {
+
 }

src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: nanumsquare, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;