CSS에서 min-height 속성은 박스(요소)가 가질 수 있는 최소 높이를 지정할 때 사용합니다. 이 속성을 적용하면 콘텐츠 양이 적더라도 요소가 지정된 높이 이하로 줄어들지 않으며, 콘텐츠가 많아지면 자동으로 늘어나게 됩니다.
min-height 속성의 값은 다음과 같은 형태로 지정할 수 있습니다.
- 숫자와 단위 — 예:
150px,10em - 백분율(%) — 부모 요소 높이를 기준으로 한 상대적 값
예제 코드
아래 예제는 너비 400px, 최소 높이 150px를 가진 문단을 만들고 파란색 테두리로 결과를 확인하는 코드입니다.
<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>
실행 결과 설명
위 코드를 실행하면 문단이 너비 400px로 고정되고, 내용이 아무리 짧아도 높이는 최소 150px를 유지합니다. 만약 텍스트가 많아져 150px를 초과하면 박스 높이는 콘텐츠에 맞춰 자동으로 확장됩니다.
min-height 활용 팁
- 카드 레이아웃이나 목록 항목처럼 일정한 최소 크기를 유지해야 하는 UI 요소에 유용합니다.
height속성과 달리 콘텐츠가 넘쳐도 잘리지 않으므로 반응형 디자인에서 안정적으로 사용할 수 있습니다.- 모바일 환경에서는 세로 방향 전환 시 뷰포트 높이 변화를 고려하여
vh단위와 함께 활용하면 좋습니다.