a

src/Home.js

@@ -25,8 +25,8 @@ function Home() {
         <>
             {done ? <Redirect to='/quiz' /> : ''}
             <div className="container-fluid"> 
-                <div className="text-center">
-                    <div>
+                <div className="h-100 text-center">
+                        <div className="mb-5">
                             이름을 입력하세요
                         </div>
                         <input className="inputBox" onChange={handleChange} />

src/Quiz.css

-.Main {
-    background: gray;
-    background-image: url('');
-    display: inline-block;
-    border: 3px solid black;
-    width: 750px;
-    height: 180px;
-    text-align: center;
-    margin-left: 410px;
-    margin-top: 10px;
-    font-size: 120px;
-    font-family: cursive;
-    color : greenyellow;
-    text-shadow :
-    -3px -3px 0 #000, /* 왼쪽 위 그림자 */
-    3px -3px 0 #000, /* 오른쪽 위 그림자 */
-    -3px 3px 0 #000, /* 왼쪽 아래 그림자 */
-    3px 3px 0 #000; /* 오른쪽 아래 그림자 */
-
-}
-
-/* .Name {} */
-
-.Box {
-    text-align: center;
-    margin: 0 auto;
-    margin-top: 75px;
-}
-
-.QuizStart {
-    margin: 30px;
-    margin-left: 650px;
-    margin-top: 150px;
-    margin-bottom: 200px;
-    width: 220px;
-    height: 50px;
-    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
-    font-size: 20px;
-    letter-spacing: 3px;
-}
-
-.card{
-    text-align: center;
-    margin: 100px;
-    font-size: 10px;
-
+.container-fluid {
+    background: white;
+    width: 100%;
+    height: 500px;
+    /* background-image: url('./img/img_quiz.png');
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: 200px; */
 }

src/Quiz.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
 import logo from './img/img_question.png'
 import fight from './img/img_quiz.png'
+import './Quiz.css'
 
 
 const QnA = [
@@ -12,68 +13,64 @@ const QnA = [
 ]
 
 function Quiz() {
-    let [question, setQuestion] = useState({
+    const [question, setQuestion] = useState({
         ...QnA[0],
         i: 0,
         page: 0,
     })
-    let [selected, setSelected] = useState("")  //선택한 답을 보여줄 것들
+    const [selected, setSelected] = useState("")  //선택한 답을 보여줄 것들
+    // const [checked, setChecked] = useState(false)
 
     function handleQuestion() {
         setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
+        // setChecked(false)
     }
 
     let handleChange = (ev) => {
-        ev.preventDefault()  //새로고침 안되도록
+        // ev.preventDefault()  //새로고침 안되도록
         setSelected(ev.target.value)  //selected값 변경
-
         let checked_number = ev.target.id;
 
-                localStorage.setItem('답'+(question.N), Number(checked_number)+1)
-                localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
+        localStorage.setItem('답' + (question.N), Number(checked_number) + 1)
+        localStorage.setItem('정답' + (question.N), QnA[question.N - 1].A)
 
     }
     return (
-        <>
-            <div style={{ fontSize: '80px', marginBottom: '100px', textAlign: "center", backgroundColor: 'yellow' }}>미적분학 퀴즈</div>
-            <img src={fight} style={{ position: "absolute", left: "1050px", top: '200px' }} alt="lion" />
-            <div className="Quiz" >
-                <h1><img src={logo} style={{ marginLeft: "450px" }} width='75' height='75' alt='question' /> <span style={{ fontSize: "75px", marginLeft: "30px" }}>{question.Q}</span></h1>
-                {/* <div style={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */}
-
-                <div>
+        <div className="container-fluid position-absolute">
+            <div className="text-center h2 font-weight-bold bg-warning py-2">미적분학 퀴즈</div>
+            {/* <div >
+                <img src={fight} className="float-right mr-5 h-50" alt="lion" />
+            </div> */}
+            <div className="row justify-content-md-center" >
+                <div className="col text-right">
+                    <h1>
+                        <img src={logo} width='50' height='50' alt='question' />
+                    </h1>
+                </div>
+                <div className="col-md-auto">
+                    <div className="h2 mt-2">
+                        {question.Q}
+                    </div>
+                    <div className="mt-2">
                         <form>
                             {question.Choose.map((a, index) =>
                                 <div key={index}>
-                                <input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }}  />
-                                <label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
+                                    <input type="radio" name='answer' id={index} value={a} onClick={handleChange} />
+                                    <label className="font-weight-bold" htmlFor={a}>{a}</label>
                                 </div>
                             )}
                             <input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
                         </form>
-                    <p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span>  {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}>            {(question.page === QnA.length - 1)
-                        ? <Link to="/end">제출</Link>
-                        : <button type="button" onClick={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
-
-                    }</span>
-                    </p>
+                        <span className="h5 font-weight-bold"> Your Answer :</span>
+                        <span className="h2 font-weight-bold text-danger"> {selected}</span>  {/* 선택한 값 보여줌 */}
+                        <div className="text-center my-3"> {(question.page === QnA.length - 1)
+                            ? <Link to="/end">
+                                <button className="btn btn-outline-success">제출</button>
+                            </Link>
+                            : <button type="button" className="btn btn-outline-dark" onClick={handleQuestion}>다음</button>
+                        }
                         </div>
-
-
-
-
-
-                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */}
-                {/* {(question.page === QnA.length - 1)
-                ? <Link to="/end">제출</Link>
-                : <button type="button" onClick={handleQuestion} >다음</button>
-
-            } */}
-
-                {/* <input onKeyPress="this.enterkey()"/> */}
-
-
-                <p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
+                        <p className="h3 text-center text-danger ">
                             <Timer
                                 initialTime={3600000}
                                 direction="backward"
@@ -91,9 +88,16 @@ function Quiz() {
                                 )}
                             </Timer>     {/* npm i react-compound-timer */}
                         </p>
+                    </div>
+                </div>
+                <div className="col">
+
+                </div>
 
+
+
+            </div>
         </div>
-        </>
     )