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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Iamge Gallery ======
<WRAP left notice 80%>
  * description : CSS Iamge Gallery
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-31
</WRAP>
<WRAP clear></WRAP>
\\
CSS로 이미지 갤러리를 만들 수 있습니다.\\
=====Image Gallery=====
하기의 이미지 갤러리를 %%CSS%%로 만들었습니다.\\
====예제====
<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>
\\
===Result====
{{:wiki:css:css_note:responsiveimagegallery.png?400|}}\\

{{tag>오션 CSS Iamge Gallery}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
