태그에서 제공하는 기본 컨트롤 디자인 대신, 다른 디자인을 적용하고 싶었습니다.하지만 HTML5 에서는 이러한 커스텀 디자인을 기본적으로 지원하지 않기 때문에, 기본 컨트롤을 숨기고 HTML과 CSS를 사용하여 직접 컨트롤을 만들기로 했습니다.이후, 각 버튼의 기능은 JavaScript로 구현할 계획입니다.이번 포스팅에서는 HTML과 CSS를 사용하여 비디오 플레이어의 컨트롤을 커스텀 하는 방법을 다루고 프로그레스 바 표시 방법과 input range의 커스터마이징 등 중점적인 부분만 작성할 예정입니다.다음 포스팅에서는 JavaScript를 활용하여 각 버튼의 기능을 구현할 예정입니다. https://hy-un.tistory.com/entry/JSJavaScript-Video-Controls-%EC%BB..

최근 프로젝트에서 사용자가 레이어 팝업을 자유롭게 드래그 앤 드롭하여 화면 내에서 이동시킬 수 있는 기능이 필요했다. 이동된 위치 정보를 서버에 저장 할 필요가 없고, 단순히 프론트엔드 측에서만 처리하면 되는 기능이였다. 구현 계획이동하고자 하는 요소는 "position: absolute;" 속성이 필수적으로 지정되있어야 한다.( JavaScript 로 요소에 스타일을 지정해도 무관 )요소의 위치 변경은 성능 최적화, 부드러운 애니메이션을 위하여 'style' 속성의 'left'와 'top' 값을 조정하는 대신 'transform' 의 'translate' 값을 변경한다. enableDraggable 함수 구현 ( 모바일 미지원 버젼)function enableDraggable(selector) { ..

사용자 경험을 개선하기 위해 체크박스를 드래그로 선택하거나 해제하는 기능이 필요했는데, dragCheckbox.js는 jQuery 기반으로 되어 있어, 순수 자바스크립트 프로젝트 요구사항에 맞게 자바스크립트로 직접 구현하기로 결정했다.구현 계획입력된 선택자(selector)에 해당하는 요소들(라벨 또는 체크박스)에 해당하는 영역 내에서 마우스 드래그를 통해 체크박스를 선택 또는 해제하자.드래그 기능 구현- "mousedown" 이벤트에서 드래그 시작을 감지하고, 해당 요소의 체크박스 상태를 반전시킨다.- "mouseenter" 이벤트를 사용하여 드래그 중 다른 체크박스 또는 라벨위로 마우스가 이동할 때, 해당 요소의 체크박스 상태를 반전시킨다.- "mouseup" 이벤트에서 드래그 종료를 감지한다. 기능..

최근 프로젝트에서 버튼을 클릭하면 텍스트를 복사하는 기능이 필요했습니다. 처음에는 Clipboard.js 라는 라이브러리의 사용을 고려했지만 제가 원하는 기능은 텍스트를 복사하고 성공 시 alert창 실패 시 prompt창을 띄우는 게 전부라서 이러한 단순한 로직은 성능 면에서도 직접 구현하는 것이 더 나을 것 같다고 판단했습니다. 따라서, 먼저 Web API인 navigator의 clipboard API를 이용해 구현을 시도했습니다.function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { alert("복사되었습니다. 원하는 곳에 붙여넣기하여 주세요."); }).catch(() => { promp..