Tailwind CSS Overflow 속성 가이드

overflow 속성은 웹 페이지 요소의 콘텐츠가 요소의 크기를 벗어날 때 어떻게 처리될지를 결정하는 중요한 CSS 속성 중 하나입니다. Tailwind CSS는 overflow 유틸리티 클래스를 통해 간편하게 요소의 콘텐츠 처리 방식을 제어할 수 있습니다.

 

Tailwind CSS Overflow 유틸리티 클래스 종류

Tailwind CSS에서는 HTML 요소에 오버플로우 처리를 쉽게 적용할 수 있도록 다음과 같은 overflow 유틸리티 클래스를 제공합니다.

• overflow-auto: 콘텐츠가 요소를 벗어나면 스크롤 바를 자동으로 표시합니다.

<div class="overflow-auto h-32 w-32">
  매우 긴 콘텐츠가 여기에 있습니다. 스크롤을 통해 전체 내용을 볼 수 있습니다.
</div>

• overflow-hidden: 콘텐츠가 요소를 벗어나더라도 잘리게 하며, 스크롤 바는 표시되지 않습니다.

<div class="overflow-hidden h-32 w-32">
  이 요소의 콘텐츠는 크기를 초과할 경우 숨겨집니다.
</div>

• overflow-visible: 콘텐츠가 요소를 벗어나도 잘리지 않고 그대로 표시됩니다. 기본적으로 모든 요소는 overflow-visible을 사용합니다.

<div class="overflow-visible h-32 w-32">
  이 요소의 콘텐츠는 크기를 초과해도 그대로 표시됩니다.
</div>

• overflow-scroll: 콘텐츠가 요소를 벗어나면 스크롤 바를 항상 표시합니다.

<div class="overflow-scroll h-32 w-32">
  이 요소는 항상 스크롤 바를 표시합니다.
</div>

• overflow-x-*, overflow-y-*: 콘텐츠가 가로 또는 세로 방향으로 요소를 벗어날 때 각각 오버플로우를 제어할 수 있습니다.

<div class="overflow-x-auto overflow-y-hidden w-64 h-32">
  가로 방향 스크롤만 가능하게 설정된 요소입니다.
</div>

 

Overflow 유틸리티 사용 예시

1. 긴 텍스트 숨기기

<div class="overflow-hidden w-48 h-16 bg-gray-200">
  매우 긴 텍스트가 여기에 있습니다. 이 텍스트는 요소의 크기를 초과할 경우 잘립니다.
</div>

2. 스크롤 가능한 이미지 갤러리

<div class="overflow-x-scroll flex space-x-4 w-full">
  <img src="image1.jpg" class="w-32 h-32" />
  <img src="image2.jpg" class="w-32 h-32" />
  <img src="image3.jpg" class="w-32 h-32" />
</div>

Overflow 유틸리티와 함께 사용하는 속성들

• scrolling-touch, scrolling-auto: 스크롤 동작을 제어하는 데 사용됩니다. scrolling-touch는 모바일 장치에서 더 부드러운 터치 스크롤을 제공합니다.