css 정렬 수정

11월14일 오전 2시44분
euWna · zoo0YOON · Nov 8, 2022 · Nov 8, 2022 · Nov 8, 2022 · Nov 8, 2022
commit 0ba3148c8038f238d59b1df76083f03e9d0625aa
diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,14 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>맛집 웹사이트</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript></noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/component/NavBar.js b/src/component/NavBar.js
@@ -6,9 +6,9 @@ function NavBar(){
     return(
         <nav>
         맛집 상세 조회
-            <Link to="/ReviewAll" class={styles.nava}>리뷰 모아보기</Link>
-            <Link to="/CreateStore" class={styles.nava}>맛집 정보 추가하기</Link>
-            <Link to="/StoreListView" class={styles.nava}>맛집 모아보기</Link>
+            <Link to="/ReviewAll" >리뷰 모아보기</Link>
+            <Link to="/CreateStore" >맛집 정보 추가하기</Link>
+            <Link to="/StoreListView" >맛집 모아보기</Link>
         </nav>
     );
 }

diff --git a/src/component/header.js b/src/component/header.js
@@ -8,9 +8,9 @@ function Header(){
         <header>
             <Link to="/"><img id={styles.homelogo} src={homelogo}/></Link>
                 <div class={styles.signInUp}>
-            <Link to="/Login">로그인</Link>
-            <Link to="/SignUp">회원가입</Link>
-            </div>
+                    <Link to="/Login">로그인</Link>
+                    <Link to="/SignUp">회원가입</Link>
+                </div>
         </header>
         </div>
     );

diff --git a/src/component/menuPost.js b/src/component/menuPost.js
diff --git a/src/component/reviewPost.js b/src/component/reviewPost.js
diff --git a/src/css/CreateStore.module.css b/src/css/CreateStore.module.css
@@ -2,10 +2,16 @@ body{
 background-color: rgb(238, 238, 238);
 }
 
+section{
+  display: flex;
+  justify-content: center;
+  min-width: 1400px; 
+}
+
 aside{
-width:200px;
+/* width:200px; */
 height:400px;
-background-color: rgb(238, 238, 238);
+/* background-color: rgb(238, 238, 238); */
 padding:20px ;
 float:left;
 }
@@ -16,7 +22,7 @@ background-color: white;
 border: solid #dcdcdc 2px;
 width:230px;
 height:130px;
-left:30px;
+/* left:30px; */
 }
 
 .up{
@@ -35,26 +41,28 @@ right:22px;
 display:table;
 width:900px;
 }
+
 .cell {display: table-cell; padding: 3px; border-bottom: 1px solid #DDD;}
 
 .row{
 position: relative;
 background-color:white;
-left:80px;
+/* left:80px; */
 top :20px;
 border: solid #dcdcdc 0.5px;
 }
 
 .col1{
 position:relative;
-top:15px;
+top:10px;
+left: 20px;
 width:150px;
 height:50px;
 }
 
 .col2{
 position:relative;
-  top:15px;
+  top:8px;
 height:50px;
 }
 

diff --git a/src/css/Header.module.css b/src/css/Header.module.css
@@ -12,21 +12,55 @@ a{
 }
 
 header{
+    display: flex;
     padding: 20px;
     /* margin-bottom: 30px; */
     min-width: 1400px; 
+    justify-content: space-between
+}
+
+.signInUp {
+    display: flex;
+    float: right; 
+    top: 25px;
+    align-items: center
 }
 
 .signInUp a{
-    float: right;
     margin-left: 30px;
+    position: relative;
 }
 
+.signInUp a:hover {
+    color: #01c9ca;  
+  }
+
+.signInUp a:before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #000;
+    transform: scale(0);
+    transition: all 0.2s;
+  }
+
+ .signInUp a:hover:before {
+    background: #01c9ca;
+    transform: scale(1);
+  }
+
 #homelogo {
+    display: flex;
     width: 50px;
     height: 50px;
 }
 
