max-height 속성은 박스(요소)가 가질 수 있는 최대 높이를 지정하는 데 사용됩니다. 콘텐츠의 양이 많아 높이가 이 값을 초과하려고 해도, 요소의 실제 높이는 지정된 최대값을 넘지 않습니다.
max-height 속성의 값으로는 숫자, 길이 단위(px, em, rem 등), 또는 백분율(%)을 사용할 수 있으며, 기본값은 none(높이 제한 없음)입니다.
예제
<html> <head> </head> <body> <p style = "width:400px; max-height:10px; border:2px solid green; padding:10px; margin:15px;"> 이 문단은 너비 400px이며 최대 높이는 10px입니다. 이 문단은 너비 400px이며 최대 높이는 10px입니다. 이 문단은 너비 400px이며 최대 높이는 10px입니다. 이 문단은 너비 400px이며 최대 높이는 10px입니다. </p> <br> <br> <br> <img alt = "logo" src = "/css/images/logo.png" width = "210" height = "100" /> </body> </html>
위 예제에서는 너비가 400px인 문단에 max-height: 10px을 적용했습니다. 이 경우 텍스트가 아무리 길어도 문단의 높이는 10px를 초과하지 않으며, 초과된 내용은 잘려서 보이거나 아래 요소와 겹칠 수 있습니다.
참고 사항
- height와의 관계: height 값이 max-height보다 크게 설정되면 max-height가 우선 적용됩니다.
- overflow 속성 활용: 내용이 잘리지 않고 스크롤되거나 숨겨지도록 하려면
overflow: auto,overflow: hidden등과 함께 사용하는 것이 좋습니다. - 반응형 레이아웃: 백분율(%) 값을 사용하면 부모 요소의 높이를 기준으로 상대적인 최대 높이를 지정할 수 있습니다.