✔ TODAY
오늘은 css animation에 대해 몇 가지 팁을 알았다.
✔ 학습한 내용
animate
animate
반복되고 자주사용하는 css 애니메이션 코드를 받을 수 있는 곳.
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>head부분에 링크태그를 걸어 해당 코드를 작성한다.
그럼 웹사이트에 있던 css파일을 링크형태로 연동할 수 가 있다.
이때 까지 배운방법과 역순으로
css에서 클래스를 작성(클래스에 적용할 css속성을 만듬) 다음 해당 클래스의 효과를 넣고 싶은 html태그안에 클래스를 넣어 효과를 본다.
이와 같은 원리로 해당 사이트의 css animation효과를 사용하는 것이다.
<div class="animate__animated animate__rubberBand animate__faster">Example</div>하나의 태그에 여러 가지의 클래스를 적용할 수 있다는 것을 기억하자!
(반대로 id를 한 문서에 한 개!)
: 가져온css문서를 적용하겠다고 명시하는 것.'animate__animated'
: ###부분에 원하는 애니메이션 효과를 넣는다.(링크걸어둔 사이트 상단에 카피할 수 있음)animate__###
:"animate__###"
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster속도를 조절할 수 있다.
' animate__delay-2s'
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s자동으로 바로 실행하는 것이 아닌 정해진 시간의 텀주어 실행 하게] 할 수 있다.
codepen
codepen
간단한 효과보다 좀 더 다양한 애니메이션 코드를 보고 싶다면 코드펜의 사이트를 참조하는 것이 좋다.
다른 개발자들이 개발한 코드를 올려놓는 곳이다.
원하는 효과를 찾아 코드를 쓸 수 가 있다.
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
- 오늘은 간단한 팁설명이라 어려운 것이 없었다.
- 간단한거라 개발일지를 어떻게 작성할지가 더 고민이였다...
✔ 해결방법작성
- 없음.
✔ 학습 소감
다양한 개발자들의 도움으로 발전을 이루는 구조가 너무 신기했다. 그리고 코드펜에 올라온 코드를 보면서 html과 css만으도 훌륭한 효과를 나타나는 것을 보고... 역시 세상은 넓고 천재와 금손이 많다는 것를 느꼇다...
잘하고, 잘하고 싶고, 잘해야되는 사람