오늘의 강의 내용

1.Animate.css

<!-- html언어 -->
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

Animate.css를 사용하기 위해서는 사이트와 연동이 되어있어야 하는데 위 소스코드의 link 태그를 이용하여 연동시켜준다.
이 방법은 CDN을 사용하여 웹 페이지에 직접 추가하는방식이다.

• https://animate.style/ 이 사이트 Animate.css는 다양한 종류의 animation 효과들의 css파일 집합체이다. 여기서 이미 만들어져 있는 효과들을 복사/붙여넣기로 쉽게 사용할수 있다.

• animation 효과들이 다양하게 구현되어 있는 css파일

• 반복적으로 자주 사용하는 animation 효과들은 Animate.css같은 파일들을 연동해서 사용하면 수월하다.

<!-- html언어 -->
<div class="animate__animated animate__bounce animate__slow">Example</div>

• 위 소스코드 html언어의 animate__animated는 이제부터
  Animate.css파일에서 존재 하는 class를 쓸거라는 명시같은것

• animate__bounce는 animation의 종류를 나타내고있다.

• https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
  위에 href로 가져왔던 링크로서 '.min'부분을 빼고 브라우저로 접속해 보면,
  
  이렇게 이미 웹상에 존재하고 있던 Animate.css 파일안에 구조를 확인할수 있다. animation 효과 들이 이미 다 정리 되어있어
  이 class들을 html에다 가져다 쓰는것 뿐이다.

• 다양한 다른 사람들이 만들어 놓은 animation효과들을 참고하고싶다면 codpen에 접속하여
  
  이런식으로 animation을 검색하하여 필요한 animation을 찾아볼수 있다.
  
  필요한 animation효과를 찾아 소스코드를 복사/붙여넣기로 이용할수있다.

강의를 마치고 난뒤 소감

어제의 강의 의 연속성으로서 다양한 애니메이션 효과들은 좀더 쉽게 사용할수 있는 방법에 대한 내용이였다.
내 생각보다 더 다양한 효과들이 있었고, 쓰임에 있어 굉장히 친절히 알려주는 느낌이 강했다. 이것이 프로그래머들의 유대감인가 하는 생각을 하였다ㅎㅎ. 아직은 워낙 종류도 많고 비슷한 역할을 하는 속성값들이 많아 익숙해질려면 많은 노력이 필요하겠다는 생각이 들었다.