Update index.html

index.html

@@ -41,23 +41,55 @@
         }
 
         .slide {
-            width: 70vw;
-            height: 60vh;
-            margin: 0 15px;
-            background-color: #000; /* Tailwind gray-800 */
-            color: #FFFFFF;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            border-radius: 16px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
+    width: 70vw;
+    height: 60vh;
+    margin: 0 15px;
+    background-color: #000; /* Tailwind gray-800 */
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden; /* 추가된 속성 */
+}
 
-        .slide img {
-            max-width: 200px; /* Placeholder image width */
-            max-height: 200px; /* Placeholder image height */
-        }
+.slide img {
+    max-width: 100%; /* 수정된 속성 */
+    max-height: 30vh; /* 수정된 속성, 화면 높이에 맞춰 조정 */
+}
+
+/* 반응형 디자인을 위한 미디어 쿼리 */
+@media (max-height: 500px) {
+    .slide {
+        height: 50vh;
+    }
+
+    .slide img {
+        max-height: 20vh;
+    }
+
+    .slide button {
+        padding: 8px 16px; /* 버튼 크기 조정 */
+        font-size: 0.8em; /* 텍스트 크기 조정 */
+    }
+}
+
+@media (max-height: 400px) {
+    .slide {
+        height: 40vh;
+    }
+
+    .slide img {
+        max-height: 15vh;
+    }
+
+    .slide button {
+        padding: 6px 12px;
+        font-size: 0.7em;
+    }
+}
 
         .slide button {
             background-color: #7C3AED; /* Tailwind purple-600 */