ImJay

[JavaScript] 간단한 드래그 앤 드롭 예제 (Drag&Drop) See the Pen Untitled by Jay (@ijkgit) on CodePen. 이 코드는 HTML Drag and Drop API를 사용하여 화면 어디든지 드래그하여 요소를 놓을 수 있는 간단한 예제입니다. 이 HTML 코드는 드래그 가능한 요소를 생성하고, 해당 요소를 드래그할 때 실행될 JavaScript 함수를 호출하는 구조를 가지고 있습니다. function drag(ev) { // 드래그하는 요소의 ID를 데이터로 설정 ev.dataTransfer.setData("text", ev.target.id); } drag 함수는 드래그가 시작될 때 호출되는 함수입니다. 이 함수에서는 ev.dataTransfer.setD..

html a 태그에는 disabled 속성이 따로 적용되지 않는다. 보통의 경우 css 의 pointer-events 메소드를 사용한다. a.disabled { pointer-events: none; cursor: default; } 그러나, 이 경우는 시각적으로만 접근을 못하게 할 뿐 onclick 에 메소드가 존재할 경우 해당 메소드가 그대로 노출된다. 브라우저에서 개발자 도구 콘솔로 해당 메소드를 입력할 경우 그대로 접근할 위험이 있다. pointer-events: none; 스타일은 해당 엘리먼트가 마우스 이벤트를 받지 않도록 막는 CSS 속성이다. 그러나 이는 단지 시각적으로 클릭을 막을 뿐이며, 실제로는 JavaScript에 의해 연결된 이벤트 핸들러가 여전히 실행될 수 있다. 이 취약점을 막..

jQuery.show() [JavaScript/jQuery] hide() 메소드 사용법 jQuery.hide() hide() 메소드는 jQuery 라이브러리에서 제공하는 메소드 중 하나입니다. 이 메소드는 요소를 숨기는 기능을 합니다. hide() 메소드를 사용하려면 우선 jQuery 라이브러리를 페이지에 추가해 develop247.tistory.com 지난 시간 요소를 숨기는 기능을 하는 hide() 메소드에 대해서 알아보았습니다. 이번 시간에는 hide() 메소드와 반대로 요소를 보여주는 기능을 하는 show() 메소드에 대해 알아보겠습니다. show() 메소드를 사용하려면 우선 jQuery 라이브러리를 페이지에 추가해야 합니다. jQuery 라이브러리를 추가한 후에는 아래와 같이 show() 메소드..

jQuery.hide() hide() 메소드는 jQuery 라이브러리에서 제공하는 메소드 중 하나입니다. 이 메소드는 요소를 숨기는 기능을 합니다. hide() 메소드를 사용하려면 우선 jQuery 라이브러리를 페이지에 추가해야 합니다. jQuery 라이브러리를 추가한 후에는 아래와 같이 hide() 메소드를 사용할 수 있습니다. 숨기기 이 요소를 숨깁니다. 위 코드에서 $는 jQuery 객체를 의미합니다. document.ready() 메소드는 페이지 로딩이 완료된 후에 코드를 실행하기 위한 메소드입니다. click() 메소드는 클릭 이벤트를 처리하기 위한 메소드입니다. 위 코드에서는 id가 myButton인 버튼을 클릭하면 id가 myElement인 요소를 숨기는 기능을 구현하고 있습니다. hide(..