Chunho’s DevLife

소개 프로젝트를 시작할 때, 나는 Header, Nav, Section, 그리고 Footer로 기본 레이아웃을 구성했다. Nav는 항상 화면의 왼쪽 중앙에 고정되어야 했기 때문에, 화면을 Header, Section, 그리고 Footer로 나누어 설계했다. Header와 Footer의 높이는 고정되어 있었지만, Section은 나머지 영역의 100%를 차지해야 했다. 문제 레이아웃을 설정하고 Section의 높이를 100%로 지정했지만, 화면 높이를 꽉 채우지 못하는 문제가 발생했다. 이후 문제 해결을 위해 높이 값을 부모 요소인 html 및 body에 의존해야 한다는 점을 깨달았다. 원인 하지만 문제는 계속해서 발생했고, 개발자 도구를 사용하여 Elements 탭을 검사한 결과, html 및 body ..

Footer에 position:absolute를 주고, bottom 0으로 고정시키면 Footer를 바닥에 고정시킬 수 있다. 하지만 위와 같이 화면의 세로 px이 부족하거나 브라우저의 하단을 잡고 끌어올리게 될 경우 Footer가 Section을 잡아먹는 현상이 발생한다. 따라서 Footer는 화면의 하단을 잡고 끌어올릴 경우, 덮여져야 한다고 생각했다. 만약 Layout에서 height을 100vh로 줄 경우, 위와 같이 Footer 아래로 여백이 생기는 현상이 발생한다. 이를 해결하기 위해서 Body에 flex를 준 뒤, Section(main)에 flex 1을 주게 되면, Section이 차지하는 비중이 가장 많아지게 되어 화면의 세로 px과 상관 없이 항상 footer가 바닥에 붙어있게 된다.