HTML DOM Style maxHeight 속성 – 요소의 최대 높이 설정 및 반환 방법

HTML 문서에서 DOM style의 maxHeight 속성은 특정 요소의 최대 높이(maximum height)를 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 요소가 지정된 높이를 초과하지 않도록 제한할 수 있어 레이아웃 제어에 매우 유용합니다.

문법(Syntax)

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

1. maxHeight 값 반환하기

object.style.maxHeight

2. maxHeight 값 설정하기

object.style.maxHeight = "value";

속성 값(Values)

value 자리에 들어갈 수 있는 값은 다음과 같습니다.

값	설명
none	요소의 높이에 제한을 두지 않습니다. (기본값)
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
initial	이 속성 값을 기본(default) 값으로 설정합니다.
length	px, em, rem 등 길이 단위로 최대 높이를 지정합니다.
percentage(%)	부모 요소 높이를 기준으로 한 백분율(%)로 최대 높이를 지정합니다.

예제(Example)

다음은 style maxHeight 속성을 활용한 실제 예제입니다.

<!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;
        width: 200px;
        overflow: auto;
    }
    .btn {
        background: coral;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin-top: 4rem;
    }
</style>
</head>
<body>
<h1>DOM Style maxHeight 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.
</p>
<button onclick="add()" class="btn">Set maxHeight</button>
<script>
    function add() {
        document.querySelector('p').style.maxHeight = "100px";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Style maxHeight 속성 – 요소의 최대 높이 설정 및 반환 방법

여기서 “Set maxHeight” 버튼을 클릭하면, JavaScript의 document.querySelector('p').style.maxHeight = "100px"; 구문에 의해 단락(p) 요소의 최대 높이가 100px로 설정됩니다. 그 결과, 텍스트가 100px를 초과하는 부분은 숨겨지고 overflow: auto; 설정에 따라 스크롤바가 나타나게 됩니다.

HTML DOM Style maxHeight 속성 – 요소의 최대 높이 설정 및 반환 방법

정리

maxHeight 속성은 반응형 웹 디자인에서 콘텐츠 영역의 크기를 제어할 때 자주 사용됩니다. 특히 목록, 카드, 이미지 갤러리 등 내용의 길이가 가변적인 요소의 높이를 일관되게 유지하고 싶을 때 overflow 속성과 함께 사용하면 효과적입니다.