CSS - Position:sticky 로 스티키 사이드 메뉴 만들기

들어가기 전에 요즘은 CSS와 자바스크립트 등을 통한 모던하고 깔끔한 UI의 웹 페이지가 정말 많이 보입니다. 그리고 어떤 페이지는 좌측 또는 우측에 메뉴 영역, 또는 타이틀 영역이 존재하면서 반대 쪽에는 컨텐츠가 존재하고, 페이지를 스크롤할 때 사이드 영역만 고정이 되고 컨텐츠 영역만 스크롤이 되어 컨텐츠의 집중도를 올려주는 페이지도 드물지 않게 볼 수 있습니다. 이런 형태로 페이지를 만들면 '특정 영역까지만 스크롤을 했을 때 좌/우측 중 하나는 고정' 이 되는 인터랙션을 주어 보다 덜 심심하게, 더 재밌어보이게 웹페이지를 구성할 수 있습니다. 통상적으로 일정 부분까지 스크롤을 했을 때 특정 영역이 뷰포트 화면 내에 고정되는 것을 스티키(sticky)라고 부르고 있습니다. 우리는 그래서 이를 이용한 '..

원문링크 : CSS - Position:sticky 로 스티키 사이드 메뉴 만들기