English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 장에서는 Bootstrap의 멀티미디어 객체(이미지, 비디오, 오디오 등)를 설명하겠습니다. 미디어 객체 스타일은 다양한 유형의 컴포넌트(예: 블로그 댓글)를 생성하는 데 사용될 수 있습니다. 우리는 컴포넌트에서 텍스트와 이미지를 혼합하여 정렬할 수 있습니다. 이미지는 좌측 정렬이나 우측 정렬이 될 수 있습니다. 미디어 객체는 텍스트와의 혼합을 더 적은 코드로 구현할 수 있습니다.
다음에 예제를 보여드리겠습니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 기본적인 미디어 객체/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>멀티미디어 객체</h2> <p>"media-left" 클래스를 사용하여 멀티미디어 객체를 좌측 정렬합니다. 텍스트 내용은 이미지 다음에 배치되어야 합니다.</p> <p>"media-right" 클래스는 멀티미디어 객체를 우측 정렬하는 데 사용됩니다.</p><br> <!-- 좌측 정렬 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">좌측 정렬</h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> <hr> <!-- 우측 정렬 --> <div class="media"> <div class="media-body"> <h4 class="media-heading">우측 정렬</h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> <div class="media-right"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> </div> </div> </body> </html>테스트를 보세요.‹/›
결과는 다음과 같습니다：
HTML <div> 요소에 .media 클래스를 추가하여 멀티미디어 객체를 생성합니다.
사용 .media-left 클래스는 멀티미디어 객체(이미지)가 왼쪽 정렬되도록 하며, 마찬가지로 .media-right 클래스가 오른쪽 정렬을 구현합니다.
텍스트 내용을 div에 넣고, 이미지가 왼쪽 정렬되면 이전에, 오른쪽 정렬되면 이후에 넣을 수 있습니다.
또한, .media-heading 클래스를 사용하여 제목을 설정할 수 있습니다.
다음을 통해 미디어 객체 목록 .media-list의 예제：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 멀티미디어 객체</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>멀티미디어 객체</h2> <p>멀티미디어 객체는 헤더, 중앙, 바닥 정렬을 설정할 수 있으며, 대응하는 클래스는 "media-top"、 "media-middle" 、 "media-bottom":</p><br> <div class="media"> <div class="media-left media-top"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">위에 배치</h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> <hr> <div class="media"> <div class="media-left media-middle"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">중앙에 배치</h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> <hr> <div class="media"> <div class="media-left media-bottom"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">바닥에 배치</h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> </div> </body> </html>테스트를 보세요.‹/›
결과는 다음과 같습니다：
한 멀티미디어 객체 안에도 여러 멀티미디어 객체를 포함할 수 있습니다：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 멀티미디어 객체</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>내부 멀티미디어 객체</h2> <p>멀티미디어 객체 안에 다시 멀티미디어 객체를 삽입할 수 있습니다:</p><br> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>Posted on February 19, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <!-- 내부 멀티미디어 객체 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>Posted on February 19, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <!-- 내부 멀티미디어 객체 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>Posted on February 19, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> </div> </div> </div> </div> </div> </body> </html>테스트를 보세요.‹/›
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 멀티미디어 객체</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>내부 멀티미디어 객체</h2> <p>멀티미디어 객체 안에 다시 멀티미디어 객체를 삽입할 수 있습니다:</p><br> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>Posted on February 19, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <!-- 내부 멀티미디어 객체 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>Posted on February 20,, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> <!-- 내부 멀티미디어 객체 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>Posted on February 21, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> </div> <!-- 내부 멀티미디어 객체 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-4 <small><i>Posted on February 20,, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> </div> </div> <!-- 내부 멀티미디어 객체 --> <div class="media"> <div class="media-left"> <img src="https://ko.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-5 <small><i>Posted on February 19, 2016</i></small></h4> <p>이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다. 이것은 몇 가지 예제 텍스트입니다.</p> </div> </div> </div> </div> </body> </html>테스트를 보세요.‹/›