목차
Media Object 소개 Media Object 구문 - 왼쪽 배치 Media Object 구문 - 중첩 배치 Media Object 구문 - 오른쪽 배치 Media Object 구문 - (상단/중단/하단) 배치
Media Object 소개
BS는 미디어 객체 (예 : 이미지 또는 비디오)를 내용과 함께 쉽게 정렬할 수있는 방법 제공.
(미디어 객체는 종종 블로그 댓글, 트윗 등을 표시하는 데 사용.)
※ .container 클래스 가진 요소 안에 .media, media-body 클래스 가진 요소 추가.
.media {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
}
.media-body {
-ms-flex: 1;
flex: 1;
}
Media Object 구문 - 왼쪽 배치
<div class="container mt-3">
<div class="media border p-3">
<img src="sinbi.png" alt="sinbi" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body ">
<h4>sinbi <small><i>2020-01-28</i></small></h4>
<p>새해 복 많이 받으세요.</p>
</div>
</div>
</div>
Media Object 구문 - 중첩 배치
<div class="container mt-3">
<div class="media border p-3">
<img src="sinbi.png" alt="sinbi" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body ">
<h4>sinbi <small><i>2020-01-28</i></small></h4>
<p>새해 복 많이 받으세요.</p>
<p>홈짱닷컴 (Homzzang.com) 너무 좋아요.</p>
<div class="media p-3">
<img src="hz.png" alt="hz" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body ">
<h4>hz <small><i>2020-01-28</i></small></h4>
<p>찾아주셔서 감사합니다.</p>
<p>홈짱닷컴 (Homzzang.com) 자주 찾아주세요.</p>
</div><!--media-body--> <!--media--> <!--media-body-->
</div><!--media-->
</div><!--.container-->
Media Object 구문 - 오른쪽 배치
<div class="container mt-3">
<div class="media border p-3">
<div class="media-body ">
<h4>sinbi <small><i>2020-01-20</i></small></h4>
<p>새해 복 많이 받으세요.</p>
</div>
<img src="sinbi.png" alt="sinbi" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
</div>
※ img를 .media-body 뒤에 배치.
Media Object 구문 - (상단/중단/하단) 배치
<div class="container mt-3">
<!-- Media top -->
<div class="media ">
<img src="hz.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body ">
<h4>Media Top</h4>
<p>코딩언어 강의</p>
<p>그누보드 강의</p>
<p>서버관리 강의</p>
</div>
</div>
<!-- Media middle -->
<div class="media mt-3">
<img src="hz.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body ">
<h4>Media Middle</h4>
<p>코딩언어 강의</p>
<p>그누보드 강의</p>
<p>서버관리 강의</p>
</div>
</div>
<!-- Media bottom -->
<div class="media mt-3">
<img src="hz.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body ">
<h4>Media Bottom</h4>
<p>코딩언어 강의</p>
<p>그누보드 강의</p>
<p>서버관리 강의</p>
</div>
</div>
</div>
※ CSS 코드
.align-self-start {
-ms-flex-item-align: start!important;
align-self: flex-start!important;
}
.align-self-center {
-ms-flex-item-align: center!important;
align-self: center!important;
}
.align-self-end {
-ms-flex-item-align: end!important;
align-self: flex-end!important;
}
※ img 태그에 .align-self-start, .align-self-center, .align-self-end 클래스 추가.
