HTML 문서에서 각 구성 항목은 기본적으로 문서의 흐름에 따라 순서대로 배치됩니다. 하지만, 속성 position을 설정하면 기본 배치를 벗어나 위치를 조정하거나, 문서의 흐름과 무관한 특정 위치에 항목을 배치할 수 있습니다.
Position 속성의 설정값 중 sticky는 ① 기본적으로 문서의 흐름에 따라 항목을 배치하되 ② 스크롤 발생시 스크롤 매커니즘을 갖는 가장 가까운 상위 항목을 기준으로 위치가 조정됩니다. 글로 쓰니 복잡해 보이는데, 실 예제를 살펴보면 이해하기 쉬울 것 같습니다. 빠르게 작동 방식을 확인하고 싶다면, 다음 문서의 Try it을 참고하세요.
https://developer.mozilla.org/en-US/docs/Web/CSS/
여기서는 사이드바를 화면에 고정하는 예제를 살펴보겠습니다.
사이드바 고정 예제
사용할 예제는 좌측에 본문, 우측에 사이드바가 위치하는 문서입니다. 우측 사이드바의 position을 sticky로 설정하여, ① 기본적으로 문서의 흐름에 따라 배치되지만, ② 스크롤해도 사이드바가 사라지지 않고 화면에 남아 있도록 하겠습니다.
기본 화면 구성
우선, 전체 화면을 구성하는 주요 코드입니다. 색상과 폭 등 부차적인 내용은 포함하지 않은 기본 뼈대입니다. 사이드바 고정 코드도 들어가지 않았습니다. 참고용 코드로, 특별한건 없는 부분이니 sticky 관련 부분만 원하면 넘어가세요.
// 최상단 'Narrative Dream'
.top {
position: fixed; top:0; left:0;
height: 50px;
}
// 좌측 본문
.article { display: inline-block; }
// 우측 사이드바
.side {
float: right;
}<div class="top">Narrative Dream</div>
<div>
<div class="header">[CSS] Flexible Box Layout</div>
<div class="article"> ... </div>
<div class="side">
<p class="sub-title">카테고리</p>
......
</div>
</div>sticky 설정
사이드바를 고정하기 위해 추가할 부분입니다.
.side {
position: sticky;
top: 50px;
}① 사이드바 부분(.side)의 position을 sticky로 설정하고, ② 오프셋(offset)으로는 위쪽(top) 50px을 지정했습니다. 이게 전부입니다. 간단하죠? 결과는 다음과 같습니다.
작동 방식
앞에서 말한대로, sticky 설정시 오프셋 기준은 '스크롤 매커니즘을 가진 가장 가까운 상위 항목'입니다. 이 예제에서는 달리 스크롤 매커니즘을 가진 항목이 없으니, body가 기준이 되겠네요. 정확히는 body의 스크롤 뷰, 즉 표시 영역을 기준으로 하게 됩니다.
결과적으로 문서를 불러오면 일반적인 문서의 흐름에 따라 위치가 정해지고, 스크롤하면 일정량 이동하지만, 상측 오프셋 50px 기준에 도달하면 고정되어 화면 밖으로 나가지 않게 됩니다. 엄밀하게는 고정된다기보다는 기준점에 걸리는 형태에 가까울 것 같습니다.
덤: fixed
문서 최상단의 'Narrative Dream' 부분(.top)은 position이 fixed로 설정되어 있습니다. 이 영역도 고정이라 스크롤해도 사라지지 않습니다. 기본 동작은 문서의 특정 위치에 항목을 배치하는 absolute와 비슷한데, fixed의 경우 뷰포트(viewport)를 기준으로 한다는 차이가 있습니다.
화면에 항상 사이드바를 표시하기 위해서, sticky가 아닌 fixed를 사용해도 무방합니다. 경우에 따라서는 fixed쪽이 더 명확하고 적절할 수 있으니 필요에 따라 사용하세요.
참고자료
