CSS 오버플로우 속성

정의와 사용법

overflow 속성은 내용이 요소 프레임을 초과할 때 발생하는 사건을 정의합니다.

이 속성은 초과 요소 내용 구역의 처리 방법을 정의합니다. scroll 값이면, 사용자代理가 필요하든 아니든 스크롤 기계를 제공합니다. 따라서, 요소 프레임에 모든 내용이 맞춰져도 스크롤 바가 나타날 수 있습니다.

CSS 강의:CSS 위치

HTML DOM 참조서:overflow 속성

overflow 속성 설정:

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

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

값	설명
visible	기본 값. 내용은 잘리지 않으며, 요소 프레임 밖에 표시됩니다.
hidden	내용이 잘려지고, 나머지 내용은 보이지 않습니다.
scroll	내용이 잘려지지만, 나머지 내용을 볼 수 있도록 스크롤 바를 표시합니다.
auto	내용이 잘려지면, 브라우저가 나머지 내용을 볼 수 있도록 스크롤 바를 표시합니다.
inherit	부모 요소에서 overflow 속성 값을 继承

기본 값:	visible
thừa kế:	no
버전:	CSS2
JavaScript 문법:	object.style.overflow="scroll"

스크롤 바를 사용하여 요소 내 초과 내용을 표시하는 방법: 요소 내용이 지정된 영역을 벗어났을 때 overflow 속성을 설정하여 해당 동작을 규정하는 방법을 보여줍니다.
초과 요소 내의 초과 내용을 숨기는 방법: 요소 내용이 지정된 영역에 맞지 않게 크게 되었을 때 overflow 속성을 설정하여 내용을 숨기는 방법을 보여줍니다.
브라우저가 자동으로 초과 내용을 처리하는 방법: 이 예제에서는 브라우저가 자동으로 초과 내용을 처리하는 방법을 보여줍니다.

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 기재했습니다.

Chrome	IE / Edge	Firefox	Safari	Opera
1.0	4.0	1.0	1.0	7.0