overflow

overflow 속성은 영역을 벗어난 컨텐츠에 대한 처리 방침을 정할 때 사용한다. 처리 방침은 크게 다음과 같이 구분한다.

overflow:visible;은 설정하지 않아도 적용되는 기본값이다. 영역을 벗어나는 부분에 대해서 어떠한 제약도 하지 않는다.

overflow:scroll;로 설정하면 내용을 영역을 초과할 경우 초과한 부분을 잘라내어 하단으로 연결한다. 내용이 영역을 초과한 것과 관계없이 항상 스크롤이 표시된다.

overflow:auto;로 설정하면 사용자 에이전트(ex : 브라우저)가 출력 방식을 결정한다. 내용이 영역 안에 포함될 경우 visible과 동일하게 보이며, 초과할 경우 scroll과 동일하게 처리된다.

overflow:overlay;로 설정하면 auto와 동일하게 동작하지만 스크롤이 영역을 차지하지 않고 내용 위에 표시된다.

overflow:hidden;으로 설정하면 초과한 내용을 표시하지 않는다. JS 등을 사용하여 스크롤을 할 수 있다.

overflow:clip;으로 설정하면 hidden과 동일하게 초과한 내용을 표시하지 않는다. hidden과 다른 점은 어떠한 경우에도 스크롤을 할 수 없다는 것이.

다음 속성을 이용하여 각 방향에 대해서 세부적으로 overflow를 설정할 수 있다.

Last updated 2 years ago