부모의 높이가 0일 때, 높이를 잡는 방법

이번 포스팅에서는 CSS 시 특정 요소의 부모 높이가 0이 될 때, 그 부모의 높이를 잡는 방법에 대해 알아보겠습니다. 부모의 높이가 0이 될 경우, 별문제가 되지 않는 경우도 있지만 대부분의 경우, 뒤 영역이 앞 영역을 타고 올라오는 등 UI 레이아웃이 깨지는 현상이 있어 문제가 됩니다. 이를 해결하기 위한 방법을 함께 알아보겠습니다. 1. 부모의 높이가 0이 되는 원인 1.1. float 속성 사용 자식 요소에게 float 속성을 부여한 것이 가장 대표적인 원인입니다. 최근에는 display: flexbox, grid 등의 레이아웃 관련 CSS 속성이 추가되어 float 속성을 이용해 레이아웃을 잡는 일이 적어졌는데요. 그렇지만 기존 사이트를 유지보수 하거나, 새로운 사이트를 구축할 때도 float ..