css

src/Admin.js

@@ -65,7 +65,7 @@ function Admin() {
                         <input type="radio" id="option" />
                     </div>
                 </div>
-                <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
             </div>
         }
         setselectOption(list)
@@ -80,34 +80,34 @@ function Admin() {
     return (
         <>
             {done ? alert('모두 입력되었습니다.') : ''}
-            <div className="row">
-                <div className="col-3">
+            <div className="row justify-content-md-center">
+                <div className="col-2 text-center border">
                     <div className="container-fluid ">
-                        <div className="navbar-header p-3">
-                            <p className="navbar-brand ">관리자 페이지</p>
+                        <div className="navbar-header p-3 ">
+                            <p className="navbar-brand border-bottom ">관리자 페이지</p>
                         </div>
                         <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
 
-                            <p className="navbar-text">관리자 설정 변경하기</p>
+                            <p className="navbar-text border-bottom">관리자 설정 변경하기</p>
 
                             <a className="nav-link" id="setting-tab" data-toggle='pill' href="#setting" role="tab">Setting</a>
 
 
-                            <p className="navbar-text">Quiz 입력하기</p>
+                            <p className="navbar-text border-bottom">Quiz 입력하기</p>
 
                             <a className="nav-link" id="Quiz1-tab" data-toggle="pill" href="#Quiz1" role="tab" >Quiz1</a>
                             <a className="nav-link" id="Quiz2-tab" data-toggle="pill" href="#Quiz2" role="tab" >Quiz2</a>
                             <a className="nav-link" id="Quiz3-tab" data-toggle="pill" href="#Quiz3" role="tab" >Quiz3</a>
                             {addQuiz}
-                            <button class="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
+                            <button className="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
 
 
                         </div>
                     </div>
                 </div>
-                <div className="col-9">
+                <div className="col-8">
                     <div className="tab-content" id="v-pills-tabContent">
-                        <div className="tab-pane fade show active" id="setting" role="tabpanel" aria-labelledby="v-pills-home-tab">
+                        <div className="tab-pane fade show active" id="setting" role="tabpanel" >
                             <div>
                                 <div className="container">
                                     <div className="row d-flex justify-content-center">
@@ -143,7 +143,7 @@ function Admin() {
 
                         </div>
 
-                        <div className="tab-pane fade" id="Quiz1" role="tabpanel" aria-labelledby="v-pills-profile-tab">
+                        <div className="tab-pane fade" id="Quiz1" role="tabpanel" >
 
                             <div className="container">
                                 <div className="row d-flex justify-content-center">
@@ -166,7 +166,7 @@ function Admin() {
                                                             <input type="radio" id="option" />
                                                         </div>
                                                     </div>
-                                                    <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                 </div>
                                                 {selectOption}
 
@@ -190,7 +190,7 @@ function Admin() {
                             </div>
                         </div>
 
-                        <div className="tab-pane fade" id="Quiz2" role="tabpanel" aria-labelledby="v-pills-messages-tab">
+                        <div className="tab-pane fade" id="Quiz2" role="tabpanel">
 
                             <div className="container">
                                 <div className="row d-flex justify-content-center">
@@ -213,7 +213,7 @@ function Admin() {
                                                             <input type="radio" id="option" />
                                                         </div>
                                                     </div>
-                                                    <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                 </div>
                                                 {selectOption}
 
@@ -235,7 +235,7 @@ function Admin() {
                                 </div>
                             </div>
                         </div>
-                        <div className="tab-pane fade" id="Quiz3" role="tabpanel" aria-labelledby="v-pills-settings-tab">
+                        <div className="tab-pane fade" id="Quiz3" role="tabpanel">
                             <div className="container">
                                 <div className="row d-flex justify-content-center">
                                     <div className="col-8">
@@ -257,7 +257,7 @@ function Admin() {
                                                             <input type="radio" id="option" />
                                                         </div>
                                                     </div>
-                                                    <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                 </div>
                                                 {selectOption}