요약
이 글은 스크롤이 가능한 요소의 가장자리를 자연스럽게 페이드(투명하게) 처리하는 최신 CSS 기법을 소개합니다. 기존에는 그림자와 배경 그라데이션, 또는 pseudo-element와 애니메이션 범위를 이용했지만, 여기서는 CSS mask와 커스텀 프로퍼티(@property), 그리고 animation-timeline을 사용해 스크롤 위치에 따라 가장자리 페이드 효과를 구현합니다. 이 방식은 요소의 배경색과 무관하게 적용 가능하며, 그림자 대신 부드러운 페이드 효과로 깔끔한 UI를 제공합니다. 자바스크립트 없이 CSS 만으로 구현 가능하며, 일부 브라우저(사파리)에서는 아직 지원이 제한적이지만, 지원되지 않을 때도 문제없이 동작합니다. 최신 CSS의 강력한 기능을 활용하는 좋은 사례입니다.