CSS의 overflow-x 속성은 콘텐츠가 요소의 왼쪽·오른쪽 경계를 벗어났을 때 이를 어떻게 처리할지 지정하는 속성입니다. 가로 방향으로 넘치는 내용을 숨기거나, 스크롤바를 표시하거나, 그대로 노출할 수 있어 고정 폭 레이아웃이나 반응형 디자인에서 특히 유용하게 활용됩니다.
overflow-x의 주요 값
- visible – 기본값으로, 넘친 콘텐츠가 요소 밖으로 그대로 표시됩니다.
- hidden – 경계를 벗어난 부분이 잘려서 보이지 않습니다.
- scroll – 콘텐츠 길이와 관계없이 항상 가로 스크롤바가 표시됩니다.
- auto – 콘텐츠가 넘칠 때만 자동으로 스크롤바가 나타납니다.
예제
아래 코드를 실행하면 overflow-x 속성이 실제로 어떻게 동작하는지 직접 확인할 수 있습니다. 예제에서는 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>
실행 결과
위 예제처럼 overflow-x와 overflow-y를 함께 사용하면 가로·세로 방향의 넘침을 각각 다르게 제어할 수 있습니다. 참고로 한쪽만 hidden 또는 scroll로 지정하면, 다른 축의 값이 visible이더라도 브라우저에 따라 자동으로 auto처럼 동작할 수 있다는 점도 기억해 두면 좋습니다.