+/* 네비게이션 바 */
+
 nav {
     justify-content: center;
     color: white;
@@ -43,7 +77,7 @@ nav .pageName{
 nav a {
     padding-left: 20px;
     padding-right: 20px;
-    border-right: 1px solid white;
+    /* border-right: 1px solid white; */
     font-size: 15px;
     float: right;
     /* margin-top:10px; */

diff --git a/src/css/HomePage.module.css b/src/css/HomePage.module.css
@@ -24,27 +24,8 @@ body {
     font-family: 'Noto Sans KR';
     font-size:17px;
     line-height:1.5;
-}
-
-* {
-    box-sizing: border-box;
-  }
-
-/* header {
-    padding-top: 50px;
-    padding-bottom: 50px;
-    text-align: center;
-    background: rgb(238, 238, 238);
     min-width: 1400px; 
-} */
-
-/* Nav {
-    background-color: var(--egreen);
-    color: white;
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
-} */
+}
 
 .section {
     text-align: center;
@@ -58,7 +39,7 @@ body {
 }
 
 .hottitle {
-    /* display: inline-block; */
+    display: inline-block;
     font-size: 18px;
     color: rgb(255, 255, 255);
     margin-top: 20px;
@@ -105,7 +86,7 @@ p {
 .link-1 a:after { right: 0; }
 
 .link-1 a:hover:before, .link-1 a:hover:after {
-  width: 50%;
+  width: 52%;
 }
 
 .link-1 a:before, .link-1 a:after {

diff --git a/src/css/MyPage.module.css b/src/css/MyPage.module.css
@@ -1,6 +1,7 @@
-* {
+/* * {
     box-sizing: border-box;
-  }
+  } */
+
   body {
     margin : 0;
   }

diff --git a/src/css/MyPageBookmark.module.css b/src/css/MyPageBookmark.module.css
@@ -1,7 +1,7 @@
 
-* {
+/* * {
     box-sizing: border-box;
-  }
+  } */
 
   body {
             margin : 0;

diff --git a/src/css/MyPageMenu.module.css b/src/css/MyPageMenu.module.css
@@ -1,7 +1,7 @@
 
-* {
+/* * {
     box-sizing: border-box;
-  }
+  } */
 
   body {
             margin : 0;

diff --git a/src/index.js b/src/index.js
@@ -23,7 +23,6 @@ root.render(
     <body style={styles}>
     <Section></Section>
     </body> */}
-
     <App></App>
   </React.StrictMode>
 );

diff --git a/src/pages/CreateStore.js b/src/pages/CreateStore.js
@@ -5,14 +5,15 @@ import NavBar from '../component/NavBar';
 
 function CreateStore(){
     return (
-        <body>
+        <div>
             <NavBar></NavBar>
-            <aside>
+        <section>
+        <aside>
             <div class={styles.asideleft}>
                 <div class={styles.up}>기본정보</div>
                 <div class={styles.down}>메뉴</div>
             </div>
-        </aside><section>
+        </aside>
                 <div id={styles.table}>
                     <div class={styles.row}>
                         <span class={`${styles.cell} ${styles.col1}`}>매장명</span>
@@ -62,7 +63,8 @@ function CreateStore(){
                         <span class={`${styles.cell} ${styles.col2}`}><input type="button" value="기본 정보 등록" /></span>
                     </div>
                 </div>
-            </section></body>
+            </section>
+            </div>
     )
                     }
 

diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js
@@ -17,7 +17,7 @@ function Section(){
           <div class={styles.green}>
             <div class = {styles.hottitle}>
             {/* <h2>HOT TOPIC</h2> */}
-            <div class={styles.link-1}>
+            <div class={styles['link-1']}>
         <a class={styles.hottopic} href="#">
         <span class={styles.thick}>HOT </span><span class={styles.thin}>TOPIC</span>
         </a>
@@ -81,17 +81,13 @@ function Section(){
 function Homepage() {
   return (
     <div className="">
-      <head>
-      </head>
-      <body>
         <Section></Section>
           <div class = {styles.Hbox}>
             <Link to="/StoreListView" class={styles.homeButton}>맛집 모아보기</Link>
             <Link to="/CreateStore" class={styles.homeButton}>맛집 정보 추가하기</Link>
             <Link to="/reviewAll" class={styles.homeButton}>리뷰 모아보기</Link>
             {/* 페이지 링크는 이렇게 걸어주세요 */}
           </div>
-      </body>
     </div>
   );
 } 

diff --git a/src/pages/ReviewAll.js b/src/pages/ReviewAll.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import sample from "../img/sample.PNG";
 import styles from '../css/ReviewAll.module.css';
 import NavBar from '../component/NavBar';
 
@@ -14,23 +15,24 @@ function ReviewSection() {
                     <div class={styles.store_location}>신촌동 xxx xxx</div>
                     <div class={styles.review_title}>리뷰 제목입니다.</div>
                     <div class={styles.review_desc}>본문샘플<br/>본문샘플</div>
-                    <div class={styles.review_img}><img src="sample.PNG" width="250" height="230" /></div>
+                    <div class={styles.review_img}><img src={sample} width="250" height="230"/></div>
+
                 </div>
                 <div class = {styles.pr_description}>
                     <div class={styles.user_name}>사용자</div>
                     <div class={styles.store_name}>음식점 이름</div>
                     <div class={styles.store_location}>신촌동 xxx xxx</div>
                     <div class={styles.review_title}>리뷰 제목입니다.</div>
                     <div class={styles.review_desc}>본문샘플<br/>본문샘플</div>
-                    <div class={styles.review_img}><img src="sample.PNG" width="250" height="230" /></div>
+                    <div class={styles.review_img}><img src={sample} width="250" height="230"/></div>
                 </div>
                 <div class = {styles.pr_description}>
                     <div class={styles.user_name}>사용자</div>
                     <div class={styles.store_name}>음식점 이름</div>
                     <div class={styles.store_location}>신촌동 xxx xxx</div>
                     <div class={styles.review_title}>리뷰 제목입니다.</div>
                     <div class={styles.review_desc}>본문샘플<br/>본문샘플</div>
-                    <div class={styles.review_img}><img src="sample.PNG" width="250" height="230" /></div>
+                    <div class={styles.review_img}><img src={sample} width="250" height="230"/></div>
                 </div>
             </div>
             <div class = {styles.hotreview}>
@@ -46,12 +48,10 @@ function ReviewSection() {
 function ReviewAll() {
     return (
         <div class={styles.default}>
-          <head>
-          </head>
-          <body class={styles.body}>
-            <NavBar></NavBar>
-            <ReviewSection></ReviewSection>
-          </body>
+            <div class={styles.body}>
+              <NavBar></NavBar>
+              <ReviewSection></ReviewSection>
+            </div>
         </div>
       );
 }

diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js
@@ -46,9 +46,6 @@ class SignUp extends React.Component {
                     </tr>
                 </table><br></br>
                 <button type="button" name="join_button">회원가입 완료하기</button>
-
-
-
             </div>
         );
     }
-Original file line number
+Diff line change
@@ @@ -46,9 +46,6 @@ class SignUp extends React.Component { @@
                         </tr>
                     </table><br></br>
                     <button type="button" name="join_button">회원가입 완료하기</button>
                 </div>
             );
         }