[CSS] overflow

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

 

 

 

visible

---

overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본값이다. 

 

overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나온다. 또한 overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여준다.

 

See the Pen Untitled by lin (@nnlynn) on CodePen.

 

 

 

 

hidden

---

반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨길 수 있다. 또한 overflow 속성을 hidden으로 지정된 요소 내에서는 긴 텍스트의 뒷 부분이 아예 잘린다.

 

See the Pen Untitled by lin (@nnlynn) on CodePen.

 

 

 

 

scroll

---

overflow 속성을 scroll로 설정해주면 스크롤바가 생기기 때문에 사용자가 원한다면 컨텐츠를 끝까지 볼 수 있다. 또한 overflow 속성 대신에 overflow-x 속성이나 overflow-y 속성을 사용하면 가로 또는 세로만 선택적으로 스크롤바를 보여줄 수 있다.

 

See the Pen Untitled by lin (@nnlynn) on CodePen.

 

 

 

 

auto

---

컨텐츠의 양이 가변적이어서 스크롤바를 보여줘야 할지 말지 미리 결정하기 어려운 경우에는 overflow 속성값으로 auto를 사용하면 된다. 요소의 overflow 속성을 auto로 설정해주면, 그 안의 컨텐츠의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바가 생긴다.

See the Pen Untitled by lin (@nnlynn) on CodePen.