From bf018d09a8e9eabc99addd96c63931e6949172de Mon Sep 17 00:00:00 2001
From: Jiwon Yoon <jiwon5393@naver.com>
Date: Mon, 27 Jul 2020 10:51:44 +0900
Subject: [PATCH] push

---
 src/Quiz.css | 22 ++++++++++++++++++++++
 src/Quiz.js  | 16 ++++++++--------
 2 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 src/Quiz.css

diff --git a/src/Quiz.css b/src/Quiz.css
new file mode 100644
index 0000000..6f6c763
--- /dev/null
+++ b/src/Quiz.css
@@ -0,0 +1,22 @@
+.Main {
+    background: orange;
+    display: inline-block;
+    border: 3px solid black;
+    width: 200px;
+    text-align: center;
+}
+
+/* .Name {} */
+
+.Box {
+    text-align: center;
+    margin: 0 auto;
+}
+
+.QuizStart {
+    margin: 30px;
+    margin-left: 500px;
+    width: 150px;
+    height: 30px;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+}
\ No newline at end of file
diff --git a/src/Quiz.js b/src/Quiz.js
index 6fc89d0..6a8df82 100644
--- a/src/Quiz.js
+++ b/src/Quiz.js
@@ -1,6 +1,6 @@
 import React from 'react';
 // import logo from './logo.svg';
-// import './App.css';
+import './Quiz.css';
 
 
 const question = [
@@ -40,7 +40,7 @@ class Quiz extends React.Component {
       }
       else {
         return (
-          <div className="quiz">
+          <div className="Quiz">
             <h2>Q:{this.state.Q}</h2>
             <div>
               <input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
@@ -52,16 +52,16 @@ class Quiz extends React.Component {
     }
     else {
       return (
-        <>
-          <div className="App">
-            <h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
+        <div className="Box">
+          <div className="Main">
+            <h1> Calculus</h1>
           </div>
-          <div className="App">
+          <div className="Name">
             이름을 입력하세요
           <input onChange={(event) => { console.log(event.target.value) }} />
           </div>
-          <button onClick={this.ShowQuiz1} style={{ margin: "30px", marginLeft: "690px", width: "150px", height: "30px", fontFamily: "impact" }}>Quiz Start !</button>
-        </>
+          <button className="QuizStart" onClick={this.ShowQuiz1}>Quiz Start !</button>
+        </div>
 
       )
     }
-- 
GitLab