CSS만으로 스크롤바를 숨기는 다양한 방법을 알아보겠습니다. 스크롤바는 화면에 보이는 영역보다 큰 콘텐츠를 탐색할 수 있도록 도와주는 웹 브라우저의 핵심 요소입니다. overflow 속성을 활용하면 스크롤 기능을 유지한 상태에서 스크롤바를 깔끔하게 숨길 수 있습니다.
기본 문법
selector {
overflow-x: 값;
overflow-y: 값;
}
/* 축약형 */
selector {
overflow: 값;
}
사용 가능한 속성값
| 값 | 설명 |
|---|---|
visible | 콘텐츠가 잘리지 않으며 요소 영역 밖으로 넘쳐 표시될 수 있습니다. |
hidden | 콘텐츠가 잘리며 스크롤바도 함께 숨겨집니다. |
scroll | 콘텐츠가 잘리지만 스크롤바는 항상 표시됩니다. |
auto | 콘텐츠가 영역을 초과할 때만 스크롤바가 나타납니다. |
방법 1: 세로 스크롤바 숨기기
세로 스크롤바를 숨기면서 가로 스크롤은 그대로 유지하려면 overflow-y: hidden과 overflow-x: scroll을 함께 지정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-y: hidden;
overflow-x: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
white-space: nowrap;
width: 500px;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
컨테이너 너비를 넘어서는 아주 긴 텍스트 줄로,
전체 내용을 보려면 가로 스크롤이 필요합니다.
</div>
<p>원래라면 세로 스크롤이 생길 추가 콘텐츠입니다.</p>
<p>하지만 세로 스크롤바는 숨겨져 있습니다.</p>
</div>
</body>
</html>
실행 결과: 컨테이너 하단에는 가로 스크롤바가 표시되고 세로 스크롤바는 나타나지 않습니다. 콘텐츠가 가로 방향으로 확장되어 좌우로 스크롤할 수 있습니다.
방법 2: 가로 스크롤바 숨기기
가로 스크롤바를 숨기고 세로 스크롤은 유지하려면 overflow-x: hidden과 overflow-y: scroll을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #fff3cd;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>일반 텍스트가 담긴 첫 번째 단락입니다.</p>
<p>내용이 더 있는 두 번째 단락입니다.</p>
<p>텍스트를 더 추가한 세 번째 단락입니다.</p>
<p>영역을 벗어나게 하는 네 번째 단락입니다.</p>
<p>세로 스크롤을 위한 다섯 번째 단락입니다.</p>
</div>
</div>
</body>
</html>
실행 결과: 컨테이너 오른쪽에는 세로 스크롤바가 표시되고 가로 스크롤바는 나타나지 않습니다. 콘텐츠가 세로 방향으로 확장되어 위아래로 스크롤할 수 있습니다.
방법 3: 가로·세로 스크롤바 모두 숨기기
두 스크롤바를 모두 완전히 숨기려면 overflow-x와 overflow-y를 모두 hidden으로 설정합니다. 이 경우 영역을 넘치는 콘텐츠는 잘려서 보이지 않으며, 사용자가 직접 스크롤해서 숨겨진 부분을 볼 수 없다는 점에 유의해야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow: hidden;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #d1ecf1;
width: 500px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>이 콘텐츠는 가로와 세로 모두 컨테이너 경계를 넘어 확장됩니다.</p>
<p>하지만 스크롤바가 보이지 않아 넘치는 콘텐츠는 잘려서 표시됩니다.</p>
<p>사용자는 스크롤해서 숨겨진 콘텐츠를 볼 수 없습니다.</p>
</div>
</div>
</body>
</html>
실행 결과: 스크롤바가 하나도 표시되지 않으며, 컨테이너 경계를 넘는 콘텐츠는 잘려서 화면에 나타나지 않습니다.
참고: 스크롤은 유지하고 스크롤바만 숨기기
overflow: hidden은 사용자가 마우스 휠 등으로 직접 스크롤하기 어렵습니다. 스크롤 동작은 그대로 살리면서 스크롤바만 시각적으로 숨기고 싶다면 최신 CSS 기법을 사용하는 것이 좋습니다.
.container {
overflow-y: auto;
/* Firefox */
scrollbar-width: none;
}
/* Chrome, Safari, Edge */
.container::-webkit-scrollbar {
display: none;
}
마무리
CSS overflow 속성을 활용하면 불필요한 스크롤바를 제거해 더 깔끔한 인터페이스를 만들 수 있습니다. overflow: hidden으로 스크롤바를 완전히 없애거나, overflow-x와 overflow-y로 가로·세로 스크롤을 개별적으로 제어할 수 있습니다. 사용자의 스크롤 경험을 해치지 않으면서 스크롤바만 숨기고 싶다면 scrollbar-width: none과 ::-webkit-scrollbar 조합을 활용해 보세요.
