• Q&A
  • 회원가입
  • 로그인

[basic] BS4 - Media Object (BS미디어객체) - 썸네일형, 요약형

122  
목차
  1. Media Object 소개
  2. Media Object 구문 - 왼쪽 배치
  3. Media Object 구문 - 중첩 배치
  4. Media Object 구문 - 오른쪽 배치
  5. 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-->
            </div><!--media-->
        </div><!--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 클래스 추가.



찾아주셔서 감사합니다. Since 2012