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 유틸리티를 사용하여 요소를 간편하게 위치시킬 수 있습니다.