미디어 객체

미디어 객체는 객체지향 CSS(OOCSS)의 전형적인 결과물입니다. 그 단순함과 활용성은 많은 CSS 개발자(저를 포함해서)를 OOCSS 방법론으로 전향시켰습니다.

하지만 대부분의 CSS 레이아웃 테크닉과 흡사하게도, 미디어 객체는 그 목표를 달성하기 위해서 트릭이나 핵(hack)에 의존해야 합니다.

미디어 객체의 내부는 블록 서식 문맥을 생성하거나 왼쪽 마진/패딩을 이미지의 폭과 똑같이 줌으로써, 이미지 때문에 텍스트가 덮여버리는 일을 방지해야합니다. 또한 미디어 객체는 overflow:hidden 혹은 가상 요소(pseudo-element)를 사용하여 clearfix하는 것이 필요합니다.

Flexbox와 함께라면 이런 문제들은 모두 해결됩니다. 게다가, Flexbox를 사용하면 미디어 객체의 이미지를 원하는 대로 정렬시킬 수 있습니다. 또한, 코드의 순서를 변경하지 않아도 이미지를 우측으로 쉽게 정렬시킬 수도 있습니다.

기본 예제

표준 미디어 객체

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.

표준 미디어 객체

Donec imperdiet sem leo, id rutrum risus aliquam vitae. Cras tincidunt porta mauris, vel feugiat mauris accumsan eget.

뒤집힌 미디어 객체

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut. Integer gravida pharetra cursus. Nunc in suscipit nunc.

이미지가 아닌 경우

중첩된 미디어 객체

미디어 객체 제목

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.

Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie.

Vestibulum ac turpis non lacus dignissim dignissim eu sed dui. Proin a ligula sit amet massa malesuada mattis eu a ante. Nunc porttitor sed quam quis sollicitudin. Vestibulum ac turpis non lacus dignissim dignissim eu sed dui.

Rutrum risus aliquam vitae.

미디어 객체 제목

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut.

Donec imperdiet sem leo, id rutrum risus aliquam vitae.

Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie. Aliquam vitae pharetra dolor. Nullam non mattis nunc.

HTML

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">…</p>
</div>

CSS

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

이 데모에서 미디어 객체 컴포넌트를 위해 사용된 모든 소스 코드는 GitHub에서 보실 수 있습니다.