요소에 지정된 너비와 높이보다 콘텐츠가 많으면 내용이 상자 밖으로 넘쳐 렌더링됩니다. 이럴 때 overflow 속성을 사용해 스크롤을 추가하면, 방문자가 스크롤을 통해 전체 내용을 편리하게 읽을 수 있습니다.
overflow 속성 이해하기
CSS의 overflow 속성은 콘텐츠가 요소의 경계를 초과할 때 이를 어떻게 처리할지 결정합니다. 주요 값은 다음과 같습니다.
- visible – 기본값으로, 넘친 콘텐츠가 요소 밖으로 그대로 표시됩니다.
- hidden – 넘친 부분이 잘려서 보이지 않습니다.
- scroll – 콘텐츠 양과 관계없이 가로·세로 스크롤바가 항상 표시됩니다.
- auto – 콘텐츠가 넘칠 때만 필요한 스크롤바가 자동으로 나타납니다.
JavaScript에서 overflow 속성 다루기
JavaScript에서는 DOM 요소의 style 객체에 접근해 overflow 값을 동적으로 변경할 수 있습니다. 아래 예제는 버튼을 클릭하면 div 요소에 스크롤을 적용하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
height: 150px;
background-color: orange;
border: 3px solid red;
margin-left: 20px;
}
</style>
</head>
<body>
<p>버튼을 클릭하면 overflow 속성으로 스크롤이 설정됩니다.</p>
<button type="button" onclick="display()">스크롤 설정</button>
<div id="box">
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
</div>
<br>
<br>
<script>
function display() {
document.getElementById("box").style.overflow = "scroll";
}
</script>
</body>
</html>
코드 설명
#box선택자로 가로 450px, 세로 150px 크기의 주황색 배경 div를 만들고 빨간색 테두리를 지정합니다.- 버튼을 클릭하면
onclick이벤트에 의해display()함수가 호출됩니다. display()함수는document.getElementById("box").style.overflow = "scroll";을 실행하여 해당 div에 스크롤바를 표시합니다.
이처럼 overflow 속성을 활용하면 고정된 크기의 요소 안에서도 모든 콘텐츠를 놓치지 않고 확인할 수 있어 사용자 경험이 크게 향상됩니다.