HTML DOM 스타일 overflow 속성 완벽 가이드

DOM의 style.overflow 속성은 HTML 문서에서 요소의 CSS overflow 속성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 요소의 크기를 벗어나는 콘텐츠를 어떻게 처리할지 동적으로 제어할 수 있습니다.

문법(Syntax)

overflow 속성의 기본 문법은 다음과 같습니다.

overflow 값 반환하기

object.style.overflow

overflow 값 설정하기

object.style.overflow = "value"

속성 값(Values)

overflow 속성에 사용할 수 있는 값은 아래 표와 같습니다.

값	설명
scroll	콘텐츠가 잘리며, 필요한 경우 스크롤바가 항상 추가됩니다.
auto	콘텐츠가 넘칠 때만 자동으로 스크롤바가 생성됩니다.
hidden	요소 박스 밖으로 흘러나오는 콘텐츠를 숨깁니다.
visible	콘텐츠를 자르지 않고, 요소 박스 밖으로 그대로 흘러나오게 합니다. (기본값)
initial	이 속성 값을 기본값으로 설정합니다.
inherit	부모 요소로부터 이 속성 값을 상속받습니다.

예제(Example)

다음은 style overflow 속성을 실제로 사용하는 예제입니다. 버튼을 클릭하면 문단의 overflow 값이 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        margin: 1.5rem auto;
        height: 100px;
        overflow: scroll;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style overflow Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. 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.overflow = "hidden";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 스타일 overflow 속성 완벽 가이드

초기 상태에서는 문단에 scroll 값이 적용되어 있어 콘텐츠가 넘칠 때 스크롤바가 표시됩니다. 여기서 Change overflow 버튼을 클릭해 보세요.

HTML DOM 스타일 overflow 속성 완벽 가이드

버튼을 클릭하면 JavaScript의 document.querySelector('p').style.overflow = "hidden"; 코드가 실행되어 overflow 속성 값이 scroll에서 hidden으로 변경되고, 요소 박스를 벗어나는 콘텐츠가 더 이상 보이지 않게 됩니다.

정리

DOM style overflow 속성은 웹 페이지에서 콘텐츠 오버플로우를 동적으로 제어할 수 있는 강력한 도구입니다. 특히 모달 창, 드롭다운 메뉴, 고정 높이의 콘텐츠 영역 등을 구현할 때 유용하게 활용할 수 있습니다. 각 값의 동작 방식을 정확히 이해하고 상황에 맞게 사용하면 더욱 깔끔한 사용자 경험을 제공할 수 있습니다.