[Style] #14 - Revise css

다른 css영향 해결, 페이지 이동 시 상단 스크롤, 홈 css, 그 외 잡다한 것
likelion11-kangwon · Apr 25, 2023 · 4090311 · 4090311
1 parent 605a7b9
commit 4090311
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 47 deletions.
diff --git a/WarmUpProject/src/App.js b/WarmUpProject/src/App.js
@@ -1,4 +1,5 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { useEffect } from "react";
 import HanKyungjun from './HanKyungjun';
 import KimSeongbin from './KimSeongbin';
 import SeoSangtae from './SeoSangtae';
@@ -9,6 +10,7 @@ function App() {
   return (
     <div className='App'>
       <BrowserRouter>
+        <ScrollToTop/>
         <Routes>
           <Route path={"/"} element={<Home />}></Route>
           <Route path={"/HanKyungjun"} element={<HanKyungjun/>}></Route>
@@ -21,4 +23,18 @@ function App() {
   );
 }
 
+/**
+ * 다른 페이지로 이동했을 때 상단으로 스크롤
+ * @returns 
+ */
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
 export default App;
diff --git a/WarmUpProject/src/Home.js b/WarmUpProject/src/Home.js
@@ -3,10 +3,32 @@ import './styles/Home.css';
 import MovePer from "./components/move_personal";
 //홈 페이지
 
+//홈과 상태님 페이지 상단의 css 선택자가 다른 페이지에 영향을 주어
+//각 페이지에서 따로 스타일을 주도록 설정하였습니다.
+const css_conflict=`
+    html {
+        font-size:62.5%;
+    }
+    * {
+        margin: 0;
+        padding: 0;
+    }
+    ul, li {
+        list-style: none;
+    }
+    input {
+        border: none;
+    }
+    body {
+    width: 39rem;
+    }
+`
+
 function Home() {
 
     return (
         <div class="iphone-13-13-pro-2-i7J">
+            <style>{css_conflict}</style>
             <img class="item--mjn" src="images/Home_imgs/Li.png" />
             <div class="auto-group-tesd-NDn">
                 <p class="pikachu-7j6">Pikachu</p>
@@ -65,7 +87,6 @@ function Home() {
             </p>
             <img class="image-5-UVe" src="images/Home_imgs/image-5.png" />
         </div>
-
     );
 }
 

diff --git a/WarmUpProject/src/JeongDayeon.js b/WarmUpProject/src/JeongDayeon.js
@@ -20,6 +20,10 @@ function JeongDayeon() {
           <TechStacks />
           <Channels />
         </div>
+        <p className='small_font'>
+          정다연 개인 페이지 디자인의 절반이상은 한경준님에게서 나왔습니다!
+          <br/>양심이 찔려 출처 남깁니다
+        </p>
     </div>
   );
 }

diff --git a/WarmUpProject/src/SeoSangtae.js b/WarmUpProject/src/SeoSangtae.js
@@ -4,8 +4,30 @@
 import './styles/sangtae.css';
 
 function SeoSangtae() {
+  //홈과 상태님 페이지 상단의 css 선택자가 다른 페이지에 영향을 주어
+  //각 페이지에서 따로 스타일을 주도록 설정하였습니다.
+  const css_conflict=`
+  html {
+      font-size:62.5%;
+  }
+  * {
+      margin: 0;
+      padding: 0;
+  }
+  ul, li {
+      list-style: none;
+  }
+  input {
+      border: none;
+  }
+  body {
+  width: 39rem;
+  }
+  `
+
   return (
     <div className='SeoSangtae'>
+      <style>{css_conflict}</style>
       <SstBody />
     </div>
   )

diff --git a/WarmUpProject/src/components/move_personal.js b/WarmUpProject/src/components/move_personal.js
@@ -9,7 +9,7 @@ import { Link } from "react-router-dom";
 export default function MovePer({img_path, page_path, name, num}){
 
     return(
-        <Link to={page_path}>
+        <Link className="move_par link" to={page_path}>
             <img src={img_path}></img>
             <div className="move_par name">{name}</div>
             <div className="move_par num">{num}</div>

diff --git a/WarmUpProject/src/db/JDYdata.json b/WarmUpProject/src/db/JDYdata.json
@@ -95,8 +95,8 @@
             "q":"2분마다 꺼지는 컴퓨터 vs 한타지는데 2초 걸리는 컴퓨터",
             "opt_1":"2분마다 꺼짐",
             "opt_2":"한 타 치는데 2초",
-            "answer":2,
-            "nuec_add":"onlinegdb.com 에디터가 딱 그러는데 적응되면 할만 하더라고요!"
+            "answer":1,
+            "nuec_add":"구름 에디터 덕에 2번을 경험해 봤는데 차라리 꺼지는게 낫겠다 싶네요"
         }
     ]
 }
diff --git a/WarmUpProject/src/styles/Home.css b/WarmUpProject/src/styles/Home.css
@@ -1,23 +1,7 @@
-
-html {
-	font-size:62.5%;
-}
-* {
-	margin: 0;
-	padding: 0;
-}
-ul, li {
-	list-style: none;
-}
-input {
-	border: none;
-}
-body {
-  width: 39rem;
-}.iphone-13-13-pro-2-i7J {
+.iphone-13-13-pro-2-i7J {
   box-sizing: border-box;
   padding: 2.6rem 2rem 3.8rem 2rem;
-  width: 100%;
+  width: 39rem;
   overflow: hidden;
   position: relative;
   align-items: center;
@@ -41,15 +25,13 @@ body {
   flex-shrink: 0;
 }
 .iphone-13-13-pro-2-i7J .auto-group-tesd-NDn .pikachu-7j6 {
-    width: 29rem;
-    height: 10.1rem;
     position: absolute;
     left: 0;
     top: 0;
     font-size: 8rem;
     font-weight: 800;
     line-height: 1.2575;
-    font-family: Pretendard, 'Source Sans Pro';
+
     white-space: nowrap;
     color: #fff977;
 }
@@ -63,7 +45,6 @@ body {
   font-weight: 800;
   line-height: 1.2575;
   color: #ffffff;
-  font-family: Pretendard, 'Source Sans Pro';
   white-space: nowrap;
 }
 .iphone-13-13-pro-2-i7J .auto-group-tesd-NDn .pikachu-jdz {
@@ -75,7 +56,6 @@ body {
   font-size: 8rem;
   font-weight: 800;
   line-height: 1.2575;
-  font-family: Pretendard, 'Source Sans Pro';
   white-space: nowrap;
 }
 .iphone-13-13-pro-2-i7J .auto-group-tesd-NDn .coding-27J {
@@ -88,7 +68,6 @@ body {
   font-weight: 800;
   line-height: 1.2575;
   color: #ffffff;
-  font-family: Pretendard, 'Source Sans Pro';
   white-space: nowrap;
 }
 .name {
@@ -98,7 +77,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #fff977;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -127,7 +105,7 @@ body {
   flex-shrink: 0;
 }
 .iphone-13-13-pro-2-i7J .auto-group-yvrm-5jn .auto-group-wecb-yaG .auto-group-tvvp-Rx4 {
-  margin-bottom: 1.4rem;
+  margin-bottom: 3.3px;
   width: 100%;
   height: 10.65rem;
   position: relative;
@@ -158,7 +136,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #fff977;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -168,7 +145,7 @@ body {
     font-weight: 400;
     line-height: 1.2125;
     color: #ffffff;
-    font-family: Inter, 'Source Sans Pro';
+
     white-space: nowrap;
     flex-shrink: 0;
 
@@ -187,7 +164,7 @@ body {
   flex-shrink: 0;
 }
 .iphone-13-13-pro-2-i7J .auto-group-yvrm-5jn .auto-group-emw1-Zyi .auto-group-zsuf-fG4 {
-  margin-bottom: 1.4296rem;
+  margin-bottom: 3.3px;
   width: 100%;
   height: 10.6204rem;
   position: relative;
@@ -218,7 +195,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #fff977;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -228,7 +204,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #ffffff;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -254,7 +229,7 @@ body {
   flex-shrink: 0;
 }
 .iphone-13-13-pro-2-i7J .auto-group-ju3z-V28 .auto-group-ogix-Cx8 .auto-group-hbvb-gcQ {
-  margin-bottom: 1.3631rem;
+  margin-bottom: 3.3px;
   width: 100%;
   height: 10.8369rem;
   position: relative;
@@ -278,14 +253,14 @@ body {
   object-fit: cover;
   vertical-align: top;
 }
+
 .iphone-13-13-pro-2-i7J .auto-group-ju3z-V28 .auto-group-ogix-Cx8 .item--RiQ {
   margin-bottom: 0.3rem;
   text-align: center;
   font-size: 3.2rem;
   font-weight: 400;
   line-height: 1.2125;
   color: #fff977;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -295,7 +270,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #ffffff;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -312,7 +286,7 @@ body {
   flex-shrink: 0;
 }
 .iphone-13-13-pro-2-i7J .auto-group-ju3z-V28 .auto-group-k5es-bmJ .auto-group-xnzf-X9A {
-  margin-bottom: 1.3703rem;
+  margin-bottom: 3.3px;
   width: 100%;
   height: 10.6797rem;
   position: relative;
@@ -343,7 +317,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #fff977;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -353,7 +326,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #ffffff;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -363,7 +335,6 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #fff977;
-  font-family: Inter, 'Source Sans Pro';
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -374,23 +345,46 @@ body {
   font-weight: 400;
   line-height: 1.2125;
   color: #ffffff;
-  font-family: Inter, 'Source Sans Pro';
   flex-shrink: 0;
 }
 .iphone-13-13-pro-2-i7J .image-5-UVe {
-  width: 17rem;
-  height: 21.4rem;
   object-fit: cover;
   vertical-align: top;
   flex-shrink: 0;
+  opacity: 50%;
+  position: relative;
+  width: 300px;
+  height: 500px;
+  border-radius: 30px 0px;
+  top: -26px;
 }
 .item--UV6{
     margin: 0rem 7.7rem 1.4rem 0rem;
     font-size: 3.2rem;
     font-weight: 400;
     line-height: 1.2125;
     color: #fff977;
-    font-family: Inter, 'Source Sans Pro';
+
     white-space: nowrap;
     flex-shrink: 0;    
 }
+
+/* 개인 페이지 카드 */
+.iphone-13-13-pro-2-i7J .move_par{
+  text-decoration-line: none;
+}
+.iphone-13-13-pro-2-i7J .move_par .name{
+  margin: 0px;
+}
+
+/* 맨 위 h1 */
+.iphone-13-13-pro-2-i7J .pikachu-7j6, .iphone-13-13-pro-2-i7J .pikachu-jdz{
+  margin-left: 5px;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: #fff977;
+  color: rgb(34, 34, 34);
+}
+
+.iphone-13-13-pro-2-i7J .item--UV6{
+  margin: 0px 0px 5px -105px;
+}
diff --git a/WarmUpProject/src/styles/sangtae.css b/WarmUpProject/src/styles/sangtae.css
@@ -5,6 +5,7 @@
 	border: none;
 }
 .sst_body {
+  display: inline-block;
   font-size:62.5%;
   width: 39rem;
 }.sangtae-H9r {