CSS property overflow 알아보기 & 실습

overflow property란?

컨텐츠를 담고 있는 부모의 element가 컨텐츠를 다 담지 못할 때 어떻게 표현할 것인가를 지정해주는 옵션

---

value의 종류

visible (default)

초과된 컨텐츠는 클리핑(마스킹)되지 않고 부모 element 밖으로 나와 볼 수 있는 상태.

부모는 스크롤되는 element가 아님.

 

hidden

초과된 컨텐츠가 부모의 컨테이너 박스에 클리핑(마스킹)되며 가려져서 보여지지 않는 상태.

스크롤되지 않으며 가려져 보여지지 않는 것이지 컨텐츠는 그대로 보이게 됨.

 

clip

초과된 컨텐츠는 overflow-clip-margin property를 이용해서 클리핑 (마스킹)됨.

default 값은 0px이며, px을 조절하면 초과될 범위에서 특정 px만큼 더 보이게 됨.

글자가 잘려서 보임!

 

scroll

초과된 컨텐츠는 부모의 컨테이너 박스에 클리핑(마스킹) 되며, 초과된 컨텐츠는 스크롤바를 이용해서 볼 수 있음.

 

auto

초과된 컨텐츠는 부모의 컨테이너 박스에 클리핑(마스킹) 되며, 초과된 컨텐츠는 스크롤바를 이용해서 볼 수 있음.

여기까지는 scroll과 같은데, 컨텐츠가 흘러 넘칠때만 스크롤바가 보이고, 그렇지 않으면 default 상태로 유지됨.

---

실습

* clip의 경우 overflow-clip-margin property에서 지정한 px만큼 더 보이며 이후 글자는 잘려서 보이게 됩니다.

심지어 글자도 잘리게 됩니다.

 

*scroll과 auto의 경우 초과된 컨텐츠가 없을 경우 scroll은 여전히 scroll bar가 보이지만 auto에서는 보이지 않는 것을 확인할 수 있습니다.

See the Pen overflow practice by woongwoongs (@woongwoongs) on CodePen.

 

---

Reference

overflow - CSS: Cascading Style Sheets | MDN