CSS overflow 속성이란?
요소 박스의 크기보다 내용물이 더 커질 경우, 브라우저가 이를 어떻게 처리해야 할지 지시하는 CSS 속성이 바로 overflow입니다. 이 속성을 활용하면 넘쳐나는 콘텐츠를 보여주거나, 잘라내거나, 스크롤바로 확인할 수 있도록 만들 수 있습니다.
overflow 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| visible | 기본값으로, 콘텐츠가 포함 요소의 테두리를 벗어나 그대로 표시됩니다. |
| hidden | 포함 요소의 경계에서 콘텐츠가 잘려 나가며, 스크롤바는 표시되지 않습니다. |
| scroll | 포함 요소의 크기는 변하지 않지만, 사용자가 콘텐츠를 볼 수 있도록 스크롤바가 항상 추가됩니다. |
| auto | scroll과 목적은 같지만, 실제로 콘텐츠가 넘칠 경우에만 스크롤바가 표시됩니다. |
overflow 속성 예제
아래 코드를 실행하면 scroll 값과 auto 값의 차이를 직접 확인할 수 있습니다.
<html>
<head>
</head>
<style>
.scroll{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>scroll 값 예제:</p>
<div class = "scroll">
요소 박스에서 콘텐츠가 넘칠 때 스크롤바가
어떻게 작동하는지 보여드리기 위해 여기에 많은 내용을 담았습니다.
가로 및 세로 스크롤바가 모두 제공됩니다.
</div>
<br />
<p>auto 값 예제:</p>
<div class = "auto">
요소 박스에서 콘텐츠가 넘칠 때 스크롤바가 어떻게
작동하는지 보여드리기 위해 여기에 많은 내용을 담았습니다.
가로 및 세로 스크롤바가 모두 제공됩니다.
</div>
</body>
</html>scroll 값을 적용한 요소는 콘텐츠 양과 관계없이 항상 스크롤바가 나타나고, auto 값을 적용한 요소는 콘텐츠가 실제로 넘칠 때만 스크롤바가 표시된다는 점이 핵심 차이입니다. 상황에 맞게 적절한 값을 선택하면 더 깔끔하고 사용자 친화적인 화면을 구성할 수 있습니다.