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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Images======
<WRAP left notice 80%>
  * description : Bootstrap Images
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-24
</WRAP>
<WRAP clear></WRAP>
\\
=====Rounded Corners=====
''.img-rounded'' 클래스는 이미지에 둥근 모서리를 추가합니다.(IE8은 둥근 모서리를 지원하지 않습니다):\\
====예제====
<HTML>
<body>
    <div class="container">
        <h2>Rounded Corners</h2>
        <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
        <img src="cinqueterre.jpg" class="img-rounded" alt="Clnque Terre" width="304" height="236">
    </div>
</body>
</HTML>
\\
=====Circle=====
''.img-circle'' 클래스는 이미지를 원형으로 만듭니다.(IE8은 둥근 모서리를 지원하지 않습니다):\\
====예제====
<HTML>
<body>
    <div class="container">
        <h2>Circle</h2>
        <p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
        <img src="cinqueterre.jpg" class="img-circle" alt="Clnque Terre" width="304" height="236">
    </div>
</body>
</HTML>
\\
=====Thumbnail=====
''.img-thumbnail'' 클래스는 이미지를 썸네일(축소 이미지)로 만듭니다:\\
====예제====
<HTML>
<body>
    <div class="container">
        <h2>Thumbnail</h2>
        <p>The .img-thumbnail class creates a thumbnail of the image:</p>
        <img src="sanfran.jpg" class="img-thumbnail" alt="Clnque Terre" width="304" height="236">
    </div>
</body>
</HTML>
\\
=====Responsive Images=====
이미지의 크기는 다양합니다. 화면도 마찬가지입니다. 반응형 이미지는 자동으로 화면크기에 맞게 조정됩니다.\\
\\
''.img-responsive'' 클래스를 ''<img>'' 태그에 추가하여 반응형 이미지를 만듭니다. 그러면 이미지가 부모 요소에 맞게 조정됩니다.\\
\\
''.img-responsive'' 클래스는 이미지에 ''display: block'', ''max-width: 100%'', ''height: auto;'' 속성을 적용합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Image</h2>
        <p>The .img-responsive class makes the image scale nicely to the parent element 
        (resize the browser window to see the effect):</p>
        <img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">
    </div>

</body>
</HTML>
\\
=====Image Gallery=====
''.thumbnail'' 클래스와 함께 Bootstrap의 그리드 시스템을 사용하여 이미지 갤러리를 만들 수도 있습니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Image Gallery</h2>
        <p>The .thumbnail class can be used to display an image gallery.</p>
        <p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
        <p>Click on the image to enlarge them.</p>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="lights.jpg" target="_blank">
                        <img src="lights.jpg" alt="Lights" style="width:100%">
                        <div class="caption">
                            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="nature.jpg" target="_blank">
                        <img src="nature.jpg" alt="Nature" style="width:100%">
                        <div class="caption">
                            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="fjords.jpg" target="_blank">
                        <img src="fjords.jpg" alt="Fjords" style="width:100%">
                        <div class="caption">
                            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>
</HTML> 
\\
=====Responsive Embeds=====
또한 비디오 또는 슬라이드 쇼를 모든 장치에서 적절하게 화면 크기를 조정할 수 있습니다.\\
\\
클래스는 %%<iframe>, <embed>, <video> 및 <object>%% 요소에 직접 적용 할 수 있습니다.\\
\\
다음 예제는 ''%%.embed-responsive-item%%'' 클래스를 ''%%<iframe>%%'' 태그에 추가하여 반응 형 비디오를 만듭니다.\\ 
(비디오는 상위 요소에 맞게 조정됩니다). 포함하는 ''%%<div>%%''는 비디오의 종횡비를 정의합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Responsive Embed</h2>
        <p>
            Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio
        </p>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>
    </div>

</body>
</HTML>
\\
===종횡비 (aspect ratio, 가로 세로 비율)===
이미지의 종횡비는 이미지의 너비와 높이 사이의 비례 관계를 나타냅니다.\\
두 가지 일반적인 비디오 종횡비는 4 : 3 (20 세기의 범용 비디오 형식)과 16 : 9 (HD TV 및 유럽 디지털 TV의 범용)입니다.\\
\\
두 가지 종횡비 클래스 중에서 선택할 수 있습니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Responsive Embed</h2>
        <p>Create a responsive video and scale it nicely to the parent element.</p>

        <h2>Aspect ratio 4:3</h2>
        <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>

        <h2>Aspect ratio 16:9</h2>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        </div>
    </div>

</body>
</HTML>



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

사용자 도구

사이트 도구

문서 도구
