CSS에서 height 대신에 min-height를 사용해야 하는 이유

이번 포스팅에서는 CSS에서 height 속성을 사용할 때 흔히 겪을 수 있는 문제점과 min-height 속성을 사용하여 이러한 문제를 쉽게 예방하는 방법에 대해서 살펴보았습니다.

height 속성의 기본값

height 속성을 명시해주지 않으면 auto라는 키워드가 기본값으로 사용이 되는데요. height 속성이 auto로 설정되어 있는 요소는 내부 컨텐츠를 해당 요소를 딱 맞게 담을 수 있을만큼 높이가 자동 결정됩니다.

이 기본값 덕분에 우리가 height 속성을 별도로 명시해주지 않아도 요소의 높이는 화면 크기에 따라서 자동 조절됩니다. 다시 말해 요소의 폭이 좁아지면 한 줄에 담을 수 있는 컨텐츠의 양이 적어지기 때문에 요소의 높이가 높아지게 되고, 반대로 요소의 폭이 넓어지면 한 줄에 담을 수 있는 컨텐츠의 양이 늘어나서 요소의 높이가 자연스럽게 낮아지게 됩니다.

height 속성의 위험성

height 속성을 직접 설정해줄 때는 여러 가지 문제로 이어질 수 있으므로 각별한 주의가 필요한데요.

대표적인 사례로 height 속성을 절대 픽셀값으로 설정해서 의도치 않게 컨텐츠가 요소 밖으로 삐져나오는 경우를 들 수 있습니다.

위 화면에서 <div> 요소의 height 속성을 100px로 설정하였기 때문에, 두번째 요소의 컨텐츠가 요소 밖으로 밀려나오는 것을 볼 수 있습니다.

CSS에서 컨텐츠가 넘칠 때 요소 밖으로 빠져나올지 말지는 결정하는 overflow 속성에 대해서는 별도의 포스팅에서 다루었으니 참고 바랍니다.

이러한 현상은 비단 고정 폭의 요소 뿐만 아니라, width 속성이 퍼센트(%)와 같이 상대값으로 설정되어 있을 경우에도 쉽게 발생할 수 있습니다. 특히, 디스플레이의 폭이 상대적으로 좁은 모바일 환경에서는 이것이 전체 웹페이지의 레이아웃을 어긋나게 하는 원인이 될 수 있으며, 데스크탑 환경에서도 사용자가 브라우저의 너비를 확 줄여버리면 비슷한 문제로 이어질 수 있어서 width 속성을 명시해줄 때는 각별한 주의가 필요하겠습니다.

대안: min-height 속성

그럼 어떻게 하면 컨텐츠가 요소 밖으로 밀려나오는 문제를 예방하면서 요소의 높이를 좀 더 안전하게 지정할 수 있을까요? 바로 여기서 width 속성의 대안으로 min-width 속성을 활용할 수 있는데요.

min-width 속성을 사용하면 컨텐츠의 양이 적을 때는 설정값으로 높이가 고정되고, 컨텐츠 양이 많을 때는 넘치지 않고 요소의 높이가 자연스럽게 늘어나기 때문입니다.

위 화면에서 보시면 height 속성 대신에 min-height 속성을 사용하여 첫 번째 요소의 높이는 100px이 유지되지만, 두 번째 요소의 높이는 늘어난 것을 확인할 수 있습니다.

마치면서

지금까지 CSS에서 height 속성을 사용할 때 흔히 발생할 수 있는 문제와 min-height 속성을 사용하여 이러한 문제를 피하는 방법에 대해서 알아보겠습니다.

저는 개인적으로 모바일 친화적인 디자인을 위해서 왠만하면 height 속성은 애초에 사용하지 않으려고 노력하는 편인데요. 지금까지 함께 살펴본 것 처럼 높이 지정이 필요한 경우에는 min-height 속성을 우선적으로 쓰는 것이 바람직한 경우가 많기 때문입니다.