Power 개발 연구소

안녕하세요!오늘은 Math.floor, Math.random함수를 이용하여 랜덤 숫자가 나오는 추억을 곁들인 난수 생성기를 만들어 보겠습니다. 1. 뽑기 기계 틀 만들기기능 구현에 앞서, HTML과 CSS로 먼저 퍼블리싱 작업을 진행하겠습니다. HTML CSSbody { display: flex; justify-content: center; align-items: center; height: 100vh;}.machine_box { width: 500px; height: 600px; display: flex; flex-direction: column; align-items: cen..

안녕하세요!오늘은 JavaScript를 이용하여 사칙연산이 가능한 계산기를 만들어 보겠습니다. 1. 계산기 틀 만들기기능 구현에 앞서, HTML과 CSS로 먼저 퍼블리싱 작업을 진행하겠습니다. HTML 7 8 9 / 4 5 6 * 1 2 3 - 0 C = + CSSbody { height: 100vh; display: flex; justify-content: center; align-items: center;}.calculator { width: 300px;..

안녕하세요!오늘은 @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요소를..