CSS의 overflow-y 속성은 요소 안의 콘텐츠가 위·아래(세로) 방향으로 영역을 벗어났을 때 이를 어떻게 처리할지 지정하는 속성입니다. 예를 들어 scroll 값을 적용하면 세로 스크롤바가 표시되고, hidden 값을 적용하면 넘치는 부분이 잘려서 보이지 않게 됩니다.
overflow-y의 주요 값
- visible – 기본값으로, 넘치는 콘텐츠가 그대로 밖으로 표시됩니다.
- hidden – 세로 방향으로 넘치는 부분이 잘려 보이지 않습니다.
- scroll – 콘텐츠 양과 관계없이 항상 세로 스크롤바가 나타납니다.
- auto – 콘텐츠가 넘칠 때만 자동으로 스크롤바가 표시됩니다.
예제 코드
아래 코드는 가로 방향은 숨기고(overflow-x: hidden), 세로 방향에는 스크롤(overflow-y: scroll)을 적용한 예시입니다. 직접 실행해 보며 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orange;
width: 250px;
height: 45px;
border: 2px solid blue;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y.</div>
</body>
</html>실행 결과
위 코드를 실행하면 주황색 배경의 div 요소에서 세로 방향으로 스크롤바가 생성되어, 높이(45px)를 초과하는 텍스트를 스크롤해 확인할 수 있습니다. 반면 가로 방향은 hidden 처리되어 넘치는 내용이 잘려 나타나지 않습니다.
정리
overflow-y는 세로 방향 콘텐츠 넘침을 제어하는 데 유용하며, overflow-x와 함께 사용하면 가로·세로 스크롤 동작을 각각 다르게 설정할 수 있습니다. 게시판 목록, 고정 높이 카드, 사이드바 등 콘텐츠 높이가 일정하지 않은 UI를 만들 때 특히 활용도가 높습니다.