overflow

예제

넘치는 콘텐츠 표시하기

overflow-visible 유틸리티를 사용하면 엘리먼트 내부의 콘텐츠가 잘리지 않도록 할 수 있습니다.

Andrew AlfredTechnical advisor

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

엘리먼트의 경계를 넘어가는 콘텐츠는 모두 보이게 됩니다.

넘치는 콘텐츠 숨기기

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

Andrew AlfredTechnical advisor

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

필요한 경우 스크롤 추가

요소의 내용이 요소의 경계를 넘어갈 때 스크롤바를 추가하려면 overflow-auto 유틸리티를 사용하세요:

세로로 스크롤

Andrew Alfred기술 고문

Debra Houston분석가

Jane White마케팅 디렉터

Ray Flint기술 고문

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

overflow-scroll은 항상 스크롤바를 표시하지만, 이 유틸리티는 스크롤이 필요한 경우에만 스크롤바를 표시합니다.

필요할 때 가로 스크롤 사용하기

필요할 때 가로 스크롤을 허용하려면 overflow-x-auto 유틸리티를 사용하세요:

가로로 스크롤

Andrew

Emily

Whitney

David

Kristin

Sarah

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

필요한 경우 수직 스크롤 적용

overflow-y-auto 유틸리티를 사용해 필요한 경우 수직 스크롤을 허용할 수 있습니다:

수직 스크롤

Andrew Alfred기술 고문

Debra Houston분석가

Jane White마케팅 디렉터

Ray Flint기술 고문

<div class="h-32 overflow-y-auto ...">  <!-- ... --></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 유틸리티를 사용해 엘리먼트에 스크롤바를 추가할 수 있습니다:

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

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

반응형 디자인

접두사 an overflow 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.