object-position

대체 엘리먼트의 콘텐츠가 컨테이너 내에서 어떻게 위치해야 하는지 제어하는 유틸리티입니다.

Class Styles

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

object-bottom

object-position: bottom;

object-center

object-position: center;

object-left

object-position: left;

object-left-bottom

object-position: left bottom;

object-left-top

object-position: left top;

object-right

object-position: right;

object-right-bottom

object-position: right bottom;

object-right-top

object-position: right top;

object-top

object-position: top;

object-(<custom-property>)

object-position: var(<custom-property>);

object-[<value>]

object-position: <value>;

예제

object-left와 object-right-bottom 같은 유틸리티를 사용하여 대체 엘리먼트의 콘텐츠가 컨테이너 내에서 어떻게 위치할지 지정할 수 있습니다:

예제 위에 마우스를 올려 전체 이미지를 확인하세요

object-[<value>] 구문을 사용하세요 object position를 완전히 커스텀한 값으로 설정하려면:

<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() 함수를 추가해 줍니다.

접두사 an object-position 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.