test

DO-SOPT-WEB · Nov 7, 2023 · 46178f2 · 46178f2
1 parent 2fa53aa
commit 46178f2
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 45 deletions.
diff --git a/1주차/3.웨비의 사진관/index.html b/1주차/3.웨비의 사진관/index.html
@@ -8,38 +8,41 @@
   </head>
   <body>
     <header class="main-title" id="head">다현이의 유럽 뿌수기🇪🇺✈️</header>
-    <div class="scroll-left"><</div>
+
     <section class="img-preview">
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg"
-        alt="숙소에서 본 포르투갈"
-      />
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg"
-        alt="관광객들 사진 찍어주는 다현이"
-      />
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg"
-        alt="낭뜨 아경"
-      />
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg"
-        alt="포르투갈 공원에서 에그타르트"
-      />
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg"
-        alt="날씨가 너무 좋았던 포르투"
-      />
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg"
-        alt="낭뜨 마지막 날 밤"
-      />
-      <img
-        src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg"
-        alt="화창한 날 리스본 공원에서"
-      />
+      <div class="scroll-left"><</div>
+      <ul>
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg"
+          alt="숙소에서 본 포르투갈"
+        />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg"
+          alt="관광객들 사진 찍어주는 다현이"
+        />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg"
+          alt="낭뜨 아경"
+        />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg"
+          alt="포르투갈 공원에서 에그타르트"
+        />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg"
+          alt="날씨가 너무 좋았던 포르투"
+        />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg"
+          alt="낭뜨 마지막 날 밤"
+        />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg"
+          alt="화창한 날 리스본 공원에서"
+        />
+      </ul>
+      <div class="scroll-right">></div>
     </section>
-    <div class="scroll-right">></div>
     <nav class="nav">
       <div>📸✌️ 클릭하면 이동해요! ✌️ 📸</div>
       <ul>

diff --git a/1주차/3.웨비의 사진관/style.css b/1주차/3.웨비의 사진관/style.css
@@ -5,6 +5,7 @@ html {
 body {
   font-weight: bold;
   background-color: #ecffdc;
+  margin: 0;
 }
 
 a {
@@ -43,26 +44,28 @@ li {
   background-color: mediumaquamarine;
   height: 3rem;
   position: sticky;
+  width: 100%;
   top: 0; /* 화면 상단에 고정 */
 }
 
 .img-preview {
   display: flex;
   overflow-x: auto; /*가로 스크롤바*/
-  margin: 0 1rem;
+  /* width: 90%; */
+  margin: 0 2rem;
   height: 28rem;
   align-items: center;
   position: relative;
 }
 
-::-webkit-scrollbar {
+/* ::-webkit-scrollbar {
   width: 1rem;
 }
 
 .img-preview::-webkit-scrollbar-thumb {
   background-color: mediumaquamarine;
   border-radius: 3rem;
-}
+} */
 
 .img-preview img {
   width: 20rem;
@@ -71,6 +74,10 @@ li {
   margin-right: 0.5rem;
 }
 
+/* .img-preview ul {
+  width: 90%;
+} */
+
 .nav {
   display: flex;
   justify-content: center;
@@ -108,8 +115,10 @@ li {
   position: absolute;
   top: 50%;
   left: 50%;
+  transform: translate(-50%, -50%);
   width: 100%;
-  transform: translate(-50%, -50%); /* 텍스트를 가운데로 이동 */
+  border: 1px solid red;
+  text-align: center;
   color: #ffffff;
 }
 
@@ -118,7 +127,7 @@ li {
   white-space: normal;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   word-break: keep-all;
 }
@@ -134,10 +143,9 @@ li {
 .img-portugal {
   display: flex;
   flex-wrap: wrap;
-  flex-grow: 1;
+  width: 70%;
   text-align: center;
   justify-content: center;
-  padding: 1rem 15rem;
   gap: 0.5rem;
   margin: 1rem auto;
 }
@@ -151,8 +159,8 @@ li {
 }
 
 .img-portugal-main img {
-  width: 29rem; /* 이미지가 부모의 100% 가로 너비를 사용하도록 설정 */
-  height: 41rem; /* 이미지의 세로 비율을 유지하도록 설정 */
+  width: 100%;
+  height: 100%;
   flex-grow: 1;
   object-fit: cover;
 }
@@ -163,12 +171,12 @@ li {
   flex-grow: 1;
   gap: 0.5rem;
   justify-content: center;
-  width: 25rem;
+  width: 29rem;
   padding-bottom: 0;
 }
 
 .img-portugal-sub div {
-  width: 12rem; /* 이미지가 부모의 100% 가로 너비를 사용하도록 설정 */
+  width: 12rem;
   height: 20rem;
   flex-grow: 1;
   margin: 0 auto;
@@ -246,19 +254,23 @@ footer {
 }
 
 .scroll-left {
-  position: absolute;
-  top: 35%;
+  position: sticky;
+  display: flex;
+  align-items: center;
   left: 0;
+  height: 28rem;
   font-size: 3rem;
   font-weight: bold;
   color: mediumaquamarine;
   cursor: pointer;
 }
 
 .scroll-right {
-  position: absolute;
-  top: 35%;
+  position: sticky;
+  display: flex;
+  align-items: center;
   right: 0;
+  height: 28rem;
   font-size: 3rem;
   font-weight: bold;
   color: mediumaquamarine;