728x90 300x250 SMALL javascript34 드래그로 모달 높이 조절하기! 드래그 시트 시뮬레이션 만들기 지난 글에서 모바일까지 지원하는 터치 드래그 이벤트를 알아봤습니다. 이번에는 실제로 많이 쓰이는 모바일 바텀 시트 형식의 모달을 드래그로 조절하는 예제를 만들어보겠습니다.카카오톡 이모티콘 창, 네이버의 검색창 모달 등에서 자주 보는 UI입니다. 기본 개념 : 바텀시트란?바텀 시트(Bottom Sheet)는 화면 아래에서 위로 슬라이드 되는 UI 이다. 사용자가 내용을 보기 위해 스크롤하거나, 드래그하여 펼칠 수 있다.이 UI는 크게 3단계로 나뉜다.1. 닫힌 상태(height: 0 또는 hidden)2. 중간 상태(예: 높이 50%)3. 완전히 펼친 상태(예 : 높이 100%) 기본 html 구조 .bottom-sheet : 전체 모달.drag-handle : 유저가 드래그할 수 있는.. 2025. 7. 6. 모바일도 완벽하게! touchstart, touchmove 터치 드래그 지난 시간에는 mousedown, mousemove, mouseup으로 데스크탑 환경에서의 드래그 구현을 포스팅 해씁니다.하지만 요즘에는 모바일 환경도 무시할 수 없기 때문에 이번에는 모바일 환경에서도 드래그 기능이 잘 작동하도록 구현해보겠습니다. 1. 터치 이벤트란?모바일에서는 마우스 대신 손가락으로 화면을 터치합니다. 자바스크립트에서는 다음과 같은 이벤트로 처리합니다.이벤트설명touchstart손가락으로 터치할 때 발생touchmove터치한 상태에서 손가락을 움직일 때 발생touchend손가락을 화면에서 뗄 때 발생 마우스 이벤트와 다르게 TouchEvent 객체는 배열 형태로 여러 손가락 정보를 가진다. 2. 기본 구조// 터치 시작 시 위치 저장box.addEventListener('touchs.. 2025. 7. 2. 드래그 앤 드롭의 시작! mousedown과 mousemove로 배우는 DOM 이벤트 웹에서 자바스크립트를 활용한 인터랙션 중 가장 많이 쓰이는 기능 중 하나가 바로 드래그 입니다. 드래그 기능은 마우스를 누르고 끌어서 요소를 이동하거나, 크기를 조절하거나, 다양한 동작을 유도할 수 있게 해줍니다. 1. 마우스 관련 이벤트란?자바스크립트에서 마우스를 이용한 주요 이벤트는 다음과 같다이벤트설명mousedown마우스 버튼을 누를 때 발생mousemove마우스를 움직일 때 발생mouseup마우스 버튼을 뗄 때 발생 이 세 가지를 조합하면 드래그를 구현할 수 있다. 2. 가장 기본적인 구조드래그 기능의 기본 흐름은 아래와 같다.// 1. 마우스를 누르면 시작 위치를 기억box.addEventListener('mousedown', (e) => { startY = e.clientY;});// .. 2025. 6. 29. 즉시실행함수(IIFE)로 스크립트 충돌 방지하기 + 조건 검사 모든 페이지에서 같은 jQuery 코드가 실행되면 오류가 발생하거나, 의미 없는 DOM 탐색이 늘어날 수 잇다. 이를 막기 위한 좋은 방법이 즉시 실행 함수(IIFE)와 조건검사이다. 즉시실행함수(IIFE)란?(function() { // 여기에 코드를 넣으면 // 즉시 실행됨!})(); 바로 실행되는 익명 함수변수를 전역에 퍼뜨리지 않음(보안, 충돌 방지)$나 document, window 등의 범위를 고정할 수 있다.jQuery에서는 보통 이렇게 쓴다.(function($) { // 여긴 $가 jQuery로 고정됨 $(function() { // DOM ready });})(jQuery); 즉시실행함수(IIFE) + 조건검사(function($) { var TabModule = { .. 2025. 4. 25. 이전 1 2 3 4 ··· 9 다음 728x90 반응형 LIST