TIL#146 css overflow

overflow

overflow 속성은 요소 내의 컨텐츠가 너무 커서 요소 내에 보여주기 힘들때 그것을 어떤 방식으로 보여줄지를 지정하는 속성이다. 기본적으로 요소의 크기가 고정되어 있지 않다면 컨텐츠의 크기만큼 요소의 크기가 커진다. 만약 크기가 고정되어 있다면 overflow 속성에 따라 다르게 보여지게 된다.

• overflow: visible;
  • 기본 값이다. 넘친 컨텐츠는 상자 밖으로 보여진다.
• overflow: hidden;
  • 넘치는 부분은 잘려서 보여지지 않는다.
• overflow: scroll;
  • 스크롤바가 추가된다. overflow-x, overflow-y를 사용해 가로, 세로 따로 지정할 수 있다.
• overflow: auto;
  • 컨텐츠 양에 따라서 스크롤바를 추가할지 추가되지 않을지 자동으로 결정한다.