형태만 잡음 수정하자

src/App.js

@@ -11,7 +11,7 @@ function App() {
     <Router>
       <header>
         <Link to="/">
-          <button>Calculus</button>
+          <button>Home</button>
         </Link>
       </header>
       <hr/>

src/End.css

-.card {
-     font-size:'30px'; 
-     text-align:"center";
-    }
+/* .The-End {
+    display: flex;
+}
 
-.Box-text-center {
+.card {
     display:flex;
     justify-content: center;
-    margin-top:'100px';
+    width: auto;
+    margin-top: 5%;
+    /* text-align:"center";
+    }
+
+.card-body {
+    width: 18em;
+    text-align: center;
+    border: solid 1px;
+}
+
+.card-body2 {
+    width: 18em;
+    text-align: center;
+
 }
 
+.card-title2 {
+    width: 18em;
+    text-align: center;
+    border: solid 1px;
+} */

src/End.js

 import React from 'react'
-import tr from './End-Image01.jpg';
+// import tr from './End-Image01.jpg';
 import './End.css'
-
+import  'bootstrap'
 
 // import { Link } from 'react-router-dom';
 
@@ -9,42 +9,77 @@ function End() {
     let a = []
     for (let i = 0; i < 3; i++) {
 
-        if (localStorage.getItem('답'+(i+1)) === localStorage.getItem('정답'+(i+1))) {
+        if (localStorage.getItem('답' + (i + 1)) === localStorage.getItem('정답' + (i + 1))) {
+
+            a[i] = 1
 
-            a[i] =1
-            
 
-            localStorage.setItem('채점'+(i+1),'O')
+            localStorage.setItem('채점' + (i + 1), 'O')
 
         }
         else {
 
-            a[i] =0
-            
-            localStorage.setItem('채점'+(i+1),'X')
+            a[i] = 0
+
+            localStorage.setItem('채점' + (i + 1), 'X')
         }
     }
 
     return (
         <>
-            <div className="card" >
-                <div className='card-header'>
-                    -채점표-            
+
+            <div className="container">
+                <h2>채점표</h2>
+                <table className="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>  </th>
+                            <th>이름 여기</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>문제1 여기</td>
+                            <td>문제1 답 여기</td>
+
+                        </tr>
+                        <tr>
+                            <td>문제2 여기</td>
+                            <td>문제2 답 여기</td>
+                        </tr>
+                        <tr>
+                            <td>문제3 여기</td>
+                            <td>문제3 답 여기</td>
+                        </tr>
+                        <tr>
+                            <td>총점</td>
+                            <td>총점 및 결과??</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            {/* <div className="card" >
                 <div className='card-body'>
-                    <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
-                    
+                    <h1 className='card-title'>-채점표-</h1>
+                    <h3 className='card-subtitle'>이름 : {localStorage.getItem('name')}</h3>
 
                     <p className='card-text'>Quiz 1 : {localStorage.getItem('채점1')}</p>
                     <p className='card-text'>Quiz 2 : {localStorage.getItem('채점2')}</p>
                     <p className='card-text'>Quiz 3 : {localStorage.getItem('채점3')}</p>
                     <p className='card-text'>Total Score : {a[0] + a[1] + a[2]}</p>
                 </div>
-                <div className="Box-text-center">
-                    <img src={tr} alt="수고" />
+                <div className="card2">
+                    <div className='card-body2'>
+                        <h3 className='card-title2'>결과</h3>
+                        <p className='card-text2'>합격인지 아닌지 써주자</p>
+                    </div>
+                </div> */}
+
+            {/* <div >
+                    <img src={tr} alt="수고" class="card" className="Box-text-center" />
        
-                </div>
-                </div>
-            </div>
+                </div> */}
         </>
 
     )

src/Home.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Redirect } from 'react-router-dom';
 import './Home.css'
 
+
 function Home() {
     const [name, setName] = useState('')
     const [done, setDone] = useState(false)
@@ -30,7 +31,7 @@ function Home() {
                 <div className="Box">
                     <div className="Name">
                         이름을 입력하세요
-                        <input className="input-style" onChange={handleChange} />
+                        <input className="inputBox" onChange={handleChange} />
                         <div className='Box2'>
                             <button className="QuizStart" onClick={checking}>Quiz Start !</button>
                         </div>

src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 // import Quiz from './Quiz';
 import * as serviceWorker from './serviceWorker';
+import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(
   <React.StrictMode>