오늘 학습한 내용
✅ Animate.css 사용법
✅ 코드펜 사용법
1. Animate.css
- https://animate.style/
- CSS 애니메이션 라이브러리
- 애니메이션 효과들이 이미 다 구현되어있는 css파일
- 추가적인 작업이 필요없다.
animate__animated, animate__bounce, animate__faster은 animate.css에서 다 정의되어있다.- css에서 먼저 지정을 하고 html 태그에다가 삽입하는 방식(역순방식)
👉 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>
<div class="animate__animated animate__shakeX animate__slow animate__delay-2s color-red">Example</div>
</body>
</html>👉 css
.color-red {
color: red;
}
.animate__animated {
margin-top: 200px;
margin-left: 200px;
}
2. 코드펜
- https://codepen.io/
- 다른 사람이 작업한 애니메이션을 확인하고 사용할 수 있다.
오늘의 학습 후기(어려웠던 점, 개선할 점)
오늘은 css 애니메이션 라이브러리 적용해서 사용하는 법을 배웠다. 많은 사람들이 만들어 놓은 css애니메이션 코드를 복사, 붙여넣기로 적용할 수 있다니 정말 좋은 세상에서 프로그래밍을 할 수 있음을 느낀다👏 그래도 라이브러리를 사용한다고 해도 나의 작업물에 맞춰서 커스텀하는 건 필수인 것 같다. 오늘 수업은 매우 짤막해서 어려웠던 점은 없었다. 그래서 어제 학습한 css애니메이션을 복습하고 animate.css로 여러 예시 실습을 해야겠다!🌟
하루하루 성장하는 것을 목표로 합니다🌟