Vanilla JS와 jQuery의 너비, 높이를 조회하는 방법은 차이가 있습니다. Vanilla JS를 이용하여 Element의 높이를 조회하는 방법을 알아보고, 기존에 jQuery로 작성한 코드를 migration하는 방법을 알아봅시다. ※ 너비(width)와 높이(height)는 규칙이 동일하므로 너비에 관한 설명은 생략합니다. 테스트 환경 Element의 height 관련 프로퍼티 innerHeight : 내부높이 offestHeight : 실제높이 scrollHeight : 스크롤높이 jQuery height 함수를 Vanilla JS로 migration height() innerHeight() outerHeight(), outerHeight(true) 1. 테스트 환경 *,*::before,*..

이론 Element 조회 - 기본 (id, class, tagname 이용) 2-1) id로 조회 : getElementById 2-2) class로 조회 : getElementsByClassName 2-3) tag 이름으로 조회 : getElementsByTagName Element 조회 - 심화 attribute로 조회 iframe 내부 contents 조회 부모, 자식, 형제 Element 조회 자식 Element 조회 자식 Element 조회 형제 Elements 조회 - all 형제 Element 조회 - prev, next 속성 조회 input, textarea 요소 value 조회 select 선택된 option의 value, text 조회 기타 속성 조회 및 설정 data 속성 조회 tex..

Lottie json은 에펙(Affter Effects)으로 애니메이션 이미지를 만든 후, bodymovin 플러그인을 이용하여 Lottie json파일로 export하여 만든다. 이 json 파일을 이용하여 움직이는 이미지를 웹(또는 모바일) 화면에 출력할 수 있습니다. 간단한 사용방법을 알아보기 위해, 무료 lottie 파일을 다운받아 실습해 봅시다. 1. Lottie json 파일 다운 LottieFiles 사이트에 들어가면 bodymovin으로 만든 무료 Lottie json 파일을 다운받을 수 있습니다. Lottie JSON 형태로 Download를 합니다. 2. lottie-player 라이브러리 import lottie json 파일은 html, webflow, android, iOS 환경에..