gallery 따라 만들기

See the Pen gallery animation by ziziziczic (@ziziziczic) on CodePen.

---

아래 영상 강의를 보고 비슷하게 만들어 보았습니다.

자세한 내용은 영상을 참고하세요.

 

---

구현시 어려웠던 점.

1. button의 아웃라인을 초기화 하지 않아서 border가 계속 클릭시 마다 나왔다. 해결법 : button { outline:none; }

2. 코딩시 오타 주의 ! (시간 잡아먹는다.)

3. .gallery: before 와 after 의 위치 잡아주는 것. transform : translate(50%, 50%) 필요없다고 생각했다가 엉뚱한 곳에서 애니메이션이 시작됨.