웹 페이지를 만들다 보면 요소에 할당된 너비나 높이보다 내용이 더 많아져 레이아웃이 깨지는 경우가 자주 발생합니다. 이런 문제는 CSS의 overflow 속성을 사용하면 간단하게 해결할 수 있습니다.
overflow 속성이란?
overflow 속성은 요소의 콘텐츠가 지정된 크기를 벗어났을 때 그 내용을 어떻게 처리할지 결정합니다. 주요 값은 다음과 같습니다.
- visible (기본값): 넘친 내용이 요소 밖으로 그대로 표시됩니다.
- hidden: 넘친 부분이 잘려서 보이지 않습니다.
- scroll: 내용이 넘치지 않더라도 항상 스크롤바가 표시됩니다.
- auto: 내용이 넘칠 때만 필요한 방향에 스크롤바가 자동으로 생성됩니다.
예제 코드
아래 예제는 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">
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
</div>
</body>
</html>실행 결과 설명
overflow: scroll이 적용된 첫 번째 박스는 내용의 양과 관계없이 가로·세로 스크롤바가 항상 나타납니다. 반면 overflow: auto를 사용하면 내용이 실제로 공간을 초과할 때만 스크롤바가 표시되므로, 화면을 깔끔하게 유지하고 싶다면 auto 값을 사용하는 것이 좋습니다.
가로 스크롤만 허용하려면 overflow-x, 세로 스크롤만 허용하려면 overflow-y 속성을 개별적으로 지정할 수도 있습니다. 이처럼 overflow 속성을 활용하면 고정된 크기의 요소 안에서도 콘텐츠를 효율적으로 관리할 수 있습니다.