본문 바로가기

언어3

js - click & dbclick 동시 사용 방법 js - click & dbclick 동시 사용 방법 이벤트를 적용하다보면 같은 대상에 클릭과 더블클릭 이벤트를 적용해야되는 일이 생긴다. 이때 $('#id').click 과 $('#id').dbclick 과 같이 이벤트를 따로 선언해서 사용하면 더블클릭 이벤트가 처리가 안된다. 해결방법은 on() 함수와 타이머관련 함수들을 이용하여 해결이 가능하다. Code 코드는 다음과 같다. 설명 먼저 클릭할 대상을 만든다. 제이쿼리를 이용하여 클릭 이벤트와 더블클릭 이벤트를 선언해준다. 클릭 이벤트 발생시 클릭카운트를 증가시켜 클릭 한번시 if문이 실행되며 setTimeout 함수를 통해서 Click 함수가 실행 후 다시 카운트를 0 으로 만든다. 더블클릭 이벤트 발생시 기존 더블클릭 이벤트는 preventDef.. 2021. 8. 26.
Include HTML을 이용한 html 파일 분리하기 들어가며 웹페이지 구조를 잡다보면 중복적으로 들어가게 되는 코드들이 존재하게 된다. 예를들어 상단에 헤더나 하단의 푸터같은 경우를 예로 들 수 있다. 기존 스프링에서 했을때는 thymleaf를 이용하여 이 작업을 하였는데 이번에 javascript만으로도 분리를 하는 방법을 알게 되어 정리한다. includeHTML.js 해당 스크립트문을 통해서 include-html이 포함된 html 파일을 로드할 수 있다. function includeHTML(callback) { var z, i, elmnt, file, xhr; /*loop through a collection of all HTML elements:*/ z = document.getElementsByTagName("*"); for (i = 0; i.. 2021. 7. 21.
CSS - position : absolute 를 이용한 div 위치 지정 CSS - position : absolute 를 이용한 div 위치 지정 position은 태그들의 위치를 결정하는 css이다. 기본적으로 div 정렬 시키는 방법은 다양하지만 position을 이용하게 되면 내가 원하는 위치에 어디든 정확히 위치 시킬 수 있다. 글로만 설명하면 이해가 쉽지 않아 아래 그림을 통해 알아본다. 기본적으로 모든 태그들의 디폴트값은 static 상태이며 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. position : absolute position: absolute; 포지션 값을 absolute로 주게 되면 position 값이 static 속성이 아닌 relative, absolute, fixed인 부모 태그를 기준으로 기준점을 삼는다. 만약 relative, abs.. 2021. 7. 12.