overflow 속성(visible, hidden, scroll, auto)

overflow란?

주어진 공간이 모자라서 넘치는 컨텐츠를 어떻게 보여줄지 결정할 때 사용

---

visible

: 기본값

: 컨텐츠가 주어진 공간보다 넘칠 때 밖으로 밀어내며 컨텐츠를 다 보여줌

 

hidden

: 컨텐츠가 주어진 공간보다 넘칠 때 공간 밖으로 삐져 나가는 컨텐츠를 숨겨버릴 수 있음

 

scroll

: 주어진 공간보다 넘치는 콘텐츠를 볼 수 있도록 스크롤바가 생기는 기능

: auto와 달리 항상 스크롤바가 있음

: 주어진 공간보다 많아서 숨겨진 콘텐츠를 스크롤바를 이용하여 볼 수 있음

: scroll 대신 overflow-x overflow-y 속성을 사용하여 가로 세로 스크롤을 선택적으로 적용할 수 있음

 

auto

: 컨텐츠의 양이 변함에 따라 스크롤바를 생기게 할지 숨기게 할지 자동으로 결정해줌

: 컨텐츠의 크기가 주어진 공간을 넘어가는 경우에만 자동으로 스크롤바가 생김

: 컨텐츠의 크기가 주어진 공간을 넘어가지 않은 경우 스크롤바가 없어짐

---

참고

https://www.daleseo.com/css-overflow/