CSS에서 요소의 높이를 유연하게 제어하고 싶다면 min-height와 max-height 속성을 활용할 수 있습니다. 이 두 속성은 콘텐츠 양이나 브라우저 창 크기에 따라 요소의 높이가 변하더라도 항상 지정된 범위 안에 머물도록 보장해 줍니다.
min-height와 max-height 속성의 역할
min-height는 요소가 가질 수 있는 최소 높이를 지정합니다. 콘텐츠가 적어도 요소는 이 값보다 작아지지 않습니다. 반면 max-height는 요소가 가질 수 있는 최대 높이를 제한하여, 콘텐츠가 많아져도 이 값보다 커지지 않습니다.
두 속성을 함께 사용하면 요소의 높이가 최소값과 최대값 사이에서 자동으로 조절되므로, 반응형 웹 디자인에서 특히 유용합니다.
예제 코드
아래 예제는 div 요소에 최소 높이 450px과 최대 높이 550px을 적용한 코드입니다. 웹 브라우저 창 크기를 조절해 보면 효과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 550px;
min-height: 450px;
background-color: red;
}
</style>
</head>
<body>
<p>아래는 최소 높이와 최대 높이가 적용된 div입니다.
웹 브라우저 창 크기를 조절하면 효과를 확인할 수 있습니다.</p>
<div>데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
</div>
</body>
</html>참고 사항
min-height 값이 max-height 값보다 크게 설정되면, CSS 규칙상 min-height가 우선 적용됩니다. 따라서 두 값을 설정할 때는 min-height ≤ max-height 관계가 되도록 주의하는 것이 좋습니다.
또한 이 속성들은 픽셀(px), 퍼센트(%), 뷰포트 단위(vh) 등 다양한 단위로 지정할 수 있으며, 고정된 height 대신 사용하면 콘텐츠 길이 변화에 더 잘 대응하는 유연한 레이아웃을 만들 수 있습니다.