overflowX 속성이란?
HTML DOM의 style.overflowX 속성은 HTML 문서에서 요소 박스 안의 콘텐츠가 좌우 방향으로 넘쳐흐를 때(오버플로) 이를 어떻게 처리할지 결정하는 값을 가져오거나 수정하는 데 사용됩니다. 예를 들어 고정된 너비를 가진 요소 안에 긴 텍스트가 들어갈 경우, 이 속성으로 가로 스크롤 여부를 손쉽게 제어할 수 있습니다.
문법(Syntax)
overflowX 속성의 기본 문법은 다음과 같습니다.
overflowX 값 반환하기
object.style.overflowX
overflowX 값 설정하기
object.style.overflowX = “value”
속성 값(Values)
value 자리에는 아래 표와 같은 값들을 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| scroll | 콘텐츠를 잘라내고(클리핑), 필요한 경우 스크롤바를 추가합니다. |
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| initial | 이 속성 값을 기본값으로 초기화합니다. |
| auto | 콘텐츠를 잘라내고, 필요할 때만 스크롤바를 추가합니다. |
| hidden | 요소 박스 밖으로 흘러나오는 콘텐츠를 숨깁니다. |
| visible | 콘텐츠를 자르지 않으며, 콘텐츠가 요소 박스 밖으로 그대로 흘러나옵니다. |
예제(Example)
다음은 style.overflowX 속성을 활용한 예제입니다. 버튼을 클릭하면 단락(p) 요소의 overflowX 값이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
height: 100vh;
}
p {
border: 2px solid #fff;
height:100px;
width:200px;
white-space: nowrap;
}
.btn {
background: coral;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style overflowX Property Example</h1>
<p>
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change overflow</button>
<script>
function add() {
document.querySelector('p').style.overflowX = "scroll";
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
“Change overflow” 버튼을 클릭하면 overflowX CSS 속성 값이 initial에서 scroll로 변경됩니다. 그 결과, 가로 방향으로 넘치던 텍스트가 잘리고 가로 스크롤바가 나타나는 것을 확인할 수 있습니다.
참고 사항
overflowX는 세로 방향의 오버플로를 제어하는 overflowY 속성과 짝을 이룹니다. 가로·세로 두 방향을 동시에 지정해야 한다면 overflow 속성 하나로 간편하게 설정할 수도 있습니다.