CSS의 overflow 속성에 scroll 값을 사용하면, 요소 밖으로 넘친 콘텐츠는 잘리지만 스크롤바가 자동으로 추가됩니다. 덕분에 사용자는 스크롤을 움직여 숨겨진 부분을 포함한 전체 내용을 끝까지 읽을 수 있습니다.
overflow: scroll의 특징
- 넘쳐나는(overflow) 콘텐츠는 지정된 영역 밖으로 표시되지 않고 잘립니다.
- 콘텐츠 길이와 관계없이 가로·세로 스크롤바가 항상 표시됩니다.
- 필요할 때만 스크롤바를 보여주고 싶다면
overflow: auto를 사용하는 것이 좋습니다.
예제 코드
아래 코드를 실행하면 overflow: scroll 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orange;
width: 250px;
height: 45px;
border: 2px solid blue;
overflow: scroll;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>Overflow property used here. This is a demo text to show the working of CSS overflow: scroll. This won't hide the content. Now a scrollbar will be visible.</div>
</body>
</html>실행 결과
위 예제에서 div 요소는 너비 250px, 높이 45px로 고정되어 있기 때문에 텍스트가 영역을 벗어나면 잘립니다. 하지만 overflow: scroll이 적용되어 있어 스크롤바가 나타나고, 스크롤을 내리면 잘린 나머지 텍스트도 모두 확인할 수 있습니다. 즉, 콘텐츠가 숨겨지지 않고 그대로 유지됩니다.
참고: 다른 overflow 값과의 비교
- visible (기본값): 넘치는 콘텐츠가 요소 밖으로 그대로 표시됩니다.
- hidden: 넘치는 콘텐츠가 잘리고, 스크롤바도 표시되지 않습니다.
- scroll: 콘텐츠는 잘리지만 스크롤바가 추가되어 전체 내용을 볼 수 있습니다.
- auto: 콘텐츠가 넘칠 때만 브라우저가 자동으로 스크롤바를 생성합니다.