Power 개발 연구소

안녕하세요!웹사이트를 제작하다 보면 로그인 창이나 알림창처럼 화면 위에 새 창을 띄워야 할 때가 많습니다.이럴 때 자주 사용되는 기능이 바로 모달(modal)입니다.오늘은 addEventListener의 click 이벤트를 활용해, 버튼을 눌렀을 때 간단하게 모달을 띄우는 방법을 알아보겠습니다.먼저 모달(modal)이 무엇인지 알아보겠습니다. 모달(modal)이란?모달(modal)이란, 웹페이지 위에 겹쳐서 나타나는 창을 말합니다.대표적인 예로는 로그인 창, 회원가입 창, 알림창 등이 있으며, 사용자 주의를 집중시키는 데에 많이 활용됩니다.이제 모달에 대해 간단히 알아봤으니, 직접 간단한 예제를 만들어 보겠습니다.버튼을 클릭하면 모달창이 뜨고, 닫기 버튼이나 바깥 영역을 누르면 사라지도록 구현해 ..

안녕하세요!오늘은 먼저 toggle기능에 대해 알아보고간단한 버튼을 만들어 실습까지 해보도록 하겠습니다. toggle이란?JavaScript에서 toggle은 “켜고 끄기” 또는 “두 가지 상태를 번갈아 전환하다”라는 의미입니다.보통 버튼 클릭 시 상태를 바꾸는 기능을 만들 때 사용합니다. #실습실습으로 웹페이지를 맨위로 맨아래로 움직여주는 토글버튼을 만들어 보겠습니다. HTML↓ CSS#scrollToggleBtn { width: 65px; height: 65px; background-color: #fff; border: 1px solid #959595; border-radius: 100%; display: flex; flex-direction: column; align-ite..

안녕하세요!오늘은 브라우저 기능 중 하나인 스토리지(Storage)에 대해 알아보겠습니다.특히, localStorage와 sessionStorage의 차이를 이해하고, 간단한 실습을 통해 직접 사용해보는 시간을 가져보겠습니다.먼저, 스토리지가 무엇인지부터 살펴보겠습니다. 스토리지(Storage)란?스토리지(Storage)는 웹 브라우저에서 데이터를 클라이언트 측(사용자의 컴퓨터)에 저장할 수 있게 해주는 기능입니다. 쉽게 말해, 웹페이지가 사용자의 브라우저에 정보를 '기억'해둘 수 있는 저장공간이라고 생각하시면 됩니다. 스토리지(Storage)의 필요성웹페이지는 기본적으로 페이지를 새로고침하거나 다른 페이지로 이동하면 모든 데이터가 사라집니다. 하지만 스토리지를 사용하면: 사용자가 입력한 폼 데이터를..

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