Tailwind CSS를 사용하여 이미지와 객체의 위치를 설정하는 방법을 설명드리겠습니다.
Object Position이란?
object-position 속성은 이미지, 비디오 또는 다른 미디어 요소의 위치를 조정하는 데 사용됩니다. 이를 통해 미디어 요소가 컨테이너 내에서 어떻게 배치될지를 지정할 수 있습니다.
기본 설정 클래스
Tailwind CSS는 미디어 요소의 위치를 설정하기 위해 다음과 같은 유틸리티 클래스를 제공합니다:
-
object-bottom -
object-center -
object-left -
object-left-bottom -
object-left-top -
object-right -
object-right-bottom -
object-right-top -
object-top
이 클래스들은 미디어 요소가 컨테이너 안에서 어떻게 배치될지를 정의합니다.
<img class="object-none object-left-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-center bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-bottom bg-yellow-300 w-24 h-24 ..." src="...">Tailwind에서 제공하는 예시입니다. 쉽게 말해 object-center를 사용하게 될 경우, 이미지의 정 중앙을 보여주게 됩니다. 이미지를 정 중앙에 배치하는 이유는 다양하지만, 대부분 제한된 영역에서 특정 부분만을 보여주기 위해 object-position을 사용합니다.
결론
간단한 클래스 변경만으로 이미지를 원하는 부분을 쉽게 표시할 수 있습니다.