[CSS] 스크롤 따라다니는 사이드 바 만들기 (display: sticky)

요 사이트를 만들 때 사용한 CSS를 몇가지 정리해두는 글을 쓴다!! 적용하면서 블로그에도 메뉴바가 같이 따라내려오면 그럴싸할 것 같아서 똑같은 방법으로 적용했다!ㅎㅎ 공식 문서는 아래를 참조!!

position - CSS: Cascading Style Sheets | MDN

CSS에서 블록요소에 포지션을 정하는 것은 너무도 간단한 일이다. 다만 여러가지 요소들이 겹쳐질때 한 자식요소가 다른 요소의 부모요소가 되는 부분이 많으면 많을 수록 각 요소의 최종적인 위치를 감안하기 힘들기 때문에 여러 요소에 사용하는 것을 좋아하지는 않는다.

position: static | relative | absolute | sticky | fixed 이렇게 다섯가지 값을 정할 수 있다.

• static은 모든 요소의 기본적인 속성이라 따로 지정할 일은 없는 속성이다. 일반적인 문서의 흐름에 따라 자리를 차지한다. top | right | left | bottom | z-index 속성에 영향을 받지 않는다.
• relative
  아무런 값(top | right | left | bottom | z-index 속성)을 주지 않으면static과 똑같은 "공간"을 유지하는 속성이지만, 대신 absolute 속성을 가진 요소의 이동 기준점이 되는 속성이다. 일반적으로 정렬이 되어 있는 div 속성 중에 하나의 div에 relative: relative; top: 10px; left: 10px;을 준다면, 나머지 요소들은 그 div가 어디로 가든 말든 "제자리에 있는 것처럼" 똑같은 위치에 자리하고, relative한 div만 위를 기준을 10픽셀 아래로, 왼쪽을 기준으로 오른쪽으로 10px을 이동한 형태가 된다.
• absolute
  속성이 지정된 요소를 일반적인 문서 흐름에서 제거하고, 원래 차지했어야 할 레이아웃 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소(relative한)에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 (최상위) 컨테이너 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다. z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 
• fixed
  속성이 지정된 요소를 일반적인 문서 흐름에서 제거하고, 원래 차지했어야 할 레이아웃 공간도 배정하지 않습니다. 대신 뷰포트가 처음 나타났을 때의 화면을 기준으로 삼아 자리를 잡습니다. 단, 요소의 부모+조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 가지면 대신 그 조상 요소를 기준 컨테이너 블록으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다. 스크롤을 해도 항상 같은 위치에 위치해, 최상단으로 올라가는 버튼이나 고객상담용 채팅창 등을 구현할 때 사용합니다. 페이지를 인쇄할 경우 모든 페이지에 걸쳐 인쇄됩니다.
• sticky
  요소를 초기에는 일반적인 문서 흐름에 따라 배치하고, 가장 가까운, 스크롤이 가능한 조상(없을 경우 최상단 컨테이너)을 기준으로 top, right, bottom, left의 값에 따라 위치를 적용합니다. 다른 요소에는 영향을 주지 않습니다. 이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 "스크롤 동작"이 존재하는(overflow 속성을 가진) 가장 가까운 조상에 달라 붙어 함께 스크롤 되며, 스크롤 전에는 처음 지정해준 장소에 위치하지만 스크롤을 따라 지정 위치를 벗어나면 top, right, bottom, left 값에 따라 이동합니다. 다시 스크롤을 원위치하면 원래 위치로 돌아갑니다.

이 중 sticky 값을 티스토리 블로그나 웹페이지의 사이드바 메뉴에 적용하면 해당 요소는 스크롤로 자기 자리를 벗어나는 순간 함께 스크롤된다. 일례로 오른쪽 사이드바에 광고메뉴나 같은 블로그 내 인기글 등이 있는데 이렇게 스크롤이 끝까지 따라온다면, 사용자는 글을 다 본 후에도 그 사이드바 중에 어떤 곳에 흥미가 생길 수 있다. 구글 애드센스는 최근까지 이러한 광고 배치를 위반 사유로 정했었지만, 최근에 그 문구가 빠진데다, 광고의 효과도 실질적으로 꽤나 상승하는 편이니 수익성 블로그를 목표로 한다면 적용해 보는 것이 좋겠다.

#aside {
    position: sticky;
    top: 100px;
    right: 300px;
}

/* 스크롤따라 움직임 */

예시로 든 #aside는 html 태그 중 id(특정 한 요소만을 지칭하기 위해 사용되는 속성) 값으로 id="aside"를 주었다는 뜻이다. 내 블로그에서 사용한 북클럽 테마를 포함해, 많은 티스토리 스킨에 똑같이 적용되는 아이디인데, 이것이 마음에 들지 않는다면, Ctrl + Shift + C 키를 눌러 개발자도구에서 사이드바의 id 값을 읽고, 스킨편집에서 그대로 css에 적용하면 좋다. 단 css는 같은 요소에 다른 속성들을 적용할 경우 가장 아래에 있거나 !important가 있는 태그에 달린 속성, 또 div#aside 이런 식으로 최대한 구체적인 선택자를 명시할 수록 우선적으로 속성을 적용한다. 그러니 스킨편집의 css 탭에서 Ctril + F 를 눌러 side를 검색해서 나오는 값들 중 아래의 것부터 position을 sticky로 바꿔나가다보면 딱 적용되는 순간이 있을 것이다. 세부적인 위치는 위의 예시처럼 top, right, left 등으로 조절하는 것이 깔끔하다. 언제까지나 구글님이 허락해주는 동안만이다....하핳