본문 바로가기
반응형

프로그램546

jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들 다양한 jQuery dblclick() 이벤트의 실용적인 예제를 아래에 소개합니다. 각각의 예제는 실제 웹 개발에서 활용할 수 있는 내용으로 작성했습니다.   1. 이미지 확대/축소 기능더블클릭 시 이미지를 확대하거나 원래 크기로 복원하는 예제입니다.      2. 리스트 항목 강조/해제리스트 항목을 더블클릭하면 강조 표시를 추가하거나 제거하는 예제입니다.  Item 1 Item 2 Item 3     3. 텍스트 더블클릭 시 편집 가능더블클릭으로 텍스트를 편집할 수 있는 간단한 예제입니다. Double-click to edit this text.  jquery Method replaceWith() : 선택한 요소를 다른것으.. 2024. 11. 21.
jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 mouseenter()와 mouseleave()는 요소에 마우스가 들어오거나 나갈 때 각각 이벤트를 트리거합니다. hover()와 유사하지만, mouseenter()는 이벤트 버블링이 발생하지 않아 부모 요소와 자식 요소가 중첩된 경우 더욱 세밀한 컨트롤이 가능합니다. 실용적인 예제를 몇 가지 소개합니다.    1. 버튼 강조 효과마우스가 버튼 위에 올라가면 색상이 변경되고, 벗어나면 원래 색상으로 돌아옵니다. Hover me     2. 카드 그림자 효과마우스를 카드 위에 올리면 그림자가 강조되고, 벗어나면 원래 상태로 돌아옵니다.     3. 메뉴 하이라이트네비게이션 메뉴에 마우스를 올리면 텍스트 색상과 배경색이 변경됩니다. Home About Contact     4. 이미지 캡션 .. 2024. 11. 19.
jQuery의 hover() 이벤트를 활용한 실용적인 예제들 jQuery의 hover() 메서드는 마우스가 요소 위에 올라갔을 때와 벗어났을 때 각각 다른 동작을 수행할 수 있게 해줍니다. 실용적인 예제를 몇 가지 만들어보겠습니다.    1. 네비게이션 메뉴 강조마우스를 메뉴 항목 위에 올리면 배경색과 텍스트 색상이 변경되는 간단한 네비게이션 메뉴 예제입니다.  Home About Services Contact     2. 이미지 확대 효과마우스를 이미지 위에 올리면 확대되고, 벗어나면 원래 크기로 돌아갑니다.      3. 툴팁 표시마우스를 특정 요소 위에 올리면 툴팁이 나타나는 예제입니다.  Hover over me! This is a tooltip!     4. 카드 플립 효과마우스를 카드 위에 올리면 카드가 회전하면서 뒷면이 보이는 예제.. 2024. 11. 19.
jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 jQuery의 click() 이벤트 함수는 사용자가 HTML 요소를 클릭할 때 특정 작업을 수행하도록 JavaScript 코드를 실행하는 데 사용됩니다. 아래는 가장 일반적으로 사용되는 click() 이벤트 함수 예제 입니다.   1. 버튼 클릭 시 텍스트 변경 클릭하세요 이곳의 텍스트가 변경됩니다.   2. 리스트 항목 추가하기 리스트 항목 추가 기존 항목 1 기존 항목 2    3. 토글 버튼으로 요소 보이기/숨기기 토글 이 텍스트는 토글됩니다.   4. 특정 클래스의 모든 버튼에 이벤트 적용 버튼 1 버튼 2 버튼 3  이 예제들은 jQuery의 click() 이벤트를 실용적으로 활용하는 데 기본적인 시작점이 될 것입니.. 2024. 11. 18.
React Select with multiple option #html / css(scss) / js(Babel)#React Select with multiple option#Author : CrocoDillon      https://codepen.io/CrocoDillon/pen/MpMoZe React Select with multiple optionCopyright by my client on design and chevron icons, other icons are from iconic :)...codepen.io      #react #selectbox #multipleoption #html #css #scss #js #babel 2024. 11. 15.
React App with React Select #html / css / js#React App with React Select#Author : Irfan Hanfi      https://codepen.io/irfanhanfi/pen/EGXdOQ React App with React Select...codepen.io     #react #selectbox #select #box #html #css #js #app 2024. 11. 15.
React Select Box #html / css(Sass) / js(Babel)#React Select Box#Author : Brandon#select box     https://codepen.io/blehr/pen/pbjNGR React Select Box...codepen.io   #React #selectbox #select #box #html #css #js #sass #babel 2024. 11. 15.
jQuery를 사용하여 이미지를 반응형으로 만드는 방법 jQuery를 사용하여 이미지를 반응형으로 만드는 방법은, 브라우저 창 크기에 맞춰 이미지의 크기를 동적으로 조정하는 것입니다. CSS만으로도 반응형 이미지를 만들 수 있지만 jQuery를 사용하면 좀 더 세밀하게 조정하거나 특정 조건을 추가할 수 있습니다.아래는 CSS와 jQuery를 조합하여 반응형 이미지를 만드는 방법입니다.1. CSS로 기본 반응형 이미지 설정가장 먼저 CSS로 이미지의 너비를 100%로 설정하여 반응형으로 기본 설정을 해줍니다. img.responsive { width: 100%; height: auto; /* 비율을 유지하며 크기 조절 */ max-width: 600px; /* 최대 너비 제한 */} 위 코드는 이미지의 너비가 부모 요소 너비의 100%에 맞춰지도록 하며 .. 2024. 11. 13.
jquery 숫자만 입력 체크, 천 단위 콤마 자동 추가 jQuery를 사용하여 입력 필드에 숫자만 입력되도록 체크하고 입력한 숫자에 천 단위 콤마(쉼표)를 자동으로 추가하는 방법은 다음과 같습니다.      설명숫자만 입력 필터링value.replace(/[^0-9]/g, '')를 사용하여 숫자가 아닌 모든 문자를 제거합니다.천 단위 콤마 추가value.replace(/\B(?=(\d{3})+(?!\d))/g, ',') 정규식을 사용하여 세 자리마다 콤마를 삽입합니다. 이 스크립트를 사용하면 숫자만 입력할 수 있고 입력 시 자동으로 콤마가 추가됩니다.      #jQuery #숫자만입력 #천단위콤마 #천단위콤마자동추가 #정규식 #문자제거정규식 #천단위콤마정규식 #프로그래밍 #조금씩배우는프로그램밍 2024. 10. 30.
jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤 jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤하려면 일반적인 방법으로는 앵커 태그를 사용하여 해결할 수 있습니다. 기본적으로 HTML의 id를 사용한 앵커 링크를 클릭하면 다른 페이지로 이동하고 해당 페이지에서 특정 위치로 바로 이동할 수 있습니다. 하지만 부드러운 스크롤 애니메이션을 유지하기 위해서는 새 페이지에서도 jQuery를 사용하여 해당 위치로 스크롤하도록 설정해야 합니다.    1. 기본 HTML 앵커 링크 방식Go to Section 2 on Page 2    2. 목표 파일에서 특정 위치로 부드럽게 이동 (예: page2.html)이제, page2.html에 특정 위치로 부드럽게 이동하는 jQuery 코드를 추가할 수 있습니다.   .. 2024. 10. 22.
jQuery로 iframe에서 부모 창 함수 호출 jQuery로 iframe에서 부모 창의 함수를 호출하려면, JavaScript의 window.parent 객체를 사용할 수 있습니다. window.parent는 iframe의 부모 창을 참조하기 때문에 이를 통해 부모 창의 함수를 호출할 수 있습니다.예를 들어, 부모 창에 parentFunction이라는 함수가 있다고 가정하면, iframe 내부에서 이 함수를 호출하는 코드는 다음과 같습니다.   부모 창 코드 (parent.html) 부모 창     iframe 코드 (iframe.html) Iframe 부모 함수 호출   설명window.parent를 사용하여 부모 창에 접근합니다.parentFunction()은 부모 창에 정의된 함수이며, iframe에서 이를 호출하려면 w.. 2024. 9. 28.
jQuery를 사용하여 몇 번째 요소인지 알아내기 jQuery를 사용하여 몇 번째 요소인지 알아내기  jQuery를 사용하여 특정 클래스 이름을 가진 요소 중에서 몇 번째 요소인지 알아내려면, index() 메서드를 사용할 수 있습니다. 아래는 그 방법을 설명한 예제입니다.첫 번째 요소두 번째 요소세 번째 요소네 번째 요소  다음과 같은 jQuery 코드를 사용할 수 있습니다.$(document).ready(function(){ // 특정 요소를 선택 (예: 세 번째 요소) var specificElement = $('.my-class').eq(2); // 그 요소가 몇 번째인지 확인 var index = $('.my-class').index(specificElement); console.log("선택한 요소는 " + (ind.. 2024. 9. 10.

티스토리툴바