CSS의 min-height(최소 높이) 속성은 박스 요소가 가질 수 있는 최소 높이를 지정하는 데 사용됩니다. 요소의 실제 콘텐츠가 지정한 높이보다 작더라도 박스는 설정된 최소 높이를 유지하고, 콘텐츠가 그보다 커지면 박스가 자동으로 확장되는 특징을 가지고 있습니다.
min-height에 사용할 수 있는 값
- 길이 단위 – px, em, rem, pt 등 고정 크기로 지정합니다.
- 백분율(%) – 부모 요소(컨테이닝 블록) 높이를 기준으로 백분율로 지정합니다.
- auto – 기본값으로, 최소 높이 제한을 두지 않습니다.
예제
<html> <head> </head> <body> <p style = "width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;"> 이 단락은 너비 400px, 최소 높이 150px로 설정되어 있습니다. 이 단락은 너비 400px, 최소 높이 150px로 설정되어 있습니다. 이 단락은 너비 400px, 최소 높이 150px로 설정되어 있습니다. 이 단락은 너비 400px, 최소 높이 150px로 설정되어 있습니다. </p> <img alt = "logo" src = "/css/images/logo.png" width = "100" height = "100" /> </body> </html>
실행 결과 설명
위 예제에서 단락(<p>) 요소는 너비가 400px로 고정되어 있으며, min-height가 150px로 지정되어 있습니다. 따라서 텍스트 내용이 많지 않아도 파란색 테두리를 가진 박스는 항상 최소 150px의 높이를 유지합니다. 만약 텍스트가 더 많아져 150px를 초과하면, 박스는 잘리지 않고 콘텐츠 양에 맞춰 자연스럽게 늘어나게 됩니다.
min-height 속성은 카드 레이아웃, 목록 디자인처럼 콘텐츠 길이가 들쭉날쭉한 요소들의 균일한 높이를 유지해야 할 때 매우 유용하게 활용됩니다.