overflow

overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.

특징	설명
기본 값	visible
상속	안됨
애니메이션	안됨
버전	CSS2

Definition

• overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
• overflow:hidden는 float을 사용시 영역 깨짐 방지를 위한 방법으로도 사용합니다.
• overflow:scroll; 사용시 스크롤바 모양과 크기 및 위치가 브라우저마다 다양하므로 확인해야 합니다.

Syntax

overflow : visible | hidden | scroll | auto | inherit;

Property

속성 값	설명
visible	지정한 영역에 요소들을 보이게 합니다.
hidden	지정한 영역에 넘쳐난 요소들을 안보이게 합니다.
scroll	지정한 영역에 무조건 스크롤 바를 생기게 합니다.
auto	지정한 영역에 요소들이 넘치면 자동으로 스크롤 바가 생깁니다.
inherit	overflow-x의 속성 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
overflow

Sample

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

그리드 시스템은 디자인 결과를 보장하는 것이 아니라, 각기 다른 디자이너들이 자신만의 개성 있는 스타일에 적합한 해결책을 찾을 수 있도록 객관적인 방법을 제공합니다. 그리드 시스템을 활용하려면, 그리드를 사용하는 방법을 배우려고 노력해야 합니다. 그리드 연습이 필요한 예술이기 때문입니다.

overflow : hidden;
overflow : visible;
overflow : scroll;
overflow : auto;