🎨STYLE: Home 컴포넌트 한국, 일본 background-image 변경

2-guys-Javascript · Nov 1, 2023 · 6e854d7 · 6e854d7
1 parent bde9a6d
commit 6e854d7
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/public/assets/Seoul.jpeg b/public/assets/Seoul.jpeg
diff --git a/public/assets/bukchon.jpg b/public/assets/bukchon.jpg
diff --git a/public/assets/sapporo_nika.jpeg b/public/assets/sapporo_nika.jpeg
diff --git a/public/assets/shirakawa.jpg b/public/assets/shirakawa.jpg
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
@@ -25,15 +25,15 @@
   box-sizing: border-box;
   max-width: 480px;
   width: 100vw;
-  background-image: url('/assets/Seoul.jpeg');
+  background-image: url('/assets/bukchon.jpg');
   background-position: center center;
+  background-size: cover;
   animation: krFadeIn 0.8s ease-out forwards;
   cursor: pointer;
-  /* flex로 가운데 정렬했습니다! */
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0.7;
+  opacity: 0.8;
 }
 
 .korea-tab-div:hover {
@@ -69,15 +69,16 @@
   box-sizing: border-box;
   max-width: 480px;
   width: 100vw;
-  background-image: url('/assets/sapporo_nika.jpeg');
+  background-image: url('/assets/shirakawa.jpg');
   background-position: center center;
+  background-size: cover;
   animation: jpFadeIn 0.8s ease-out forwards;
   cursor: pointer;
   transition: transform 0.2s ease;
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0.7;
+  opacity: 0.8;
 }
 
 .japan-tab-div:hover {