728x90 자바스크립트26 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. Javascript Intl 클래스 사용법 JavaScript의 Intl 클래스는 다국어 지원, 날짜 및 시간 형식, 화폐, 숫자 및 단위 변환 등과 같은 다양한 지역화 기능을 제공합니다. 이 글에서는 Intl 클래스의 사용법에 대해 소개하고, 어떤 상황에서 사용할 수 있는지 설명하겠습니다. 1. Intl 클래스란? Intl 클래스는 JavaScript에서 다양한 지역화 기능을 제공하는 클래스입니다. 이 클래스를 사용하면 사용자의 지역에 따라 문자열, 숫자, 날짜 및 시간 형식, 화폐, 단위 등을 다르게 표현할 수 있습니다. Intl 클래스는 다양한 하위 클래스를 포함하고 있으며, 이를 통해 다양한 기능을 제공합니다. Collator 클래스는 문자열을 정렬하는 기능을 제공하고, DateTimeFormat 클래스는 날짜 및 시간 형식을 지정하는 기.. 2023. 3. 13. Javascript 프레임워크 비교(React, Vue, Angular) React.js, Vue.js, Angular.js는 모두 인기있는 프론트엔드 프레임워크입니다. 이 세 가지 프레임워크는 개발자들이 웹 애플리케이션을 구축할 때 선택할 수 있는 다양한 옵션 중 하나입니다. 이번 글에서는 React.js, Vue.js, Angular.js를 비교해보고 각각의 장단점을 살펴보겠습니다. React.js React.js는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React.js의 주요 기능 중 하나는 Virtual DOM입니다. Virtual DOM은 브라우저에서 실제 DOM 요소와 대응되는 가상의 DOM 요소를 생성합니다. 이렇게 생성된 가상의 DOM 요소를 기반으로 React.js는 실제 DOM에 변화가 필요한 부분만 업데이트합니다. 이로 인해 React.j.. 2023. 3. 12. JavaScript에서 var, let, const의 차이점 JavaScript에서 변수를 선언하는 키워드로는 var, let, const가 있습니다. ES6에서 새로 추가된 let과 const 키워드는 var 키워드와 다른 특징을 가지고 있습니다. 이번 글에서는 let과 const 키워드가 var 키워드와 어떻게 다른지에 대해 알아보겠습니다. 1. 변수 스코프 var 키워드로 선언한 변수는 함수 스코프(Function scope)를 가집니다. 함수 내에서 선언된 변수는 함수 내부에서만 유효합니다. 하지만 let과 const 키워드로 선언한 변수는 블록 스코프(Block scope)를 가집니다. 블록 스코프란 중괄호({})로 둘러싸인 범위를 의미합니다. 따라서 블록 내에서 선언된 변수는 블록 내부에서만 유효합니다. function example() { var x .. 2023. 3. 12. JavaScript HTML Content, Attribute, CSS 제어하기 JavaScript를 사용하여 HTML 컨텐츠, 속성, 그리고 CSS를 제어하는 방법에 대해 알려드리겠습니다. HTML Content 제어 HTML 요소의 내용을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElementById 메서드를 사용하며, 변경할 내용은 innerHTML 속성을 통해 지정합니다. 예를 들어, ID가 "demo"인 요소의 내용을 "Hello World!"로 변경하려면 다음과 같이 작성합니다. document.getElementById("demo").innerHTML = "Hello World!"; HTML Attribute 제어 HTML 요소의 속성을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElemen.. 2023. 3. 7. Javascript 루프문 정리(8) filter문 filter() 메서드는 배열의 요소 중에서 지정된 함수에 맞는 요소만 추출하여 새로운 배열을 반환하는 메서드입니다. 이 메서드를 사용하면 배열에서 필요한 요소만 추출하여 새로운 배열을 생성할 수 있습니다. filter() 메서드는 기존 배열을 수정하지 않고 새로운 배열을 반환하기 때문에, 기존 배열을 변경하지 않고 배열을 필터링해야 하는 경우에 유용합니다. 아래는 filter() 메서드의 구조와 사용 방법에 대한 설명입니다. filter() 메서드의 구조 배열.filter(콜백함수); 배열: 필터링할 배열입니다. 콜백함수: 각 배열 요소를 검사하여 필터링할 함수입니다. filter() 메서드의 사용 방법 1. 배열에서 짝수만 추출하는 경우: const arr = [1, 2, 3, 4, 5]; const.. 2023. 3. 6. Javascript 루프문 정리(7) map문 map() 메서드는 배열의 모든 요소에 대해 지정된 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다. 이 메서드를 사용하면 배열을 순회하면서 각 요소를 변형할 수 있습니다. map() 메서드는 원본 배열을 변경하지 않고 새로운 배열을 생성하기 때문에, 기존 배열의 요소를 수정하지 않고 새로운 배열을 만들어야 하는 경우에 유용합니다. 아래는 map() 메서드의 구조와 사용 방법에 대한 설명입니다. map() 메서드의 구조 배열.map(콜백함수); 배열: 변형할 배열입니다. 콜백함수: 각 배열 요소를 변형할 함수입니다. map() 메서드의 사용 방법 1. 배열 요소를 제곱한 새로운 배열을 생성하는 경우: const arr = [1, 2, 3, 4, 5]; const newArr = arr.ma.. 2023. 3. 6. Javascript 루프문 정리(6) forEach문 forEach() 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하는 메서드입니다. 이 메서드를 사용하면 반복문을 사용하지 않고도 배열의 모든 요소를 순회하며 작업을 수행할 수 있습니다. forEach() 메서드는 배열을 순회하며 요소를 차례대로 접근하며, 배열의 각 요소를 인수로 받는 콜백 함수를 실행합니다. 아래는 forEach() 메서드의 구조와 사용 방법에 대한 설명입니다. forEach() 메서드의 구조 배열.forEach(콜백함수); 배열: 순회할 배열입니다. 콜백함수: 각 배열 요소를 처리할 함수입니다. forEach() 메서드의 사용 방법 배열 요소를 출력하는 경우: const arr = [1, 2, 3, 4, 5]; arr.forEach(function(element) { consol.. 2023. 3. 6. Javascript 루프문 정리(5) do...while문 do...while 루프문은 while 루프문과 유사하지만, 코드 블록을 먼저 실행한 후에 조건식을 검사하는 점이 다릅니다. 즉, do...while 루프문은 일단 코드 블록을 한 번 실행한 후에 조건식을 검사하여 조건식이 참이면 다시 코드 블록을 반복 실행합니다. 따라서 코드 블록이 최소한 한 번은 실행되는 것이 보장됩니다. 아래는 do...while 루프문의 구조와 사용 방법에 대한 설명입니다. do...while 루프문의 구조 do { // 반복 실행할 코드 블록 } while (조건식); 코드 블록: 최소한 한 번 실행될 코드 블록입니다. 조건식: 반복문이 실행될 때마다 검사되는 조건입니다. 조건식이 참일 경우 코드 블록이 반복 실행됩니다. do...while 루프문의 사용 방법 1. 특정 조건이.. 2023. 3. 6. Javascript 루프문 정리(4) while문 while 루프문은 자바스크립트에서 반복 실행되는 코드 블록을 만들 때 사용되는 루프문 중 하나입니다. 조건식이 참일 동안 코드 블록이 실행되며, 조건식이 거짓이 될 때까지 반복됩니다. 초기식과 증감식이 필요하지 않으며, 반복 횟수를 미리 알 수 없는 경우에 주로 사용됩니다. 아래는 while 루프문의 구조와 사용 방법에 대한 설명입니다. while 루프문의 구조 while (조건식) { // 반복 실행할 코드 블록 } 조건식: 반복문이 실행될 때마다 검사되는 조건입니다. 조건식이 참일 경우 코드 블록이 실행됩니다. while 루프문의 사용 방법 특정 조건이 참일 때까지 반복 실행하는 경우: let i = 0; while (i < 5) { console.log(i); i++; } // 0, 1, 2, 3.. 2023. 3. 6. Javascript 루프문 정리(3) for...of문 for...of 루프문은 자바스크립트에서 이터러블(iterable) 객체(배열, 문자열, 맵, 셋 등)를 반복하며 각 요소에 접근할 때 사용됩니다. 이 루프문은 배열 뿐만 아니라 문자열, 맵, 셋 등 다양한 이터러블 객체를 반복할 수 있습니다. for...of 루프문은 일반적인 for 루프문과는 달리 인덱스나 속성을 이용한 반복이 아니라, 직접 값을 가져와서 반복합니다. 아래는 for...of 루프문의 구조와 사용 방법에 대한 설명입니다. for...of 루프문의 구조 for (변수 of 이터러블객체) { // 반복 실행할 코드 블록 } 변수: 각 요소의 값을 할당할 변수입니다. 이터러블객체: 반복하며 접근할 객체입니다. for...of 루프문의 사용 방법 배열 요소를 출력하는 경우: const arr .. 2023. 3. 6. Javascript 루프문 정리(2) for...in문 for...in 루프문은 자바스크립트에서 객체의 속성들을 반복하며 접근할 때 사용됩니다. 이 루프문은 객체의 속성들을 반복하며 각 속성 이름을 변수에 할당합니다. 아래는 for...in 루프문의 구조와 사용 방법에 대한 설명입니다. for...in 루프문의 구조 for (변수 in 객체) { // 반복 실행할 코드 블록 } 변수: 각 속성 이름이 할당될 변수입니다. 객체: 속성을 반복하며 접근할 객체입니다. for...in 루프문의 사용 방법 1. 객체의 속성들을 출력하는 경우: const obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { console.log(key); } // a, b, c obj 객체의 각 속성 이름(key)을 변수에 할당하여 반복문을 실.. 2023. 3. 6. Javascript 루프문 정리(1) for문 for 루프문은 자바스크립트에서 가장 일반적으로 사용되는 루프문 중 하나입니다. 초기식, 조건식, 증감식을 이용하여 반복문 실행 횟수를 제어합니다. 아래는 for 루프문의 구조와 사용 방법에 대한 설명입니다. for 루프문의 구조 for (초기식; 조건식; 증감식) { // 반복 실행할 코드 블록 } 초기식: 반복문이 실행되기 전에 한 번만 실행되는 코드로, 주로 반복문에서 사용되는 카운터 변수를 초기화합니다. 조건식: 반복문이 실행될 때마다 검사되는 조건입니다. 조건식이 참일 경우 코드 블록이 실행됩니다. 증감식: 반복문이 실행된 후에 한 번 실행되는 코드로, 주로 반복문에서 사용되는 카운터 변수를 증가시킵니다. for 루프문의 사용 방법 1. 특정 횟수만큼 반복 실행하는 경우: for (let i =.. 2023. 3. 6. Javascript 루프문 정리(0) 개요 자바스크립트에는 여러 가지 유형의 루프(loop)가 있습니다. 이들 루프문은 반복적으로 실행되는 코드 블록을 만들어주며, 각각의 루프문은 다양한 용도로 사용됩니다. 아래는 자바스크립트의 주요 루프문에 대한 간단한 아웃라인입니다. 1. for 루프문: 초기식, 조건식, 증감식을 이용하여 반복문 실행 횟수를 제어합니다. 가장 일반적으로 사용되는 루프문 중 하나입니다. 배열과 같은 자료구조를 반복하며 요소에 접근하는 데에도 많이 사용됩니다. Javascript 루프문 정리(1) for문 for 루프문은 자바스크립트에서 가장 일반적으로 사용되는 루프문 중 하나입니다. 초기식, 조건식, 증감식을 이용하여 반복문 실행 횟수를 제어합니다. 아래는 for 루프문의 구조와 사용 방법에 ccusean.tistory.com.. 2023. 3. 6. 이전 1 2 다음 728x90
