객체 위치

객체 위치 (Object Position)

이미지나 비디오 같은 replaced 요소의 콘텐츠가 컨테이너 안에서 어디에 위치할지 정하는 유틸리티예요. CSS의 object-position 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

  • object-top-left — object-position: top left;
  • object-top — object-position: top;
  • object-top-right — object-position: top right;
  • object-left — object-position: left;
  • object-center — object-position: center;
  • object-right — object-position: right;
  • object-bottom-left — object-position: bottom left;
  • object-bottom — object-position: bottom;
  • object-bottom-right — object-position: bottom right;
  • object-(<custom-property>) — object-position: var(<custom-property>);
  • object-[<value>] — object-position: <value>;

기본 예제

object-left나 object-bottom-right 같은 유틸리티를 쓰면 replaced 요소의 콘텐츠가 컨테이너 안에서 어떻게 위치할지 정할 수 있어요.

<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-top ..." src="/img/mountains.jpg" />
<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-center ..." src="/img/mountains.jpg" />
<img class="size-24 object-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />

예시 위에 마우스를 올리면 원본 이미지를 볼 수 있어요.

커스텀 값 사용하기

object-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 객체 위치를 정할 수 있어요.

<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />

CSS 변수를 쓸 때는 object-(<custom-property>) 문법도 사용할 수 있어요.

<img class="object-(--my-object) ..." src="/img/mountains.jpg" />

이건 object-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

object-position 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<img class="object-center md:object-top ..." src="/img/mountains.jpg" />

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

더 알아보기 (Learn more)