CSS에서 overflow: auto 속성은 overflow: scroll과 달리, 콘텐츠가 요소의 크기를 초과하여 넘칠 때만 스크롤바를 자동으로 표시합니다. 즉, 내용이 잘 맞으면 스크롤바가 나타나지 않고, 내용이 넘치는 경우에만 스크롤바가 생성되므로 화면 공간을 효율적으로 활용할 수 있습니다.
overflow: auto와 overflow: scroll의 차이
두 속성 모두 넘치는 콘텐츠를 처리한다는 점에서 비슷하지만, 동작 방식에는 분명한 차이가 있습니다.
- overflow: scroll – 콘텐츠 양과 상관없이 항상 스크롤바를 표시합니다.
- overflow: auto – 브라우저가 판단하여 콘텐츠가 넘칠 때만 스크롤바를 표시합니다.
아래 예제 코드를 직접 실행해 보면 overflow: auto 속성이 어떻게 작동하는지 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orange;
width: 250px;
height: 45px;
border: 2px solid blue;
overflow: auto;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>Overflow property used here. This is a demo text to show the working of CSS overflow: auto. This won't hide the content. A scrollbar would be visible, only if needed.</div>
</body>
</html>코드 설명
- div 요소에 250px × 45px 크기와 주황색 배경, 파란색 테두리를 지정했습니다.
- 텍스트 양이 고정된 높이(45px)보다 많기 때문에 overflow: auto에 의해 세로 스크롤바가 나타납니다.
- 만약 텍스트가 짧아 div 안에 다 들어간다면 스크롤바 없이 그대로 표시됩니다.
실행 결과
위 코드를 실행하면 다음과 같이 콘텐츠가 넘치는 부분에만 스크롤바가 생성되어 표시되고, 숨겨진 내용은 사라지지 않습니다.
정리
overflow: auto는 스크롤바가 꼭 필요한 경우에만 나타나도록 하여 사용자 경험을 개선하는 유용한 속성입니다. 고정된 크기의 박스에 가변적인 콘텐츠를 담을 때 overflow: scroll 대신 overflow: auto를 사용하면 불필요한 스크롤바로 인한 시각적 혼란을 줄일 수 있습니다.