[CSS] overflow 속성 - 넘치는 컨텐트 요소 제어하기

overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐트를 보여줄 때 사용된다.

 

일반적으로 overflow 속성이 visible 설정(디폴트값)된 엘리먼트는 주어진 공간보다 담고있는 컨텐트가 더 큰 경우, 컨텐트를 밖으로 밀어내버리는 특성이 있다. 

한 개의 엘리먼트를 배치하는 경우라면 간과하기 쉽지만,

overflow 속성이 visible된 엘리먼트 두 개를 연속 위아래로 배치하는 경우라면 문제가 생긴다!

첫번째 엘리먼트의 빠져나온 컨텐트 부분이 두번째 엘리먼트와 겹치게 되기 때문.

위와 같은 모습으로..

 (1) overflow: hidden 

이때 overflow 속성에 hidden 값을 주면 삐져나온 컨텐트를 숨길 수 있다. 

이름 그대로 내용을 숨긴다는 의미 !

위 모습처럼 긴 텍스트의 뒷 부분이 싹뚝 아예 잘려나가는 것을 볼 수 있다.

때문에 overflow속성을 hidden으로 줄 경우에는, 의도치 않게 컨텐트가 누락될 수 있기 때문에 많은 주의가 필요하다.

 

 (2) overflow: scroll 

컨텐트가 제한된 공간을 넘어가서도 안되고, 누락되어도 안된다면 스크롤 기능을 첨가할 수도 있다.

overflow 속성을 scroll로 줄 경우에는, 아래 같은 스크롤바가 생겨나서 컨텐트를 끝까지 볼 수 있다.

scroll 값을 주면 위 처럼 가로 세로 모두에 스크롤바가 생겨나게 되는데,

만약 가로 or 세로 부분만 스크롤바를 만들고 싶다면 overflow-x 혹은 overflow-y 속성을 사용할 수도 있다.

대부분의 경우 세로 스크롤을 하므로 overflow-y 속성을 주게되면 아래 같이 나타난다.

+ Tip )

세로 스크롤은 overflow-y: scroll로 나타낸다지만

제한된 크기를 넘어가는 컨텐트에 가로스크롤을 적용하고 싶다면 어떡해야할까?

이 경우 white-space: nowrap 하게 되면 텍스트를 줄바꿈되지 않도록 하면서, 가로로 스크롤바가 생긴다.

 (3) overflow: auto 

컨텐트의 양이 가변적이어서 스크롤바로 보여줘야 할지 결정하기 어려운 경우는

overflow 속성으로 auto를 주면 된다.

이 경우, 컨텐트의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바가 생기게 된다.

auto 속성값을 적용한 크기별 요소 비교

첫 번째 엘리먼트의 경우 내포한 컨텐트가 길어서 스크롤되도록 자동으로 스크롤바가 생겼는데

두 번째 엘리먼트는 컨텐트 크기가 짧기 때문에 스크롤바가 생기지 않는 것을 살펴볼 수 있다.

 

---

*학습에 도움되었던 자료 출처

https://velog.io/@pm1100tm/HTMLCSS-overflow-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%AC

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