MixItUp 이란? 웹 페이지에서 필터링, 정렬을 위한 자바스크립트 라이브러리 MixItUp 라이브러리 가져오기 첫번째 방법) cdn 링크로 html head 에 붙여넣기 바로가기 - mixitup cdn 사이트 접속하여 코드 복사하기 두번째 방법) 다운로드 받아서 파일 추가하기 바로가기 - mixitup 사이트 접속해서 download 받아서 압축 풀고 dist → js 파일 폴더에 넣고 연결시키기 MixItUp 작성하는 방법 html 목록 (버튼들) filter (해당 버튼 클릭하면 해당하는 것만 나오도록 하는 부분) - all 을 제외한 나머지는 data-filter 값에 .
붙이기 - category부분은 내가 변경하여 사용 가능 so...
![[라이브러리] mixitup 사용하여 정렬하기 (효과)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MzFfOTQg/MDAxNzE3MTQ0NjY4Mzc1.i_l-nobn75dgAxr3hqLD8aLZuQUYQxP33yrNAfmZABAg.ftVcmZGDBied7MZQLMef3v7N5bVqY-QdHdp0ksXTCVYg.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4_-007.jpg?type=w2)
#
js라이브러리
#
탭메뉴라이브러리
#
정렬js라이브러리
#
tab라이브러리
#
mixitup효과
#
mixitup애니메이션
#
mixitup라이브러리
#
mixitupcdn
#
mixitup
#
필터링라이브러리
원문 링크 : [라이브러리] mixitup 사용하여 정렬하기 (효과)
![[GTQi 일러스트] 자격증 합격기준 & 기출문제](https://mblogthumb-phinf.pstatic.net/MjAyNDAzMjVfMTc2/MDAxNzExMzYzNDc0MjI1.2wxgdeFZJ9Ss8XbmAtxTRP9m-aQJU7zWV4NAuPn-eYgg.Lv28j2gJYx1DQzojF8BpmSmLCgdk0kvwrujpZKedmJsg.JPEG/%C0%CF%B7%AF%BD%BA%C6%AE.jpg?type=w2)
![[html 5.] html 표 만들기 (table 구조 파악하기)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTVfMjU0/MDAxNzEzMTg4NDI4NTYz.UEeTe1fP8FrY8vdE6a6DLpPyHR1LSxMp7441cF2Oma8g.tNbrY71G8VmdsjTR0WppohafdjM0qFPndMNcLeJ_moEg.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-009.jpg?type=w2)
![[라이브러리] 스크롤 애니메이션 효과 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)
![[css 효과2.] text stroke, gradient, 텍스트 말줄임](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTJfNiAg/MDAxNzE4MTgwMTA4NDI2.qGxn8MdjzyBROdNDhsBDaC01zUlyzgymiFj6IS8sz_Ag.qrhawKcxqT0bBaYaXdcC53um0LpEbXb5iZ1LE0C36ckg.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-028.jpg?type=w2)
![[css 효과3.] scrollbar 스크롤바 색깔 변경, 커스텀](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTNfMTA3/MDAxNzE4MjY4NTA3Njcx.KSJ7gPcPqpr-OwJinavhxKq476CDi0HQgVL_-a1ZnFcg.WLKqaFy3vVEi9RNqKPYbTqPZ6OYRsCd42P60DVHAiIYg.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-029.jpg?type=w2)
![[javascript 10.] 자바스크립트 함수 종류 (콜백, 즉시실행, 타이머)](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MjBfMTgg/MDAxNzE4ODg4NDQ2MDg0.xSB2hZ_FPzyZYu_e6Lr1rUGL47tO-evI0z7D0PzjL5wg.0Oe6Jc7hQZMAy9RMLpP2Y5R2QXaD98VK1oJVTauCzt8g.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-_1_-010.jpg?type=w2)