1. 학습한 내용
animate.css (url : animate.style)
일종의 css 라이브러리로 여러가지 구현되는 animation source code들을 볼수 있다. animate css안에 이미 class 들이 지정되어 있어서 따로 일일이 HTML에다가 수동적으로 지정할 필요없이 가져다가 쓸수 있는 편리함이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>css
.animate__animated {
margin-top: 200px;
margin-left: 200px;
} 자세한 애니메이션의 라이브러리를 보려면
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css
접속시 여러 동작에 관한 css의 사항들을 볼 수가 있다.
codepen.io(코드펜)에서 animation을 검색시에도 여러가지 효과들을 확인할 수 있다.
java-script를 사용하지 않고도 좋은 effect들을 참고할수 있다.
2. 실습
어제했던 학습들을 반복하였다.
3. 어려웠던 내용 & 해결방법
animate.css나 codepen에 들어가서 다른 개발자들이 업로드 해놓은 것들을 직접 카피를 해서 여러 작업들을 해보았는데, 현재 기본개념만 익힌 상태여서 따로 독자적으로 어느정도 오류가 없는 애니메이션을 구현하기 위하여 시간이 필요 할 것 같았다.
4.소감
강의 분량이 20분 정도 밖에 되지 않아 애니메이션을 복습하는데 시간을 많이 할애 할 수 있었다. 확실한 것은 응용을 하는 경우의 수는 예술가들의 창작과 비슷한 경우의 수라는 것이다. 실질적으로 많이 사용하는 문법도 있지만, codepen을 보니까 종류가 많아서 실무에 갔을때에는 얼마나 잘 검색을 해서 적용을 하는지도 중요할 것 같다. 아쉬운점은 복습하느라 밤까지 계속 시간을 보내고 있는데 여러가지 폼을 가지고 응용을 해보고 싶다. 주말에는 꼭 여러가지 사이트들 폼을 적용하여 실습을 해보는 시간을 가져야겠다.
