728x90 300x250 SMALL javaScript545 드래그로 모달 높이 조절하기! 드래그 시트 시뮬레이션 만들기 지난 글에서 모바일까지 지원하는 터치 드래그 이벤트를 알아봤습니다. 이번에는 실제로 많이 쓰이는 모바일 바텀 시트 형식의 모달을 드래그로 조절하는 예제를 만들어보겠습니다.카카오톡 이모티콘 창, 네이버의 검색창 모달 등에서 자주 보는 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. jQuery 유지보수를 위한 4단계 리팩토링 전략 jQuery로 작성된 코드가 어떻게 복잡해지고, 그걸 어떻게 구조화하면 좋을지 단계별로 정리해보자 1단계 : 무분별한 직접 호출 방식// index.js$('.tab').on('click', function() { $('.tab-content').hide(); $('.tab-content').eq($(this).index()).show();}); 같은 코드가 다른 곳에도 중복될 가능성 있음.tab이 존재하지 않아도 실행됨이벤트 중복 바인딩 위험2단계 : 네임스페이스 적용var MyApp = MyApp || {};MyApp.Tab = { bindEvents: function() { $('.tab').on('click', function() { $('.tab-content').hide().. 2025. 4. 30. 이전 1 2 3 4 ··· 137 다음 728x90 반응형 LIST