AOS, animate (라이브러리)

AOS (라이브러리) 사용법

AOS.init();

• 딜레마

1. 이미지 로딩 전에 애니메이션 실행됨
   -> setTimeout으로 해결
2. 이미지가 더 빨리 로드되었을 때 애니메이션이 위에 있으면 실행이 안됨
   -> imagesLoded 사용
3. 인터넷이 느릴 때 흰 화면밖에 안 보임
   -> Loading 화면 만들어서 해결

animate (라이브러리) 사용법

1. CDN 검색 후 라이브러리 복붙
2. 밑에 있는 코드 복붙

<h1 class="animate__animated animate__bounce">An animated element</h1>

3. animate__bounce 부분 원하는 효과로 변경

---

모작 과제

1. header / main / footer
2. main section 나누기 (9개)
3. head에 라이브러리 태그 마지막에 넣기 (주석 필수) / css, js(defter) 연동
4. header / main > section*9 / footer
5. 젠코딩 - ctrl + space bar
6. head 안 title 이름 변경
7. main에 margin-top : header height값 넣기
8. 폰트 불러오기 : 눈누에서 웹폰트 복붙 ( 맨 위에 ), 400/500/700 보통 3개 사용함
9. 폰트적용 : html, html > body, html > body input { font-family : ~ }
   사용된 폰트 - Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif;
10. work/images 파일 만들어서 이미지 저장. img ctrl+space bar 경로찾기

파일명은 모두 영어로