CATEGORIES
자바스크립트를 사용하여 이벤트를 구현할 때 이벤트 캡처링과 이벤트 버블링이 등장합니다. 아래에서는 이벤트 버블링(Event Bubbling)이 무엇이고 관련된 이슈가 왜 발생하는지 ~ 또 어떻게 해결하는지 알아보겠습니다. 먼저 이벤트 버블링이 무엇인지 알아봅니다.이벤트 버블링이란이벤트 버블링은 선택한 엘리먼트가 부모 요소를 가지는 경우에 발생한다. 모든 요소들은 body부터 하위 자식 요소들까지 계층 구조를 가지고 있습니다. 예를들어 만약 부모 요소 안에 있는 어떤 엘리먼트를 클릭한다고 생각해봅니다. 이때 해당 엘리먼트를 포함하는 부모 요소를 클릭하지 않을 수 있을까요? 내부에 존재하기 때문에 당연히 어렵겠죠. 실제로는 아래와 같이 dep1, dep2를 지나야 dep3를 클릭할 수 있습니다.그림) html
Last Modified : 2021-07-13 13:32:47
페이지를 최하단 또는 최상단으로 이동시키기 위한 버튼을 보셨나요? 아래 스크린샷의 우측하단을 봐주세요.(그림) 우측 하단의 top 버튼이 바로 스크롤 이동 버튼임 보시는 것처럼 특히 모바일 페이지의 경우 스크롤을 한번에 최상단에까지 올리기 위해 버튼을 보실 수가 있죠. 이처럼 스크롤을 이동하기 위한 메소드로 animate를 사용할 수 있습니다. # 자바스크립트 - 페이지 스크롤 위치 이동하는 방법animate는 참 다양한 기능을 구현하는데 스크롤 이동 역시 그 중 하나입니다. $('html, body').animate({scrollTop: '0'}, 1000); $('html, body').scrollTop(0); 이 스크롤을 이동시키는 방법은 위와 같이 두가지 방법이 있습니다. 하나는 animate()
Last Modified : 2019-08-06 22:00:13자바스크립트를 사용하여 현재의 스크롤바 위치값을 가져오는 방법입니다. 어떻게 하면 스크롤바 값을 가져오는지 아래에서 알아봅니다.# 자바스크립트에서 스크롤 위치 값 가져오기스크롤바의 위치를 가져오는 방법은 몇 가지가 존재합니다. 그 중 몇 가지를 알아보면 다음과 같습니다.window.scrollYdocument.scrollingElement.scrollTopdocument.documentElement.scrollTopdocument.querySelector('html').scrollTop위 방법들 모두 현재 스크롤바의 위치를 숫자로 반환합니다. 다만 위의 두 가지 방법은 IE에서 동작하지 않습니다.// IE not supportswindow.scrollY;document.scrollingElement.scro
Last Modified : 2020-03-19 17:56:25
비동기 방식(AJAX)을 사용한 웹사이트 구현시 제이쿼리의 ajax()메소드를 많이 사용한다. 이때 AJAX의 요청이 시작 또는 완료될 경우 특정한 메시지나 문구를 방문자에게 알림창 등의 방식으로 보여주기 위하여 ajaxStart() 그리고 ajaxStop()메소드를 사용할 수 있다. 먼저 이 두가지 메소드를 간단하게 설명하면 아래와 같다. ajaxStart() 메소드 - AJAX 요청이 시작되는 시점에 해당 함수를 실행ajaxStop() 메소드 - 실행중인 모든 AJAX 요청이 멈추게되면 해당 함수를 실행 # AJAX 실행시 함수 실행이 필요한 경우비동기 방식은 페이지 reload에 따른 화면 전환이 발생하지 않으므로 사용자가 인지하기 어렵다. 이런 경우 사용자가 쉽게 알아볼 수 있는 UI를 제공하는 것이
Last Modified : 2016-06-13 15:28:24자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위
Last Modified : 2017-05-19 20:13:23
비동기 방식으로 새로운 콘텐츠를 불러오는 경우 로딩중이라는 아이콘이나 모달창등을 어디서나 쉽게 볼 수 있다. 오늘 우리가 만들어보려 하는 것은 바로 'Loading...' 문구를 콘텐츠 영역 가까이에 표시해보려고 한다. 아래에는 이를 구현하기 위해 필요한 html, css 그리고 자바스크립트 코드이다. 먼저 비동기 AJAX 구현시 이런 인터페이스가 왜 필요한지부터 간단하게 알아보자.페이지에 AJAX를 사용해 새로운 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 에러라고 생각한 뒤 이탈하려는 유
Last Modified : 2017-08-28 12:33:24만약 현재 브라우저 화면에서 스크롤 끝으로 이동하려면 어떻게할까요?브라우저 끝으로 이동하는 방법으로 scrollIntoView()를 사용할 수 있습니다. 이를 사용하려면 아래처럼 실행합니다.element.scrollIntoView(true or false)scrollIntoView는 특정 요소의 위치로 바로 이동시켜주는 자바스크립트 함수입니다.만약 문서의 가장 끝으로 이동하려면? body 요소를 기준으로 이동할 수 있을 것입니다.document.body.scrollIntoView(false)위 코드를 실행할 경우 화면에서 스크롤 가장 하단으로 이동합니다.
Last Modified : 2018-03-12 07:01:20finish() 함수는 현재 실행되는 모든 애니메이션 효과를 중지시킬 수 있습니다. 이는 stop() 함수의 stop(true, true)와 거의 비슷하나 finish()의 경우 CSS 속성에서 사용되는 애니메이션 역시 멈추게 할 수 있어 좀 더 효과적이고 폭 넓게 사용할 수 있는 장점이 있죠.* 이 함수는 제이쿼리(jQuery) 1.9 버전에 추가되었습니다.$(선택요소).finish();finish() 함수를 클릭하면 해당 요소는 애니메이션을 중지하고 중지된 위치가 아닌 종료될 시점의 마지막 위치로 이동하게됩니다.# 예제보기<body><span id="test" style="background:#f90;display:block;width:90px;position:relative;">-> TEST BOX<
Last Modified : 2015-11-15 23:42:17
리눅스 서버의 효과적인 성능과 문제 해결을 위해 어떤 프로세스, 서비스가 구동되고 어느 정도의 리소스를 사용하고 있는지 파악하는 것이 중요합니다. 아래는 리눅스에서 현재 사용중인 프로세스를 보여주는 명령어 top에 대하여 알아봅니다.# 리눅스 top 명령어 알아보기리눅스의 top 명령어는 현재 사용중인 프로세스를 실시간으로 계속해서 보여주기 때문에 매우 많이 사용되는 커맨드 중 하나입니다.top사용 방법은 매우 간단하며 top을 입력하면 아래와 같이 다양한 정보를 출력해줍니다.PID // 사용중인 PIDUser(Owner) // 프로세서 소유자%CPU // CPU 점유율%MEM // Memory 점유율PR // 우선순위 Priority 값NI // 먼저 실행되는 Nice 값실시간으로 계속 변경되면서 화면에
Last Modified : 2020-08-18 21:15:46