[1106] 서치라이트 30일차

1. Today's Tasks

• KAN-207 - FE 랜딩 리뉴얼 - 블로그 화면 시작
• 6번째 블로그 업로드

2. Learnings and Questions

sticky

sticky 속성 뭔지 대충만 알고 몰랐던 속성. 이번에 블로그 목차를 구현하면서 제대로 알고 사용해봤다!

position: sticky;
top: 100px;

sticky는 처음에는 relative 속성처럼 동작하다가,
스크롤을 해서 요소가 보이는 순간 viewport의 위에서부터 100px 위치에 고정된다.
그리고 부모 요소가 사라지면 요소도 같이 사라진다.

sticky 작동 조건

• 부모 컨텐츠에 height가 정해져 있어야 sticky가 작동한다.
• 부모 요소가 스크롤 가능해야 한다.
• 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다.
• Internet Explorer 에서는 작동하지 않는다.

참고자료

position : sticky 활용하기 | gil0127 | velog
position sticky 속성 사용법 총정리 (sticky 적용이 안된다고? 내가 도와줌) | shadesign | Tistory

3. Plan for Tomorrow

• KAN-207 - FE 랜딩 리뉴얼 - 블로그 화면
• KAN-214 - 3차 피드백 반영