sticky는 css의 Position 속성 값 중 하나입니다. 그리고 그 외 속성값으로는 relative, absolute, fixed가 있습니다.
sticky 속성은 웹에서 다양하게 쓰일 수 있습니다. 가장 많이 사용되는 건 웹 페이지 스크롤 시 상단 메뉴바를 고정하기, 테이블의 특정 컬럼 고정하기 등.. 다양하게 쓰일 수 있습니다.
해볼 간단한 예제는 테이블에서 특정 <td> 를 고정하는 것입니다.
위 테이블에서 No, Title 열만 고정되도록 합니다. 나머지 열은 스크롤시 왼쪽으로 넘어가게 됩니다.
[CSS]
중요 포인트3
1. 당영히 position 의 속성값 sticky 설정.
2. sticky 로 지정할 <th> , <td> 선택자를 명시.
- th: first-child : th 중 첫번쪠 요소
- td: first-child : td 중 첫번째 요소
- th: nth-child(2) : th 중 두번째 요소
- td: nth-child(2) : td 중 두번째 요소
3. 마지막으로 중요한 left의 위치 값입니다. 이 값을 제대로 지정해주지 않으면 스크롤시 css 깨질 수 있습니다.
간단합니다. 첫번째는 당연히 0이고 두번째는 첫번째 td 의 width 만큼으로 잡아주면 됩니다.