overflow 프로퍼티는 요소의 컨텐츠가 요소의 박스 크기보다 커질 경우 그것을 어떻게 표시할지를 지정한다
- 요소의 크기가 고정되지 않았다면, 기본적으로 콘텐츠를 모두 포함할 수 있도록 요소의 크기가 확장된다
- 요소의 크기가 고정되어 있다면, 넘치는 부분은 overflow 속성 값에 따라 처리된다
overflow에 사용할 수 있는 값은 네가지가 있다
| 값 | 설명 |
|---|---|
| visible | 기본값으로 넘칠 경우 컨텐츠가 상자 밖으로 보여진다 |
| hidden | 넘치는 부분을 잘려서 보여지지 않는다 |
| scroll | 스크롤바가 추가되어 스크롤 할 수 있다 (가로,세로 모두 추가) |
| auto | 컨텐츠량에 따라 스크롤바를 추가할지 자동으로 결정된다 |
01 overflow: visible(기본값)
기본값이다. 넘친 컨텐츠는 상자 밖으로 보여진다
<style>
div.container {
overflow: visible;
border: solid 1px green;
height: 200px;
width: 200px;
}
</style>
<div class="container">
<p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
</div>
02 overflow: hidden
넘친 컨텐츠는 잘려지고 보여지지 않는다
<style>
div.container {
overflow: hidden;
border: solid 1px green;
height: 200px;
width: 200px;
}
</style>
<div class="container">
<p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
</div>
03 overflow: scroll
넘친 컨텐츠는 잘리고, 스크롤바가 생겨서 스크롤해서 볼 수 있다. 필요하던, 하지 않던간에 가로.세로 스크롤바가 모두 생긴다
<style>
div.container {
overflow: scroll;
border: solid 1px green;
height: 200px;
width: 200px;
}
</style>
<div class="container">
<p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
</div>
04 overflow: auto
넘칠 경우 스크롤바가 자동으로 생긴다. 가로/ 세로 필요한 부분에만 생긴다
<style>
div.container {
overflow: auto;
border: solid 1px green;
height: 200px;
width: 200px;
}
</style>
<div class="container">
<p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
</div>
05 주의사항 및 성능 이슈
새로운 블록 서식 문맥(Block Formatting Context, BFC) 생성
- visible이 아닌 overflow 값을 사용하면 새로운 BFC가 생성된다
- 이는 float이나 위치 계산 시 레이아웃 방식에 영향을 미칠 수 있다
- 스크롤 가능한 요소는 스크롤 시 브라우저가 레이아웃을 재계산해야할 수도 있어 성능이 저하될 수도 있다
높이 또는 폭 설정 필요
- overflow 속성이 동작하려면 height / max-height 또는 width / max-width가 설정되어 있어야 한다
- 혹은 white-space: nowrap으로 한줄 고정 시 가로 방향 넘침이 발생할 수 있다
