사진첩
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
+
+
+
diff --git a/Week1/Homework/styles.css b/Week1/Homework/styles.css
index 905e06e..93e4eb8 100644
--- a/Week1/Homework/styles.css
+++ b/Week1/Homework/styles.css
@@ -65,6 +65,14 @@ section {
white-space: nowrap;
}
+.nav-item:first-child .nav-link {
+ border-radius: 30px 30px 10px 10px;
+}
+
+.nav-item:last-child .nav-link {
+ border-radius: 10px 10px 30px 30px;
+}
+
.nav-link:hover {
background-color: #d4f1f4;
color: #232323;
@@ -532,19 +540,36 @@ section {
color: #232323;
}
+/* 갤러리 래퍼 (무한 루프용) */
+.snap-gallery-wrapper {
+ overflow: hidden;
+ background-color: #f8f9fa;
+ padding: 50px;
+ border-radius: 30px;
+ position: relative;
+}
+
/* 스크롤 갤러리 */
.snap-gallery {
display: flex;
gap: 20px;
- overflow-x: auto;
- background-color: #f8f9fa;
- padding: 50px;
- border-radius: 30px;
+ width: fit-content;
+ animation: auto-scroll 10s linear infinite;
}
-/* 스크롤바 숨기기 */
-.snap-gallery::-webkit-scrollbar {
- display: none;
+/* 호버 시 애니메이션 일시정지 */
+.snap-gallery-wrapper:hover .snap-gallery {
+ animation-play-state: paused;
+}
+
+/* 자동 스크롤 애니메이션 */
+@keyframes auto-scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
}
/* 갤러리 아이템 */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+