자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다# 제이쿼리를 사용하여 마우스 위치 알아내기 만약에 현재 마우스 커서가 위치한 값을 얻기 위해서는 어떻게 해야할까요? 기본적으로 마우스를 사용하는 이벤트 객체를 사용해야 합니다. 이벤트 객체는 모든 이벤트 핸들러를 가지고 있으며 좌표값 역시 확인이 가능합니다. 그럼 아래의 예제를 통해 실제 마우스가 어디 위치에 있는지 알아보세요.# 마우스 클릭 위치 예제보기; 아래 예제는 마우스를 클릭했을때의 브라우저에서의 현재 위치값(절대위치)을 가져오는 예제입니다. 마우스 위치를 가져오려면 이벤트 객체를 이용해야합니다. 아래 예제는 클릭 이벤트가 발생시 현재의 위치 값을 가
Last Modified : 2017-12-11 07:54:43
제이쿼리 이벤트 메소드 중 하나인 hover()에 대하여 알아봅니다.제이쿼리는 다양한 이벤트 관련 메소드를 제공하는데요 만약 마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트 역시 제이쿼리를 사용하여 제어할 수 있습니다. 이때 사용하는 메소드가 바로 hover()입니다.$(jqeuryElement).hover(콜백함수)위는 간단한 문법으로 hover() 메소드 내부에 호출할 콜백을 추가하는 방법으로 사용합니다.# 제이쿼리 hover() 메소드이 메소드 hover()는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작합니다. 다만 css에 사용하면 새로운 스타일(style)을 적용하는 것이 목적이지만 hover()는 자바스크립트를 사용하여 다양한 조작이 가능한 점입니다. 즉 콜백 이벤트
Last Modified : 2019-08-06 20:15:11
안녕하세요. Mac 사용자들은 Wireless 무선기기로 마우스와 키보드를 많이 사용하실거에요... 저 역시 Wireless 제품을 사용하고 있는데요 이미 연결된 무선기기를 새로운 Mac에 연결하고자 할때 잘 안되는 경우가 있죠? 이럴때 어떻게 하면 연결이 될까요?사실 저도 이 방법을 몰랐을 때는 너무나 오랜 시간이 걸렸답니다... 계속 시도해보면 어쩌다 되는 경우가 있어서 자세히 알아보지 않았었는데 이번 기회에 확실히 하세요.# 키보드, 마우스 연결하는 방법아래 단계에 따라해 보세요!1. 먼저 기기(마우스 또는 키보드를 지칭합니다)의 전원버튼을 누릅니다.2. 상단의 녹색불이 한번 켜진 뒤 일정시간 뒤 자동으로 꺼지면 이미 연결된 기기가 있음을 의미합니다. 이 때는 새로운 Mac에 등록할 수가 없으니 이 부
Last Modified : 2019-08-14 22:01:25jquery 또는 자바스크립트를 사용해 마우스가 특정 엘리먼트에 들어왔을때 이벤트를 발생하게 하는 방법에 대하여 알아보고자 합니다. 우선 아래와 같이 두 가지 방법이 존재합니다.#1 마우스오버(마우스엔터), 마우스 올렸을때.mouseenter()// mouseover() 메소드를 사용한 방법.on('mouseenter', function();)// mouseover 이벤트를 사용한 방법#2 마우스아웃, 마우스 벗어났을때.mouseleave()// mouseout() 메소드를 사용한 방법.on('mouseleave', function();)// mouseleave 이벤트를 사용한 방법두 가지 모두 동일한 결과를 가져옵니다. 그럼 아래 예제를 보세요.<html><head><style type="text/css"
Last Modified : 2015-11-15 23:25:56마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.# 마우스 우측버튼 이벤트 구현시 고려할 점먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.우측 버튼시 이벤트 호출 방법브라우저 기본 이벤트 막는 방법마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시
Last Modified : 2018-06-21 15:42:49윈도우즈 10에서 블루투스 마우스를 연결하는 방법에 대하여 알아봅니다.# 윈도우즈 10 블루투스 마우스 연결하기요즘은 블루투스 마우스를 많이 사용합니다. 선이 없는 점은 다른 무선 마우스와 동일합니다. 다만 usb 방식의 무선 마우스는 usb에 연결하는 작은 통신장치 연결이 필요하죠. 다만 블루투스는 Bluetooth 방식으로 동작하므로 따로 연결하는 장치가 없어도 되죠.이런 이유로 설정하는 방법이 필요합니다. 일단 블루투스 마우스를 윈도우즈 10에 연결한다면 아래의 순서대로 연결합니다.1. 블루투스 마우스 페어링 준비하기; 블루투스 마우스의 전원을 확인하고 배터리가 없는 경우에도 넣어줍니다. 전원이 들어왔다면 페어링이 가능한 상태로 전환해야합니다. 마우스마다 다르니 참고하세요.2. 윈도우즈 블루투스 장치
Last Modified : 2019-08-06 22:00:47만약 VueJS를 사용하여 마우스 오버 이벤트(MouseOver)를 구현하려면 어떻게하는지 아래에서 자세히 알아봅니다."마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.@ mouseover.vue<button v-on="mouseover: doMouseOver">Click Me</button><button @mouseover="doMouseOver">Click Me</button>methods: { doMouseOver: function() { // ... };}위에서 사용된 button은 각각 v-on과 @mouseover를 사용하였습니다. 각각 알아보면...v
Last Modified : 2018-09-28 11:01:45마이크로소프트에서 나온 디자이너 블루투스 마우스를 컴퓨터에 연결, 페어링하는 방법에 대하여 알아봅니다.# 마이크로소프트 디자이너 마우스 페어링 방법먼저 윈도우즈와 Mac으로 구분할 수 있습니다. 블루투스 방식이므로 각 OS의 블루투스 환경에서 설정이 필요합니다. 이제 OS에 준비가 끝난 경우 이제 마우스를 동작시켜야합니다. 마우스 동작은 전원을 확인하고 없는 경우 배터리를 넣어줍니다.배터리를 연결하면 뒷면에 파란색 점등이 되는데 바로 연결되지는 않습니다. 이때 뒤에 있는 동그란 버튼을 3초간 눌러줍니다."뒤에 위치한 동그란 버튼을 3초간 눌러줄 것"이제 각 OS의 설정 화면에서 마우스를 찾았는지 확인해보세요. 찾은 경우 클릭하여 연결하면 모든 과정이 끝입니다.어렵지 않고 간단한 과정임에도 마우스 뒷면의 파란
Last Modified : 2019-08-06 22:00:39
웹페이지의 특정 요소 위에 마우스를 올릴 경우 기본 마우스 커서가 아닌 다른 마우스 커서가 나타나는 것을 볼 수 있습니다. 예를들어 뭔가가 실행 중인 경우 모래시계의 마우스 커서가 나타날 수 있고 또한 클릭 후 드래그를 수행할 경우 이동(드래그) 형태의 아이콘을 바뀌는 것처럼 말이죠.이처럼 마우스 커서는 현재의 상태를 알려줄 수 있는 좋은 인터페이스 역할을 하기도 합니다. 만약 CSS를 사용하여 마우스 커서를 변경하고 싶다면 어떻게 해야할까요? 이 경우 cursor 속성을 사용합니다.css의 cursor 속성은 다양한 마우스 커서를 선택할 수 있도록 도와줍니다. 이를 사용해 사용자에게 좋은 ui / ux 경험을 제공할 수 있으므로 상황에 따른 적절한 마우스 커서 변경은 반드시 필요하겠습니다. 그럼 아래에서는
Last Modified : 2019-08-25 20:32:54자바스크립트를 사용하여 선택된 영역, 드래그 영역의 텍스트를 가져올 수 있는 방법을 알아봅니다.# 자바스크립트 getSelection() 정보특정 범위의 텍스트가 선택 된 경우 getSelection()을 사용할 수 있습니다.getSelection()만약 선택된 범위에 콘텐츠가 있는 경우 getSelection()은 선택된 정보가 담긴 객체를 반환합니다. 즉 이를 사용하여 영역에 해당하는 텍스트 값 역시 가져올 수 있게 해줍니다.! 자바스크립트 getSelection() 예제보기아래는 간단한 예제입니다. 만약 선택된 영역이 존재하는 경우 이를 출력해봅니다. 예를들어 브라우저에서 아래왜 같이 "프리"만 선택된 경우를 생각해봅니다."웹이즈프리닷컴~ !"이제 코드를 작성하고 결과를 확인해봅니다.let select
Last Modified : 2020-11-18 15:21:24