Overflow

Overflow (오버플로)

내용이 요소를 넘칠 때 넘침(overflow)을 빠르게 구성하는 축약 유틸리티에 대해 알아봅니다.

출처: 문서

본문

Overflow

네 가지 기본 값과 클래스로 overflow 프로퍼티를 즉석에서 조정합니다. 이 클래스들은 기본적으로 반응형이 아닙니다.

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

overflow-x

overflow-x 프로퍼티를 조정해 내용이 가로로 넘치는 방식을 바꿉니다.

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

overflow-y

overflow-y 프로퍼티를 조정해 내용이 세로로 넘치는 방식을 바꿉니다.

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

Sass 변수를 사용해 _variables.scss의 $overflows 변수를 변경하면 overflow 유틸리티를 사용자 정의할 수 있습니다.

CSS

Sass utilities API

overflow 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"overflow-x": (
  property: overflow-x,
  values: auto hidden visible scroll,
),
"overflow-y": (
  property: overflow-y,
  values: auto hidden visible scroll,
),

더 알아보기 (Learn more)