Overflow 속성

자식 element는 부모 element의 box 안에 배열되는 것이 보통이지만, 다음과 같은 경우에는 그 경계를 벗어날 수 있다.

floating element이고, 부모 element box에 비해 크기가 더 클 때.
absolute positioning이 적용되었을 때.
음수의 margin을 가질 때.

기호 설명

A | B: A 또는 B 중의 하나이다.

overflow: visible | hidden | scroll | auto

Position 속성의 값이 absolute인 element에 적용되며, 유전되지 않는다.

초기값은 visible이다.

visible: 크기에 관계없이 내용을 모두 보여준다.
hidden: 해당 element에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다. Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다.
auto: 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다.
scroll: 언제나 스크롤바를 나타낸다.

아래 예를 보면, 주어진 공간의 크기보다 내용이 길지만, 기본값이 visible이 적용되어 내용이 화면에 모두 나타난다.

<HTML>
<HEAD>
<STYLE type="text/css">
#overlay {position: absolute; top: 50px; left: 50px; height: 100px; width: 100px}
</STYLE>
</HEAD>
<BODY>
<DIV id=overlay>
가로 100픽셀, 새로 100픽셀 보다 더 긴 내용이다. 새로로 길게 나타난다.
높이 100픽셀이 넘어가도 계속 나온다. 가로 폭은 100픽셀을 유지한다.
</DIV>
</BODY>
</HTML>

Overflow 속성의 값을 hidden으로 해 보자.

<HTML>
<HEAD>
<STYLE type="text/css">
#overlay {position: absolute; top: 50px; left: 50px; height: 100px;
width: 100px; overflow: hidden}
</STYLE>
</HEAD>
<BODY>
<DIV id=overlay>
가로 100픽셀, 새로 100픽셀 보다 더 긴 내용이다. 새로로 길게 나타난다.
높이 100픽셀이 넘어가도 계속 나온다. 가로 폭은 100픽셀을 유지한다.
</DIV>
</BODY>
</HTML>

Overflow 속성의 값을 auto와 scroll로 준 경우이다.

overflow: auto /*필요한 수직 스크롤바만 나온다.*/

overflow: scroll /*수평, 수직 스크롤바가 모두 나온다.*/

▲ ▶