![[라이브러리] 스크롤 애니메이션 효과 AOS 적용하기 (사용법, 옵션정리)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjlfMjUy/MDAxNzE0MzYwMDU0Nzcy.0dgKojYFXgPjvPF04BgXLM1MhPeLwABicGRpVentDY0g.aSrp8b8_AaFqpt7G_li0Q6eG3BDVZKQUAcZRapYDdpYg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4_-002.jpg?type=w2)
AOS 라이브러리란? animation On scroll 스크롤 애니메이션 효과 웹 페이지에서 사용자가 스크롤할 때 요소들이 애니메이션 효과와 함께 등장하도록 하는 라이브러리 (JavaScript를 기반으로 하며 쉽고 간단하게 CSS 애니메이션을 활용) AOS 효과 적용하는 방법 1.
AOS 사이트 접속 바로가기 2. 사이트 아래로 내려서 CDN 부분 css, js 파일 복사해서 내 html 파일에 붙여넣기
-- aos css cdn --> 3.
내가 효과 적용할 html 태그에 AOS 속성 넣기
fade-up 4. html에 body...
#
aos
#
스크롤애니메이션효과
#
스크롤애니메이션라이브러리
#
스크롤css애니메이션
#
css애니메이션스크롤효과
#
aos적용
#
aos사용법
#
aos라이브러리정리
#
aos라이브러리옵션
#
aos라이브러리
#
스크롤효과라이브러리
![[html 4.] html 목록 태그 작성하기 (ul, ol, li, 중첩 ul 구조 파악하기)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTVfMTgz/MDAxNzEzMTgwNjgyNTQ4.VYuGe1fiJ7cbrrv6FVcK-xdXQUoLfAx5nyjI0-SKsUkg.sX7W6dV_mEKPJ6m_q6yO1D1zjtv9yOaLlfcbngGYdecg.JPEG/%B8%F1%B7%CF.jpg?type=w2)
![[css 1.] css를 html에 적용시키는 방법 (시간 단축해서 css파일 만드는방법)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTdfMjQ1/MDAxNzEzMzI2MzIzMjM0.Vfmn5gPqRkIde1h7uX0P30C2_7-cPpCHE4XyirYTtkkg.IhqMmfn4tmCCywnxRoTuqvhBVUT6AzVN1W77dVCOyn8g.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-011_%281%29.jpg?type=w2)
![[css 4.] 웹폰트 적용하기](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MThfODYg/MDAxNzEzNDMyMDU4ODc4.Gat7lEMPDHbg5pi9mncKTQT2GCNzopnBrEpWMoarqFIg.RHn6uVsbuaP0z0YoPISptKEDlaeQdiv4c6vCaGG7wbwg.JPEG/014.jpg?type=w2)
![[css 6.] 박스모델 - content, padding, border, margin](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjBfNTkg/MDAxNzEzNTQyMDg5MDQ1.aOENkvcn3qtoG_BNGyL9C-dHrxUgLQLeWc8usukwH1wg.AbAfdsKeMal48g4Fak6_HFWT7VXBGSlY1tWcj821NoMg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-016_%281%29.jpg?type=w2)
![[css 14.] grid 사용하여 레이아웃 배치하기 (사용법, 부모-자식 속성 정리)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjZfNjkg/MDAxNzE0MDYzMjA0MDI2.olZ4Vj0_h9Ei4O6gAoas_82gtn7m4ZbhE5KZ3HIhb4gg.wPw_Hgbb9nvUkbULomF1MtK7Pp3YOJ2pgCtyhxm0DgEg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-025.jpg?type=w2)
![[jQuery 4.] jquery 효과(effects)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MTVfMjY5/MDAxNzE1NzQyOTA1NTcw.Md9yVfjpLRdIzv2j5mcJSCHoks-U9dChDD5pCqh_iW8g.7SePsrTZarFCWCca5UEh5N9pWmppDJ82kRdNAlCdlewg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-008.jpg?type=w2)