JavaScript47 Bootstrap Modal 창 드래그하는 3가지 방법 (Javascript, jQuery, jQuery UI) Bootstrap Modal 창의 헤드를 클릭 드래그해서 움직이게 하는 3가지 방법에 대해서 알려 드립니다. Bootstrap의 Modal에 기본적으로 들어 있지 않은 기능으로 따로 구현해야 하는 기능이기 때문에 이를 구현하는 방법에 대해서 알려 드립니다. 기능 구현은 아래의 3가지 방법으로 구현을 할 것이며, 가장 쉬운 방법부터 소개해 드리겠습니다. 원하시는 방법을 선택 후 사용하시기 바랍니다. jQuery와 jQuery UI를 이용하는 방법 jQuery만 이용하는 방법 순수 Javascript로 구현하는 방법 그럼, 진행을 시작하겠습니다. HTML 삽입 미리보기할 수 없는 소스 1. jQuery와 jQuery UI를 이용하는 방법 "jQuery"와 "jQuery UI"를 라이브러리를 사용하도록 선언합.. 2023. 4. 5. 모던 Javascript 개발자를 위한 최신 웹 애니메이션 기법 물결 모양의 텍스트, 컬러 변화, 그리고 인터랙티브한 애니메이션 등 최신 웹 애니메이션 기술은 사용자에게 다양하고 흥미로운 경험을 제공합니다. 이번 글에서는 모던 JavaScript 개발자를 위한 최신 웹 애니메이션 기법을 소개합니다. 1. CSS 애니메이션 CSS 애니메이션은 CSS 속성을 사용하여 웹 애니메이션을 만들 수 있는 가장 간단한 방법 중 하나입니다. 각각의 CSS 속성에 대한 애니메이션을 설정하고, 이벤트나 상태 변화에 따라 CSS 속성을 변경하여 애니메이션을 제어할 수 있습니다. 아래는 물결 모양의 텍스트 애니메이션을 CSS 애니메이션으로 구현한 예시입니다. HTML 소스 Hello, World! CSS 소스 .wave-text { font-size: 48px; background: li.. 2023. 4. 4. JavaScript에서 효율적인 메모리 관리를 위한 비밀 팁 JavaScript는 가비지 수집기가 내부적으로 구현되어 있어서, 메모리 관리를 개발자가 직접 수행하지 않아도 됩니다. 하지만, 개발자가 이를 무시하면 코드에서 메모리 누수가 발생할 수 있습니다. 이러한 메모리 누수는 성능 저하, 사용자 경험 저하, 심지어 서비스 장애로 이어질 수 있습니다. 따라서 이번 글에서는 JavaScript에서 효율적인 메모리 관리를 위한 비밀 팁에 대해 다뤄보겠습니다. 변수 선언 시 주의 자바스크립트에서는 변수를 선언할 때 var, let, const 키워드 중 하나를 사용합니다. 이 중 var는 함수 스코프를 갖고 있고, let과 const는 블록 스코프를 갖습니다. 블록 스코프 변수는 더 이상 필요하지 않을 때 자동으로 제거됩니다. 그러나 var 변수는 함수가 종료될 때까지.. 2023. 4. 4. Javascript UUID GUID 만들기 Javascript로 UUID와 GUID를 만드는 방법에 대해서 알려드립니다. 그전에 앞서 UUID와 GUID에 간단히 설명을 드리면, 아래와 같습니다. UUID, GUID란 무엇인가? UUID(Universally Unique Identifier)는 128비트의 16진수로 이루어진 고유한 식별자입니다. 일반적으로 다음과 같은 형식을 따릅니다. xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx 여기서 x는 16진수의 숫자를 나타냅니다. M은 UUID 버전 번호를 나타내며, N은 UUID variant를 나타냅니다. 이 값은 보통 다음과 같습니다. M은 4 비트이며, 1로 설정됩니다. 즉, 4입니다. N은 2비트이며, 다음과 같은 값 중 하나일 수 있습니다. 0: 이전 버전과의 하위 호환성.. 2023. 3. 29. Bootstrap v5에서 Modal창 드래그하기 Bootstrap v5에서 모달창의 헤더를 마우스로 클릭 후 드래그 해서 움직이게 하는 방법에 대해서 포스팅 진행하겠습니다. BS5에서는 jQuery를 다 들어냈으므로, 순수 자바스크립트로 구현하는 방법으로 진행해 보겠습니다. jQuery로 구현하는 방법은 아래의 링크를 참고하시기 바랍니다. Bootstrap 모달창 드래그 Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다. jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다. 아래는 stackoverflow 참고 사이트 주소입니다. 참고 자료: s ccusean.tistory.com HTML 소스 수정 아래는 BS5의 버튼을 눌러서 모달창을 띄우는 기본 소스입니다. 여기에 모달창을 드.. 2023. 3. 23. 리스트 항목 Drag & Drop으로 재정렬하기 리스트 형태로 구현되어 있는 HTML 문서의 항목을 사용자의 Drag & Drop 동작으로 재정렬하는 방법에 대해서 설명 드리겠습니다. 자료에 대한 출처는 제일 아래 하단에 있으니 참고하시기 바랍니다. 실습해보기 아래는 실제로 구현한 내용을 실습해 볼 수 있는 화면입니다. Drag & Drop의 동작으로 실제로 어떻게 동작하는지 확인 해 보세요. 아래의 출처와는 다른 세로로 정렬된 리스트 항목으로 구성하였습니다. 미리 맛 보기: HTML 삽입 미리보기할 수 없는 소스 위 예제의 전체 소스는 아래와 같습니다. HTML 소스 A B C CSS 소스 .container-list { /* display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; */ }.. 2023. 3. 23. 이전 1 2 3 4 5 6 ··· 8 다음 반응형
