🚨 0. 기록 이유
항상 레이아웃을 짤 때 어떤 방식으로 할지 항상 고민을 하는데, 의도치 않은 css가 나오는 것 만큼 스트레스가 받는 일이 있지는 않은것같다.
이번에 레이아웃을 짜면서 처음으로 의도한 대로 완벽하게 공간을 메꾸는 것을 보고 앞으로는 이런 식으로 계속 해봐야겠다는 생각을 하고 있다.
참고로, fit-content와 auto가 caniuse로 확인해보니 IE 11을 지원을 안한다... 그래서 다른 방식을 생각해봤다.
1. 🕹 먼저 레이아웃을 잡아준다.
사실상 레이아웃에서 가장 문제가 되는게 헤더와 메인끼리의 충돌인데,
헤더의 높이만큼 메인 컨테이너를 줄여서 잡아주면 가장 근본적인 레이아웃이 완성된다.
이때 height:1px을 주고 min-height:을 계산값으로 넣어준 이유는, 만약 Main의 자식컨테이너에 부모의 100%를 주겠다고 했을 때에 부모에 높이가 존재하지 않는다고 생각하는 모양인지 자동적으로 컨텐츠 크기만큼으로 높이가 정해지기 때문이다... 진짜 이해안되는 레이아웃 방식이지만 일단 그렇다.
-
부모의 높이에 height 1px이 없을때
-
부모의 높이에 height 1px이 정해져있을 때
2. 🕹 그 뒤에 main 컨테이너의 자식들은 모두 min-height:100%를 준다.
이렇게 해두면 일단 최소크기는 부모인 main의 크기로 잡히며, 만약 자식이 자동으로 넘쳐날 경우 그 크기에 맞춰서 height이 늘어난다.
min-height으로 설정하지 않았고 height:100%로 설정했을 경우, 브라우저는 첫 랜더링 당시에 해당 자식 컨테이너의 크기를 그냥 부모의 100%, 즉 Main 컨테이너의 첫 뷰포트 크기로 고정되기 때문에 자식이 늘어난 만큼을 커버해주지 못한다. 그래서 반드시 min-height으로 설정해줘야 한다.
3. 🕹 요약
- 첫 레이아웃을 짤때 viewport 기준으로 min-height을 설정하고, height을 1px을 줘서 최소높이를 설정한다.
- 자식 컴포넌트는 min-height:100%를 줘서 항상 기본을 부모인 Main의 뷰포트만큼 차지해주고, 자식이 넘쳐날 경우라면 그 자식만큼 늘어나게 만든다.
별거 아닐수 있지만, 정말 css때문에 스트레스를 너무 받아서 다 때려치고 싶었는데 일단 어떻게든 정리가 된 것 같아서 앞으로는 이 방식을 사용하려고 한다.
까먹지 않게 정리해두고 담에 짤때에도 이렇게 해봐야겠다.
물론, 사용하다보면 또 어딘가에서 레이아웃이 깨지겠지만.. 그건 그때가서 좀 생각해보고 일단 이렇게 가자... 진짜 IE만 아니었어도 fit-content로 밀어버리고 싶은 마음이 굴뚝같았다.
