CSS position:sticky로만 레이아웃 슬기롭게 만들기
프론트엔드 개발을 하다보면 javascript를 많이 사용하게 됩니다. 하지만 javascript를 너무 많이 사용하다 보면 코드가 복잡해 지기도 하고 퍼포먼스도 점점 떨어지는 것을 느끼게 됩니다. Affix 같은 기능을 구현하려면 부트스트랩같은 특정 프레임워크를 사용하거나 별도로 개발을 해야 했으나 CSS의 position:sticky를 이용하면 javascript를 전혀 사용하지 않고도 멋진 기능을 구현해 낼 수 있습니다.
sticky란 무엇인가?
sticky는 CSS의 Position의 속성으로 사용되어 집니다. Fixed가 브라우저 화면의 절대 위치를 사용하는 반면 Sticky는 부모 태그의 절대위치값을 사용하는 방법입니다. 그래서 반드시 Sticky의 상위에 부모 컨테이너가 존재해야 합니다.
position : fixed: 최상위 브라우저 창을 기준으로 절대 위치를 지정position : sticky: 부모 태그의 크기를 기준으로 절대 위치를 지정
sticky로 기본 레이아웃 구성하기
sticky를 여러용도로 사용할 수 있겠지만 아무래도 기본 레이아웃 구성에 가장 많이 쉽게 적용할 수 있을것 같습니다.
구현할 결과물
아래와 같이 화면을 스크롤 해 보면 부모의 컨테이너 안에서 고정되어 있다가 부모 컨테이너까지 밀리게 될경우 자연스럽게 sticky도 따라가는 것을 볼 수 있습니다.
HTML 구성
body영역에 해당되는 태그만 작성했습니다. 간단하죠?
<body> <div class="header">Header</div> <div class="container"> <div class="content">Main content</div> <div class="sidebar">Sticky Sidebar </div> </div> <div class="footer">Footer</div> </body>구조는 해더영역과 본문영역, 푸터영역으로 구분되어 집니다.
본문(container)영역은 컨텐츠가 나오는 content영역과 메뉴가 나오는 sidebar영역으로 되어 있습니다.
이제 나머지는 CSS만 가지고 구성할 수 있습니다.
html, body { margin: 0; } .header { height: 80px; background: burlywood; } .container { display: flex; //--> 레이아웃 지정 flex-flow: row nowrap; //--> container안의 자식 요소들을 가로로 펼쳐서 보여 줌 } .content { width: 80%; height: 800px; //--> 높이를 sidebar보다 높게 설정함 background: #f5f5f5; } .sidebar { width: 20%; height: 400px; //--> sticky가 적용될 요소는 꼭 height값이 있어야 함 position: sticky; top: 0; //--> sticky 상단의 offset 0으로 부터 적용됨 background: yellowgreen; } .footer { background: #333; height: 200px; }▲ 위와 같이 간단한 CSS의 sticky기능 만으로 멋진 Affix 레이아웃이 구성됩니다.
중요한 것은 sticky를 지정 할 때는 본문보다 height가 작아야 효과가 적용되는 모양을 볼 수 있고 꼭 퍼센트던지 px던지 높이값을 지정하는 것이 좋습니다.
top : 0이면 상위 부모 컨테이너(.container)의 가장 상단에서 부터 적용이 시작됩니다. 만약 top : 10px이면 부모 컨테이너의 상단 10px이후 부터 적용되어 집니다.
고려할 점
아무래도 IE가 문제 입니다. IE11이하 버전은 지원하지 않는 단점이 있습니다.
IE11이하는 폴리필을 사용하여 위회 적용해야 합니다. 엣지버전 이상부터 지원합니다. 크롬이나 사파리는 지원합니다.