고정 푸터 및 사이드바 레이아웃

고정 푸터는 콘텐츠가 짧을 때 뷰포트의 아래쪽에 머물고, 콘텐츠가 길어지면 콘텐츠와 함께 아래로 밀립니다. 역사적으로 어려웠던 점은 콘텐츠 높이를 알지 못하거나 JavaScript를 사용하지 않고 푸터를 고정하는 것이었습니다.

가장 간단한 현대적 해결책은 body { display: flex; flex-direction: column; min-height: 100vh; }와 main { flex: 1; }을 사용하는 것입니다. 주 콘텐츠가 남은 공간을 채우도록 늘어나 콘텐츠 길이와 관계없이 푸터를 아래쪽으로 밀어냅니다.

CSS 그리드 대안은 body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }입니다. 헤더에는 자동 높이가 지정되고, 주 콘텐츠에는 1fr이 지정되어 남은 공간을 채우며, 푸터에는 자동 높이가 지정됩니다. 깔끔하고 명확하며, 행 템플릿에 레이아웃 의도가 분명하게 드러납니다.

푸터에 position: sticky; bottom: 0을 적용하면 스크롤하는 동안 뷰포트 아래쪽에 고정되지만, 해당 요소의 스크롤 맥락이 허용할 때만 작동합니다. 스크롤 컨테이너 안의 푸터에는 잘 작동하지만, 플렉스박스나 그리드가 더 깔끔한 페이지 수준의 고정 푸터에는 덜 적합합니다.

사이드바와 주 콘텐츠로 구성된 레이아웃은 wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }으로 만들 수 있습니다. main의 min-width: 0은 너비가 큰 콘텐츠를 포함할 때 플렉스 항목이 컨테이너를 넘치지 않도록 합니다.

그리드 사이드바는 wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }로 만들 수 있습니다. 사이드바 열은 고정되고 콘텐츠 열은 남은 공간을 채웁니다. 헤더 행을 추가하려면 grid-template-rows: auto 1fr을 사용하고 사이드바가 두 행에 걸쳐 있도록 설정하십시오.

모바일에서는 사이드바를 주 콘텐츠 위나 아래로 접으십시오. 미디어 쿼리를 사용해 그리드 열 레이아웃을 단일 열 스택으로 전환할 수 있습니다. 또는 grid-template-columns: min(280px, 30%) 1fr을 사용해 작은 뷰포트에서 줄어드는 유동적인 사이드바를 만들 수 있습니다.

사이드바가 독립적으로 스크롤되도록 하려면 sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }를 사용하십시오. 주 콘텐츠가 스크롤되는 동안 사이드바가 화면에 계속 표시되므로, 긴 콘텐츠 페이지의 탐색 사이드바나 목차 사이드바에 적합합니다.

접을 수 있는 사이드바는 전체 너비 상태와 아이콘만 표시하는 상태 사이를 전환합니다. 사이드바 너비에는 사용자 지정 속성을 사용하십시오. 래퍼에 --sidebar-width: 280px을 지정하고 클래스를 통해 64px로 전환하면 됩니다. 전환 효과가 너비 변화를 부드럽게 애니메이션으로 보여 줍니다.

고정 위치 사이드바(position: fixed; left: 0; top: 0; height: 100vh)를 사용하려면 사이드바 너비만큼 주 콘텐츠를 오프셋해야 합니다. main { margin-left: 280px }을 사용하십시오. 모바일에서는 닫기 버튼과 배경 오버레이를 추가해 사이드바가 콘텐츠 위로 미끄러져 나오게 합니다.

탐색 사이드바에는 <nav>와 aria-label="Sidebar navigation"을 지정하십시오. 접을 수 있는 사이드바에는 aria-expanded와 aria-controls를 포함한 접근 가능한 전환 버튼이 필요합니다. 건너뛰기 링크를 사용하면 키보드 사용자가 사이드바를 건너뛰고 주 콘텐츠로 이동할 수 있습니다.

main에 flex: 1을 적용한 플렉스박스나 세 행으로 구성된 그리드를 사용하면 최소한의 CSS로 깔끔한 고정 푸터를 만들 수 있습니다. 사이드바 레이아웃은 고정 또는 유동적인 열 정의와 반응형 중단점을 사용해 모바일에서 접습니다. 고정 사이드바, 접을 수 있는 너비, 접근 가능한 ARIA 속성을 추가하면 실서비스에 사용할 수 있는 사이드바와 푸터 패턴이 완성됩니다.