Tailwind CSS Overflow 속성 가이드
KUKJIN LEE • 3주 전 작성
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
는 모바일 장치에서 더 부드러운 터치 스크롤을 제공합니다.