차이

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

--- wiki:bootstrap:bootstrap_note:bs_images [2021/03/24 20:06]
emblim98 만듦
+++ wiki:bootstrap:bootstrap_note:bs_images [2023/01/13 18:44] (현재)
@@ 줄 48: / 줄 48: @@
 \\
 =====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

사용자 도구

사이트 도구

차이

문서 도구