CSS의 overflow 속성은 크기가 정해진 컨테이너보다 콘텐츠가 클 때, 콘텐츠 자체의 크기를 조정하지 않고 어떻게 표시할지를 제어하는 데 유용합니다. 이 속성을 사용하면 넘치는 콘텐츠를 잘라내거나(clip), 스크롤바를 제공해 잘린 부분을 볼 수 있게 하거나, 컨테이너 밖으로 콘텐츠를 그대로 렌더링할 수 있습니다. '컨테이너 밖으로 흘러넘친다'는 의미에서 이름도 overflow입니다.
기본 문법
CSS overflow 속성의 기본 문법은 다음과 같습니다.
Selector {
overflow: /*값*/
}
overflow 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | visible 기본값입니다. 콘텐츠가 잘리지 않고 요소 박스 밖까지 그대로 렌더링됩니다. |
| 2 | hidden 요소 박스를 벗어나는 콘텐츠는 잘려서 보이지 않습니다. 스크롤바도 생성되지 않습니다. |
| 3 | scroll 박스를 벗어나는 콘텐츠는 잘리지만, 스크롤바가 함께 표시되므로 스크롤하여 잘린 콘텐츠를 확인할 수 있습니다. |
| 4 | auto 콘텐츠가 넘칠 경우에만 필요에 따라 스크롤바가 자동으로 생성됩니다. |
참고로 overflow-x, overflow-y 속성을 사용하면 가로·세로 방향별로 넘침 처리를 따로 지정할 수도 있습니다.
예제 1: 이미지 컨테이너에서 overflow 활용하기
다음 예제는 고정된 크기의 div 안에 이미지를 넣고, 버튼을 클릭하면 컨테이너 크기를 이미지에 맞춰 조정하면서 overflow 값을 변경하는 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function fitHeight() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>
실행 결과
버튼을 클릭하기 전 – 컨테이너가 100×100px로 고정되어 있고 overflow 값이 auto이므로, 이미지가 넘치면 스크롤바가 나타납니다.
'Remove Scrollbars' 버튼을 클릭한 후 – 자바스크립트가 컨테이너의 크기를 이미지 크기에 맞게 늘리고 overflow 값을 hidden으로 변경하여 스크롤바가 사라집니다.
예제 2: 긴 텍스트에서 scroll과 hidden 비교하기
이번에는 긴 텍스트가 담긴 div에 overflow: scroll을 적용하고, 버튼 클릭 시 hidden으로 전환하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 110px;
overflow: scroll;
}
</style></head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>
실행 결과
'Remove Scrollbars' 버튼을 클릭하기 전 – overflow 값이 scroll이므로 세로 스크롤바가 표시되어 숨겨진 텍스트를 스크롤해 확인할 수 있습니다.
'Remove Scrollbars' 버튼을 클릭한 후 – overflow 값이 hidden으로 바뀌면서 스크롤바가 제거되고, 컨테이너를 벗어나는 텍스트는 잘려서 보이지 않습니다.
정리
CSS overflow 속성은 콘텐츠가 요소 박스보다 클 때의 표시 방식을 결정하는 핵심 속성입니다. 기본값인 visible은 콘텐츠를 그대로 노출하고, hidden은 잘라내며, scroll은 항상 스크롤바를 표시하고, auto는 필요할 때만 스크롤바를 생성합니다. 상황에 맞는 값을 선택하면 고정된 레이아웃 안에서도 콘텐츠를 깔끔하게 관리할 수 있습니다.