여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 미디어 객체
Bootstrap – Bootstrap 4 미디어 객체
5개월전 작성
6개월전 수정



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
밍구
공부 목적 블로그