🌱 기초 프론트엔드
CSS에서 sticky란?
쉽게 이해하기
노트에 포스트잇을 붙였는데, 페이지를 넘기다가 포스트잇이 나타나면 그때부터 손가락에 붙어서 따라오는 것 같아요. 그러다가 페이지를 다 넘기면 다시 떨어지고요.
핵심 정리
스크롤하다가 특정 위치에 도달하면 화면에 달라붙는 요소예요.
자세히 알아보기
position: sticky는 relative와 fixed의 중간 형태예요. 평소에는 일반 요소처럼 문서 흐름에 따라 배치되다가, 스크롤해서 지정한 위치에 도달하면 fixed처럼 화면에 고정돼요. 그리고 부모 요소를 벗어나면 다시 일반 흐름으로 돌아가요.
사용하려면 top, bottom, left, right 중 최소 하나는 꼭 지정해야 해요. 예를 들어 top: 0;이면 '스크롤해서 요소가 화면 상단에 닿으면 그때부터 고정'이라는 뜻이에요. 만약 top을 지정하지 않으면 sticky가 작동하지 않아요.
실무에서는 테이블 헤더, 섹션 제목, 사이드바 메뉴 등을 만들 때 유용해요. 예를 들어 긴 표에서 컬럼 이름이 항상 보이게 하려면 thead { position: sticky; top: 0; background: white; }처럼 쓰면 돼요. 또 상품 목록 페이지에서 카테고리 제목이 스크롤하다가 상단에 붙어 있으면 사용자가 지금 어느 카테고리를 보는지 알기 쉬워요.
sticky는 부모 요소의 범위 안에서만 동작한다는 게 중요해요. 부모 요소가 화면 밖으로 나가면 sticky 요소도 따라서 사라져요. 그리고 부모에 overflow: hidden 같은 속성이 있으면 sticky가 작동하지 않을 수 있으니 주의해야 해요. 비교적 최신 기능이라 오래된 브라우저에서는 지원하지 않을 수도 있어요.