CSS의 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;"> This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px </p> <br> <br> <br> <img alt = "logo" src="/css/images/logo.png" width = "210" height = "100" /> </body> </html>
예제 설명
위 예제에서 문단(p 태그)은 너비가 400px로 고정되어 있고, max-height:10px;로 인해 높이가 10px를 초과하지 않습니다. 텍스트 양이 많아도 요소의 높이는 지정된 최대값까지만 커지며, 그 이상의 콘텐츠는 영역을 벗어나 보일 수 있습니다.
참고 사항
max-height는 height 속성보다 우선 적용되므로, 두 속성이 동시에 지정되면 실제 높이는 항상 max-height 값 이하로 유지됩니다. 다만 min-height 값이 max-height보다 크게 설정된 경우에는 min-height가 우선하므로 주의해야 합니다. 카드 목록, 이미지 갤러리처럼 요소 높이를 일정하게 유지해야 하는 반응형 레이아웃에서 max-height 속성을 활용하면 깔끔하고 안정적인 UI를 만들 수 있습니다.