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 /*수평, 수직 스크롤바가 모두 나온다.*/이렇게 나와요
◀ ▶