매번 새로운 프로젝트를 시작할 때마다 소소하게(?) 헷갈리고 어려움을 겪는 부분이 있는데 바로 기본적인 레이아웃 같다.
분명 몇 번 해본 기억이 있는데도 왜 텅 비어 있는 IDE를 보면 내 머릿속도 같이 텅 비어버리는 걸까...? 오늘은 중요한 레이아웃 설정 방법을 잊지 않기 위해 기록을 남긴다.
요즘처럼 사용자들이 여러 디바이스를 사용하는, 즉 다양한 해상도를 가진 기기를 사용하는 세상에서는 반응형이라는 기술이 중요해질 수밖에 없다. (이미 중요하기도 하고!)
사이드 프로젝트에서는 tailwind css를 사용하고 있기 때문에 기본적인 작업에서는 크게 어려움을 느끼고 있지 않았지만, 매번 같은 크기의 화면에서만 작업을 하다가 전체적으로 점검도 좀 해볼 겸 화면을 이리저리 줄이고 늘리며 어색한 부분을 수정하고 있을 때 문제가 발생했다.
이랬는데~
요래 됐슴당~
이건 뭐 틀린그림 찾기도 아니고... 대체 뭐가 잘못 됐다는 걸까?
자세히 들여다보면...... 분명히 멀쩡하게 있던 네비게이션 바가 사라져 있다.
클라이언트 크기를 줄이면 하단에 있던 네비게이션 바가 아래로 자취를 감춰버리는 것이었다!
현재 네비게이션 바는 화면의 너비가 768px 이상일 때는 좌측에, 그렇지 않을 때는 하단에 배치해놓았다.
화면 크기에 따라 매번 calc 속성을 사용해 너비와 높이를 따로 계산하고 싶지 않았던 나는 헤더와 네비게이션 바를 제외한 main 섹션에 대해서 flex-1을 추가함으로써 요소가 차지할 수 있는 최대 너비를 주려고 했는데......
뭔가 부족했던 것인지 특정 높이 이하로 크기가 작아지면 더이상 main 섹션의 높이가 줄어들지 않고 본인의 크기를 유지하게 되면서 하단에 있는 네비게이션 바가 밀려나기 시작했다.
첫 번째 문제
- 아직 개발하는 도중이라 메인 아래 속한 post-list 영역에 overflow-auto를 추가하지 않았다
그래서 헐레벌떡 overflow-auto와 h-full을 적용하였지만 스크롤이 생성되지 않았다...
두 번째 문제
- 모든 요소를 감싸고 있는 상위 요소에 overflow-hidden을 추가하지 않았다
그래도 동작하지 않는다...... 중첩된 요소들이 많아서 슬슬 헷갈리기 시작했다.
세 번째 문제
- 가만히 생각해 보니 flex 아이템의 자식 요소가 길어졌을 때, 자신이 차지해야 하는 영역을 초과하여 계속 길어지기 때문에 발생한 문제다. 그럼 정확히 자신이 차지할 수 있는 영역까지만 늘어날 수 있게 한다면 해결되지 않을까?
여기까지 생각했을 때 문득
min-height: 0;이라는 속성을 생각해 냈고, 당장 className을 추가했다.
<div className="flex flex-col w-full h-full items-center overflow-hidden">
<Header />
<div className="flex flex-col w-full flex-1 min-h-0 max-w-6xl md:flex-row">
{/* SidebarNav only show on desktop */}
<SidebarNav activeNavKey={activeNavKey} />
<main className="flex-1 h-full lg:border-r overflow-hidden">
<Outlet />
</main>
</div>
{/* BottomNav only show on mobile */}
<BottomNav activeNavKey={activeNavKey} />
</div>
무사히 스크롤이 작동하기 시작했다!
원인은 내가 짐작했던 것이 맞았다. 부모의 높이가 자식 요소의 크기에 따라 결정되기 때문에 -자식이 자신의 크기만큼 부모를 늘리려고 하기 때문에- 원하는 만큼 높이가 줄어들지 않았던 것이다. (이때는 min-height: auto; 상태)
즉 위의 코드에서, 헤더와 하단의 네비게이션 바의 영역을 고려하지 않고 가운데의 div가 자신의 높이를 유지하려 했기 때문에 생긴 현상이었다.
따라서 높이가 최대 0px까지 줄어들 수 있도록 min-height: 0;을 명시적으로 적용하면 문제가 해결된다. 가로 스크롤이라면 반대로 min-width: 0;를 적용하면 해결!
그리드 레이아웃에서 동일한 문제가 발생했을 때도 이 방법을 이용하면 해결할 수 있다고 한다.
분명 예전에도 같은 문제로 고민을 했었던 것 같은데... 기계처럼 툭 치면 우수수 코드가 나오는 지경에 도달하고 싶다! 자주 연습하는 수밖에는 없겠지. 🙄
