캐러셀 구현
리액트 슬릭 라이브러리를 이용해서, 아래와 같은 슬라이더를 구현해야 했다.
태블릿 이미지 뒤에 캐러셀이 들어가야 이미지가 자연스럽게 태블릿에서 넘어가는 것처럼 보일텐데,
생각해보니 이미지 뒤에 캐러셀을 배치하면 마우스나 손가락으로 직접 슬라이드를 넘기는 스와이프는 어떻게 해야하지? 고민에 빠졌다.
- 캐러셀을 태블릿 앞에 띄우고 배경을 뒤에 띄운 뒤, 슬라이드 컨텐츠의 width를 배경이미지와 비슷하게 줘서 마치 뒤에 있는것처럼?
- 직접 시도해보니 너무 부자연스러웠다. 그리고 넘어갈때 경계선 부분의 round 처리도 까다로웠다.
많은 시도를 해봤지만, 실제로 태블릿에서 이미지를 넘기는것처럼 보이려면 무조건 태블릿 이미지가 앞, 캐러셀이 뒤에 있는게 맞았다.
뒤에 있는 element 클릭은 어떻게?
태블릿의 z-index를 더 높게 줘서 앞으로 띄운 뒤, 태블릿 이미지 클릭 이벤트를 무시하는 방법은 없을까? 생각했다.
이벤트 버블링 / 캡처링
- 이벤트 버블링 : 요소에서 발생한 이벤트가 해당 요소의 부모 요소로 전파되는 방식
- 이벤트 캡처링 : 버블링과 반대로 이벤트가 계층 구조의 최상위 요소에서 시작하여 하위 요소로 전파되는 방식
이벤트 캡처링을 이용해서, 최상위 요소인 '태블릿' 이미지의 클릭 이벤트를 막고 그 뒤에 슬라이드가 스와이프 되도록 하면 되겠다는 생각을 했지만,
알고보니.. 훨씬 더 간단한 방법이 있었다.
CSS pointer-event 속성
pointer-events: none;css의 속성 단 한줄로.. 태블릿 이미지 클릭 이벤트를 제어하여 태블릿 바로 뒤의 슬라이드를 직접 클릭해 스와이프할 수 있었다.
none : 포인터 이벤트의 대상이 아니다. 즉, 모든 클릭이나 호버 등 마우스 커서 옵션들을 비활성화 시킨다.
MDN Pointer-events
반대로 생각하면, z-index를 여기저기 줘가며 요소를 앞으로 보냈다 뒤로 보냈다 할 필요 없이 필요할 때 이 속성을 유용하게 활용할 수 있을 것 같았다.
css 공부 열심히 해야겠다.. ^^
남는건 기록뿐👩🏻💻