Tailwind CSS로 이미지와 객체의 위치 설정하기

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을 사용합니다.

 

결론

간단한 클래스 변경만으로 이미지를 원하는 부분을 쉽게 표시할 수 있습니다.