[CSS] backdrop-filter

앞으로 새롭게 알게된 css 내용을 간단하게 기록해보고자 한다. (잘할지 모르겠지만...🫠)

해결해야하는 이슈들 중에 아래와 같은 상황인 이슈가 있었음👇🏼

1. < div > 태그에 onClick 이벤트(클릭하면 < div > backgroundColor가 변경됨)를 준 컴포넌트들이 가로 스크롤 < div >에 여러개 있음
2. 가로 스크롤 외부에 세로 스크롤이 있음
3. 색이 변경된 컴포넌트들이 세로 스크롤을 할 시, 뿅하고 사라지거나 깜박이는 현상 발생

나는 이게 렌더링 이슈라고 생각했었다.🤣

해당 컴포넌트 개발자의 수정 커밋 리뷰를 해보니 "backdrop-filter" 속성이 없어 생긴 css 문제였다는걸 알게됨

구래서 지금 이 포스팅을 쓰는겨!

찾아보니 "backdrop-filter"는 해당 요소의 backdrop에 효과를 줄 수 있는 기능이다.(해당 요소에 주는게 아니라 " 배경 "에!!)

많은 효과들이 있었는데 url, blur, invert 등... 코드로 효과 보는게 제일 쉽고 빠를듯
(CSS 코드는 https://shynaunum.tistory.com/38 참고함!)

이렇게 많은 기능들이 있다.

만들고싶은 작업에 넣어봐야징