[부트스트랩] 레이아웃 #2 – Media Object
미디어 객체 (Media Object) 예제 (exaple) 미디어 객체는 이미지/비디오/오디오 같은 객체가 기존 객체를 둘러싸지 않는 콘텐츠와 나란히 배치되거나 복잡하고 반복적인 구성 요소를 만드는데 도움을 줍니다. 또한 flexbox 덕분에 두 가지 필수 클래스만으로 작업을 수행 할 수 있습니다. 콘텐츠를 둘러싼 .media 및 .media-body라는 두 가지 클래스 만 있으면됩니다. 아래는 단일 미디어 객체의 예입니다. 선택적 패딩 및 마진은 공간 유틸리티를 통해 제어 할 수 있습니다. < div class = "media" > < img class = "d-flex mr-3" src = "..." alt = "Generic placeholder image" > < div class = "media-body" > < h5 class = "mt-0" > Media heading </ h5 > Cras sit amet nibh libero, in gravida nulla . Nulla vel metus scelerisque ante sollicitudin . Cras purus odio, vestibulum in vulputate at, tempus viverra turpis . Fusce condimentum nunc ac nisi vulputate fringilla . Donec lacinia congue felis in faucibus . </ div > </ div > 중첩 (Nesting) 미디어 객체는 무한대로 중첩 될 수 있지만, 어느 시점에서 중단하는 것이 좋습니다. 상위 미디어 객체의 .media-body 내에 중첩 된 .media 를 배치합니다. < div clas...
