CSS overflow 속성이란?
요소에 지정한 크기보다 내용이 많아지면 콘텐츠가 박스 밖으로 삐져나오는데, 이를 오버플로(overflow)라고 합니다. CSS의 overflow 속성을 사용하면 이렇게 넘친 콘텐츠를 원하는 방식으로 처리할 수 있습니다. 콘텐츠를 잘라내거나(clip), 스크롤바를 제공해 숨겨진 영역을 확인할 수 있게 하거나, 박스 밖으로 그대로 렌더링할 수도 있습니다.
overflow 속성의 주요 값
- visible — 기본값. 넘친 콘텐츠가 요소 밖으로 그대로 표시됩니다.
- hidden — 요소 경계를 벗어난 부분을 잘라내고 나머지는 보이지 않게 합니다.
- scroll — 콘텐츠 양과 무관하게 가로·세로 스크롤바를 항상 표시합니다.
- auto — 콘텐츠가 넘칠 때만 필요한 방향의 스크롤바를 자동으로 표시합니다.
문법(Syntax)
CSS overflow 속성의 기본 문법은 다음과 같습니다.
Selector {
overflow: /*값*/;
}예제 1 — scroll 값으로 스크롤 가능한 컨테이너 만들기
아래 예제는 overflow: scroll이 적용된 고정 높이(110px)의 div에 긴 텍스트를 담습니다. 화면에는 스크롤바가 생기고, 버튼을 누르면 JavaScript로 overflow 값을 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.
</div>
<input type="button" onclick="add()" value="스크롤바 제거">
</fieldset>
</form>
<script>
function add() {
document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>실행 결과
[스크롤바 제거] 버튼을 클릭하기 전 — 콘텐츠가 넘쳐 스크롤바가 표시됩니다.
버튼을 클릭한 후 — 넘친 콘텐츠가 잘려 보이지 않습니다.
예제 2 — auto 값으로 이미지 넘침 처리하기
두 번째 예제는 100×100 크기의 작은 컨테이너에 이미지를 넣고 overflow: auto를 적용한 사례입니다. 처음에는 컨테이너보다 이미지가 커서 스크롤바가 나타나며, 버튼을 클릭하면 컨테이너 크기를 이미지 크기에 맞춰 조정하고 overflow를 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: 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/sas/images/sas-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="스크롤바 제거">
</fieldset>
</form>
<script>
var containerDiv = document.getElementById("containerDiv");
var imgSelect = document.getElementById("image");
function fitHeight() {
containerDiv.style.height = imgSelect.height + 'px';
containerDiv.style.width = imgSelect.width + 'px';
containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>실행 결과
버튼을 클릭하기 전 — 컨테이너보다 이미지가 커서 스크롤바가 나타납니다.
버튼을 클릭한 후 — 컨테이너가 이미지 크기에 맞게 조정되어 스크롤바가 사라집니다.
정리
overflow 속성은 고정된 크기의 레이아웃에서 콘텐츠 넘침을 제어하는 필수 도구입니다. 단순히 넘친 부분을 감추고 싶다면 hidden, 사용자가 전체 내용을 확인할 수 있게 하려면 scroll 또는 auto를 상황에 맞게 선택하면 됩니다.