넘침
넘침 (Overflow)
요소의 콘텐츠가 컨테이너 경계를 넘칠 때 어떻게 처리할지 정하는 유틸리티예요. CSS의 overflow 속성을 조절해서 잘라내거나, 스크롤바를 추가하거나, 그대로 보여줄 수 있어요.
출처: 문서
본문
클래스와 스타일
overflow-auto—overflow: auto;overflow-hidden—overflow: hidden;overflow-clip—overflow: clip;overflow-visible—overflow: visible;overflow-scroll—overflow: scroll;overflow-x-auto—overflow-x: auto;overflow-y-auto—overflow-y: auto;overflow-x-hidden—overflow-x: hidden;overflow-y-hidden—overflow-y: hidden;overflow-x-clip—overflow-x: clip;overflow-y-clip—overflow-y: clip;overflow-x-visible—overflow-x: visible;overflow-y-visible—overflow-y: visible;overflow-x-scroll—overflow-x: scroll;overflow-y-scroll—overflow-y: scroll;
넘치는 콘텐츠 보여주기
overflow-visible 유틸리티를 쓰면 요소 안의 콘텐츠가 잘리지 않게 해요.
<div class="overflow-visible ...">
<!-- ... -->
</div>
요소 경계를 넘치는 콘텐츠는 그대로 보이게 된다는 점을 기억하세요.
넘치는 콘텐츠 숨기기
overflow-hidden 유틸리티를 쓰면 요소의 경계를 넘치는 콘텐츠를 잘라내요.
<div class="overflow-hidden ...">
<!-- ... -->
</div>
필요할 때 스크롤
overflow-auto 유틸리티를 쓰면 콘텐츠가 요소의 경계를 넘칠 때 스크롤바를 추가해요.
<div class="overflow-auto ...">
<!-- ... -->
</div>
항상 스크롤바를 보여주는 overflow-scroll과 달리, 이 유틸리티는 스크롤이 필요할 때만 스크롤바를 보여줘요.
필요할 때 가로 스크롤
overflow-x-auto 유틸리티를 쓰면 필요할 때 가로 스크롤을 허용해요.
<div class="overflow-x-auto ...">
<!-- ... -->
</div>
필요할 때 세로 스크롤
overflow-y-auto 유틸리티를 쓰면 필요할 때 세로 스크롤을 허용해요.
<div class="h-32 overflow-y-auto ...">
<!-- ... -->
</div>
항상 가로 스크롤
overflow-x-scroll 유틸리티를 쓰면 가로 스크롤을 허용하고, OS가 상시 표시 스크롤바를 꺼놓지 않는 한 스크롤바를 항상 보여줘요.
<div class="overflow-x-scroll ...">
<!-- ... -->
</div>
항상 세로 스크롤
overflow-y-scroll 유틸리티를 쓰면 세로 스크롤을 허용하고, OS가 상시 표시 스크롤바를 꺼놓지 않는 한 스크롤바를 항상 보여줘요.
<div class="overflow-y-scroll ...">
<!-- ... -->
</div>
모든 방향으로 스크롤
overflow-scroll 유틸리티를 쓰면 요소에 스크롤바를 추가해요.
<div class="overflow-scroll ...">
<!-- ... -->
</div>
필요할 때만 스크롤바를 보여주는 overflow-auto와 달리 이 유틸리티는 항상 스크롤바를 보여줘요. 다만 macOS 같은 일부 운영체제는 이 설정과 무관하게 불필요한 스크롤바를 숨기기도 해요.
반응형 디자인
overflow 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.
<div class="overflow-auto md:overflow-scroll ...">
<!-- ... -->
</div>
변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.