
Bootstrap 4 미디어 객체
Bootstrap 4는 미디어 객체(예: 이미지 또는 비디오)를 콘텐츠와 함께 정렬하는 쉬운 방법을 제공한다.
미디어 객체는 블로그 댓글, 트윗 등을 표시하는 데 자주 사용된다.
기본 미디어 객체
미디어 객체를 생성하려면 .media 클래스를 컨테이너 요소에 추가하고 .media-body 클래스가 있는 하위 컨테이너 내에 미디어 콘텐츠를 배치한다.
간격 유틸리티를 사용하여 필요에 따라 패딩과 여백을 추가한다.
예제
<div class="media border p-3"> <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum...</p> </div> </div>
기본 예시
예제 보기중첩된 미디어 객체
미디어 객체는 중첩될 수도 있다.
.media 미디어 객체를 중첩하려면 .media-body 컨테이너 안에 새 컨테이너를 배치한다.
예제
<div class="media border p-3"> <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum...</p> <div class="media p-3"> <img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;"> <div class="media-body"> <h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4> <p>Lorem ipsum...</p> </div> </div> </div> </div>
기본 예시
예제 보기미디어 이미지 오른쪽 정렬
미디어 이미지를 오른쪽 정렬하려면 .media-body 컨테이너 뒤에 이미지를 추가한다.
예제
<div class="media border p-3"> <div class="media-body"> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum...</p> </div> <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div>
기본 예시
예제 보기상단, 중간 또는 하단 정렬
플렉스 유틸리티인 .align-self-* 클래스를 사용하여 미디어 객체를 상단, 중간 또는 하단에 배치한다.
예제
<!-- Media top --> <div class="media"> <img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>Media Top</h4> <p>Lorem ipsum...</p> </div> </div> <!-- Media middle --> <div class="media"> <img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>Media Middle</h4> <p>Lorem ipsum...</p> </div> </div> <!-- Media bottom --> <div class="media"> <img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>Media Bottom</h4> <p>Lorem ipsum...</p> </div> </div>
기본 예시
예제 보기참고
W3C School - Bootstrap – Bootstrap 4 Media Objects