1) 학습한 내용
1.애니메이션 css 라이브러리
참고사이트 !
https://animate.style/
저기 사이트에 들어가보면, 많은 애니메이션 효과들이 있다.
먼저 해야 할 것은 html에 저사이트에서 나는 css라이브러리를 가지고 오겠다는 링크를 연결 시켜야한다.
-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"/>
<!-- 애니메이션 라이브러리 패키지
:애니메이트css는 이러한 애니메이션 효과가 이미 다 구현 되어있는 css 파일
-이미 있는 클래스들을 html에 입력만 하면 바로 애니메이션 효과가 적용 됨!-->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>그리고 사이트에들어가 원하는 효과를 가지고 오면된다.
빨간부분으로 표신 된 부분에서 적용 시켜 파란색부분에서 어떤효과가 나타나는지 미리 확인 하고
가지고 오고싶으면, 원하는 부분에 화살표 표시가 있는 걸 클릭을 하면 복사가 된다.
그리고 html에 있는 코드에 붙여넣으면 된다.
<!-- 역순으로 css에서 class 를 저장해놓고 html에 쓰는 방식 -->
<!-- <div class="animate__animated animate__bounce animate__slow animate__delay-2s color-red">Example</div> -->
<!-- <div class="animate__animated animate__bounce animate__faster color-red">Example</div> -->
<!-- <div class="animate__animated animate__shakeX animate__slow ">Example</div> -->
<!-- <div class="animate__animated animate__backInDown animate__fast color-red">Example</div> -->
<h2 class="color-red">Hello</h2>
</body>
</html>많은 효과들이 있으니 하나씩 적용해보는 재미가 있다.
또
에 들어 가보면 저 웹사이트의 csss파일 구조를 참고 할 수 있다
- codepen
이 사이트는 다른 사람들이 이미 구현해놓은 여러가지 애니메이션들을 볼 수있다.
아주 다양한 것들이 css,js 들로 만들어 놓아져 있어서 다양한 애니메이션들을 경험할 수 있다.
2) 학습내용 중 어려웠던 점 및 해결방법
오늘은 실습보다는 이미 구현되어져 있는 css 코드들을 html로 가져와서
실현해 보는 것이라 딱히 어려웠던 점들은 없었던것 같다.
하지만 앞으로 표현하고 싶은 애니메이션들을 이러한 사이트들을 참고하여 하면 큰 도움이 될것같다.
또 아주 많은 기능들로 인해 정말 디테일하고 현실적으로 표현이 가능할 것 같다.
3) 학습소감
오늘은 지금까지의 동영상 강의중 제일 짧고 정보위주의 강의 였던 것 같다.
그래서 다양향 애니메이션을 여유롭게 볼 수 있었고, 이전시간에 배웠던 transform에 대해서도 다시 한번 공부할 수있는 시간이 있어서 좋았다.
배울 수록 뭔가 간단하게 움직임을 표현하는것 같으면서도 아닌 것 같기도한 그런 느낌..ㅎㅎ
또 요즘 처음부터 다시 강의를 돌려보고 있는데, 이전에 들었을때의 강의보다 조금 더 이해가 잘 되는 느낌이다. 그 당시에는 몰랐던 것들이 이제는 조금 알고서 다시 들으니 그당시는 조금씩 놓쳤던 부분도 다시 알게되고 조금 더 새롭게 다가오는 느낌도 받는다.
앞으로도 배우면서 계속 중간중간 다시 들어보는 시간을 가져야겠다.
힘들면서도 재미있는 이 느낌 뭘까..?
이번주도 끝까지 뽜이팅 :)
