Power 개발일지

[Js-기초] 실제 동작하는 로더 만들기

안녕하세요!오늘은 @keyframe로 몇 초 정해놓고 하는 로더가 아닌,Javascript로 실제 동작하는 로더를 만들어 보겠습니다. 1. 로딩애니메이션 만들기먼저 기능구현하기 전에 HTML, CSS로 애니메이션을 만들어 주겠습니다. HTMl CSS.loading { position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}.loader { width: 500px; height: 500px; position: relative;}.item { width: 200px; ..

오늘은 addEventListener의 종류를 알아보겠습니다.addEventListener는 JavaScript에서 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 메서드 입니다. UI 이벤트이벤트설명load웹 페이지의 로드가 완료되었을 때unload웹 페이지가 언로드될 때 (예: 다른 페이지로 이동)error자바스크립트 오류 발생 또는 자원 로드 실패 시resize브라우저 창 크기를 조정했을 때scroll사용자가 페이지를 스크롤했을 때 EX) 키보드 이벤트이벤트설명keydown키를 처음 눌렀을 때keyup키에서 손을 뗐을 때keypress문자가 입력되었을 때 (현재는 일부 브라우저에서 deprecated)EX) 마우스 이벤트이벤트설명click요소를 클릭했을 때 (눌렀다 뗐을 때)dblclick요소를..