슬라이드 배너1 [jQuery] 반응형 슬라이드 배너 만들기 슬라이드 배너를 구현하던 중 반응형 UI를 적용하기 위해 여러가지 방법을 시도했지만, 창의 크기 변화에 즉각적으로 반응하도록 구현하는 것이 쉽지 않았다. 해결을 위해 서치를 하던 중 좋은 방법을 찾았는데, 바로 css animation keyframe을 이용하는 방법이다. @keyframes을 이용해 진행율 별 animation을 다르게 지정한다. 전체를 10초 동안 진행하되 무한반복 옵션에서(10s infinite) 배너로 추가할 이미지가 4개인 경우, 이미지를 2초동안 보여주며, 다음 이미지로 넘어가는 시간은 0.5초로 잡을 수 있다. 이 경우, 0%~20% margin-left:0 [이미지 1을 2초간 보여준다.] 20%~25% margin-left:-100% [이미지 1에서 2로 넘어간다(0.5초.. 2021. 10. 8. 이전 1 다음 반응형
