차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_image_gallery [2021/03/31 12:18]
emblim98
+++ wiki:css:css_note:css_image_gallery [2023/01/13 18:44] (현재)
@@ 줄 73: / 줄 73: @@
 ====예제====
 <HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        div.gallery {
+            border: 1px solid #ccc;
+        }
+        div.gallery:hover {
+            border: 1px solid #777;
+        }
+        div.gallery img {
+            width: 100%;
+            height: auto;
+        }
+        div.desc {
+            padding: 15px;
+            text-align: center;
+        }
+        * {
+            box-sizing: border-box;
+        }
+        .responsive {
+            padding: 0 6px;
+            float: left;
+            width: 24.99999%;
+        }
+        @media only screen and (max-width: 700px) {
+            .responsive {
+                width: 49.99999%;
+                margin: 6px 0;
+            }
+        }
+        @media only screen and (max-width: 500px) {
+            .responsive {
+                width: 100%;
+            }
+        }
+        .clearfix:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+    </style>
+</head>
+<body>
+    <h2>Responsive Image Gallery</h2>
+    <h4>Resize the browser window to see the effect</h4>
+    <div class="responsive">
+        <div class="gallery">
+            <a target="_blank" href="img_5terre.jpg">
+                <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
+            </a>
+            <div class="desc">Add a description of the image here</div>
+        </div>
+    </div>
+    <div class="responsive">
+        <div class="gallery">
+            <a target="_blank" href="img_forest.jpg">
+                <img src="img_forest.jpg" alt="Forest" width="600" height="400">
+            </a>
+            <div class="desc">Add a description of the image here</div>
+        </div>
+    </div>
+    <div class="responsive">
+        <div class="gallery">
+            <a target="_blank" href="img_lights.jpg">
+                <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
+            </a>
+            <div class="desc">Add a description of the image here</div>
+        </div>
+    </div>
+    <div class="responsive">
+        <div class="gallery">
+            <a target="_blank" href="img_mountains.jpg">
+                <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
+            </a>
+            <div class="desc">Add a description of the image here</div>
+        </div>
+    </div>
+    <div class="clearfix"></div>
+    <div style="padding:6px;">
+        <p>
+            This example use media queries to re-arrange the images on different screen sizes: for screens largers than 700px wide, it will show four images side by side, for screens smaller than
+px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).
+        </p>
+        <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
+    </div>
+</body>
+</html>
 </HTML>
+\\
+===Result====
+{{:wiki:css:css_note:responsiveimagegallery.png?400|}}\\
 {{tag>오션 CSS Iamge Gallery}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구