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>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기