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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_image_gallery
wiki:css:css_note:css_image_gallery

차이

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

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_image_gallery [2021/03/31 11:36]
emblim98 만듦 		wiki:css:css_note:css_image_gallery [2023/01/13 18:44] (현재)
줄 13: 줄 13:
 ====예제==== ====예제====
 <HTML> <HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <style>
 +        div.gallery {
 +            margin: 5px;
 +            border: 1px solid #ccc;
 +            float: left;
 +            width: 180px;
 +        }
 +        div.gallery:hover {
 +            border: 1px solid #777;
 +        }
 +        div.gallery img {
 +            width: 100%;
 +            height: auto;
 +        }
 +        div.desc {
 +            padding: 15px;
 +            text-align: center;
 +        }
 +    </style>
 +</head>
 +<body>
 +    <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 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 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 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>
 +</body>
 +</html>
 +</HTML>
 +\\
 +===Result===
 +{{:wiki:css:css_note:imagegallery.png?400|}}\\
 +\\
 +=====More Examples======
 +=====Responsive Image Gallery=====
 +데스크탑, 태블릿, 그리고 스마트폰에서 잘 보이는 반응형 이미지 갤러리를 만드는 CSS 미디어 쿼리(media queries)를 사용하는 방법\\
 +====예제====
 +<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
 +            700px, 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> </HTML>
 +\\
 +===Result====
 +{{:wiki:css:css_note:responsiveimagegallery.png?400|}}\\
  
 {{tag>오션 CSS Iamge Gallery}} {{tag>오션 CSS Iamge Gallery}}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_image_gallery.1617158166.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki