Overflow

​Basic usage

​넘치는 콘텐츠 표시하기

overflow-visible 유틸리티를 사용하면 엘리먼트 내부의 콘텐츠가 잘리지 않도록 할 수 있습니다. 이 경우 엘리먼트의 경계를 넘어가는 콘텐츠가 모두 보이게 됩니다.

Andrew Alfred Technical advisor

<div class="overflow-visible ..."></div>

​넘치는 콘텐츠 숨기기

overflow-hidden 유틸리티를 사용하면 엘리먼트의 경계를 벗어나는 콘텐츠를 잘라낼 수 있습니다.

Andrew Alfred Technical advisor

<div class="overflow-hidden ..."></div>

​필요한 경우 스크롤 추가

overflow-auto 유틸리티를 사용하면 엘리먼트의 내용이 해당 엘리먼트의 경계를 넘어갈 때 스크롤바를 추가할 수 있습니다. 항상 스크롤바를 표시하는 overflow-scroll과 달리, 이 유틸리티는 스크롤이 필요한 경우에만 스크롤바를 표시합니다.

Andrew Alfred 기술 고문

Debra Houston 분석가

Jane White 마케팅 디렉터

Ray Flint 기술 고문

<div class="overflow-auto ..."></div>

​필요한 경우 가로 스크롤 사용

필요한 경우 가로 스크롤을 허용하려면 overflow-x-auto 유틸리티를 사용하세요.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-auto ..."></div>

​필요에 따라 세로 스크롤 적용하기

overflow-y-auto 유틸리티를 사용해 필요할 때 세로 스크롤을 활성화할 수 있습니다.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-y-auto h-32 ..."></div>

​가로 스크롤 항상 활성화

overflow-x-scroll 유틸리티를 사용하면 가로 스크롤을 허용하고, 운영체제에서 항상 보이는 스크롤바를 비활성화하지 않는 한 스크롤바가 항상 표시됩니다.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-scroll ..."></div>

​수직 스크롤 항상 활성화

overflow-y-scroll 유틸리티를 사용하면 수직 스크롤을 활성화하고, 운영체제에서 항상 보이는 스크롤바를 비활성화하지 않는 한 스크롤바를 항상 표시합니다.

Andrew Alfred 기술 고문

Debra Houston 분석가

Jane White 마케팅 디렉터

Ray Flint 기술 고문

<div class="overflow-y-scroll ..."></div>

​모든 방향으로 스크롤하기

overflow-scroll 유틸리티를 사용해 엘리먼트에 스크롤바를 추가할 수 있습니다. overflow-auto는 스크롤바가 필요할 때만 보여주는 반면, 이 유틸리티는 항상 스크롤바를 표시합니다. 단, macOS와 같은 일부 운영체제에서는 이 설정과 관계없이 불필요한 스크롤바를 숨길 수 있습니다.

<div class="overflow-scroll ..."></div>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:overflow-scroll 를 사용하면 overflow-scroll 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<div class="overflow-auto hover:overflow-scroll">
  <!-- ... -->
</div>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:overflow-scroll를 사용하면 중간 화면 크기 이상에서만 overflow-scroll 유틸리티를 적용할 수 있습니다.

<div class="overflow-auto md:overflow-scroll">
  <!-- ... -->
</div>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.