Tailwind CSS Top, Right, Bottom, Left 포지셔닝 가이드

Tailwind의 top, right, bottom, left 유틸리티의 사용법과 부정값 적용, 논리적 속성 사용법을 살펴보겠습니다.

 

기본 사용법

Tailwind CSS는 위치 지정된 요소의 수평 또는 수직 위치를 설정할 수 있는 유틸리티를 제공합니다. 이러한 유틸리티는 요소를 컨테이너 내에서 정확하게 배치해야 할 때 유용합니다.

 

위치 지정된 요소 배치하기

요소를 배치하려면 top-*, right-*, bottom-*, left-*, inset-* 유틸리티를 사용할 수 있습니다.

 

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute top-0 right-0 h-16 w-16 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 left-0 h-16 w-16 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">09</div>
</div>

 

부정값 사용하기

요소를 반대 방향으로 이동해야 하는 경우가 있습니다. Tailwind CSS는 클래스 이름 앞에 대시(-)를 붙여 부정값을 사용할 수 있습니다.

<div class="relative h-32 w-32 ...">
  <div class="absolute h-14 w-14 -left-4 -top-4 ..."></div>
</div>

Tailwind CSS는 top, right, bottom, left 및 inset 유틸리티를 사용하여 요소를 간편하게 위치시킬 수 있습니다.