디자인과 개발 (1) 썸네일형 리스트형 svg와 clip-path를 이용한 cliping mask 기능 만들기 회사에서 svg 영역안에서만 슬롯머신이 돌아가는 애니메이션이 보여지도록 하는 작업을 맡게 되었다. 온갖 영어로 된 문서들을 다 뒤져봐도 한눈에 잘 정리 된 페이지가 없어서 지난 일주일간 시행착오를 통해 내가 찾은 방법을 기록하고자 한다. 이 글을 보는 분들은 부디 나처럼 삽질하지 말고 쉽게 가세요... 작업에서 어려움을 겪었던 단계는 아래와 같다.(산 넘어 산이었다) 1. clip-path를 사용할 때 path()안에 넣어야 할 내용을 svg에서 어떻게 확인할 수 있는가? 2. 누끼가 따진 이미지의 크기를 어떻게 반응형으로 조절할 수 있을까? 3. 브라우저에 따라 되는 브라우저가 있고 안되는 브라우저가 있는데 어떻게 해결할 수 있을까? 총 세번의 산을 넘어서야 문제를 최종 해결할 수 있었다. 또한 3번 .. 이전 1 다음