트랜지션과 애니메이션 4 - 단원 정리 및 마무리 문제 풀기

이제 단원 정리를 하고 마무리 문제 두 문제를 풀어보려고 한다. 

---

 

 

 

한눈에 정리하기

 

 

 

 

 

---

 

 

 

 

마무리 문제

 

문제 1번

 

 

 

지금은 색이 한 번에 바뀌지만 서서히 바뀌도록 애니메이션을 적용할 것이다.

---

 

 

 

문제 풀기

 

가끔 책 코드가 잘못된 것을 발견하는데 이번에도 그랬다. 정답 코드로 실행하면 아무런 표시가 뜨지 않는다. 그 이유는 li를 Li로 표시했기 때문이다.

 

이제 배경색이 서서히 바뀌고 있다. 동영상으로 보여줄 수 없어서 확인은 어렵지만 잘 수정되었다.

---

 

 

 

 

문제 2번

 

 

 

 

 

---

 

 

 

문제 풀기

 

 

x축으로 잘못 설정했더니 곰돌이가 위아래로 회전하고 있다. 코드를 수정해 볼 것이다.

---

 

 

 

코드 다시 수정하기

 

 

 

이제 애니메이션이 잘 돌아간다. 

 

---

 

 

 

학습을 마치고

문제를 모두 잘 풀었다. 문제를 풀고 나니 트랜지션과 애니메이션에 대해 더 잘 이해가 되었다. 이제 조금 쉬었다가 반응형 웹에 대해서 공부해 볼 것이다.

애니메이션 문제는 동영상으로 촬영을 하면 좋은데 아직은 이런 부분까지는 잘 모르니 사진을 캡처하는 것으로 만족해야겠다.