강의를 편하게 줌잇(ZoomIt)~~!!



줌잇(ZoomIt) 이라는 유틸을 소개하려 한다.

화면 확대/축소,  그림, 글자 등을 강의중 편리하게 사용하게 해주는 툴이다.




위와 같이 강의를 하다보면 소개 또는 설명을 위해 프리젠테이션으로 준비한 자료이외에 화면을 보여야 할 경우가 많다. 이런 경우에 글자 또는 이미지등이 크기가 빔프로젝트로 잘안보이는 경우에는 강의하는 입장에서는 매우 곤란해 진다.  이럴때 이 유틸은 사용 화면을 확대해서 보여준다면 그러한 문제를 해결할 수 있다.


다운로드 : ZoomIt.exe


위의 파일은 다운로드 받으면된다. 별도의 설치는 필요 없으며, 클릭해서 실행하면 아래와 같은 트레이아이콘이 생긴다.



아이콘을 더블클릭하면 옵션창이 나오는데 여기서 다양한 설정이 가능하다.


1. Zoom 설정



ZoomIt에 대한 기본 설정을 한다. zoom toggle 에 설정된 단축키를 누르면 설정된 배율로 화면이 줌인되고 마우스를 클릭하면 화면에 낙서장 처럼 그릴 수 있는 그리기 상태가 된다. 또한 줌인 상태에서 마우스 휠을 통하여 확대/축소가 가능하다.


위에서 설정된 Ctrl+1 를 통해 화면을 바로 확대할 수 있다.


사용법 : 이것만 알아도 된다~

Ctrl+1 (화면 확대) -> 마우스휠(확대조절) 또는 이동 

-> 마우스좌클릭(그리기 모드) -> 그리면서 설명(마우스로 드래그)


 항목

 설명

 Zoom Toggle

 줌을 실행할 단축키를 변경할 수 있다.

 animate zoom in and zoom out

 줌이 될때 애니메이션 형태 줌을 할 것인지, 단축키를 누르자마자 해당줌으로 화면이 표시될지를 선택한다.(기본은 켜있는 상태이다. 켜있는 상태가 사용시 더 줌되는 위치가 보는 사람에게 명확하게 보여진다.)

 specify the initial level of magnification when  zooming in

 단축키를 눌렀을 때 줌되는 레벨이다. 기본은 두배로 설정되어 있다.



2. LiveZoom



기본 줌은 단축키를 사용해서 줌한 경우에 마치 해당 화면이 이미지처럼 바탕에 보여지는 상태로 화면을 확대/축소/이동을 하다. 다시말해 화면안의 프로그램, 웹화면 등에 대한 클릭 및 기능 사용이 안된다.

라이브 줌은 화면에 보여지는 프로그램들의 기능을 그대로 사용하면서 화면만 확대하는 기능을 제공한다. 라이브 줌 상태에서는 Ctrl+UP(확대), Ctrl+Down(축소) 의 단축키를 제공한다.  실재로 사용하면 자주 사용하지는 않는 기능이다.


항목 

 설명

 LiveZoom Toggle

  라이브 줌의 단축키를 설정한다.



3. Draw



기본 줌을 사용하고 마우스 좌클릭시 바로 그리기 모드가 되는데, draw 에 설정된 단축키를 통해서 줌이 아니어도 언제나 화면에 그리기 상태로 변경할 수 있다.

또한 draw 상태일때는 키보드의 r(빨강), g(초록), b(파랑), o(주황), y(노랑), p(분홍) 키를 누르면 그리기 펜의 색을 변경할 수 있다. 보통 마우스를 펜처럼 사용하여 화면에 표시가 가능하다.

기타 기능으로


shift 키를 누르고 마우스 드래그 : 직선

ctrl 키를 누르고 마우스 드래그 : 사각형

tab 키를 누르고 마우스 드래그 : 원

shift + ctrl 키를 누르고 마우스 드래그 : 화살표


제공한다.


항목 

 설명

 Draw w/out Zoom

  드로우 상태로 변경을 위한 단축키를 설정한다.


* 그리기 예시



위의 그림의 주황색이 ZoomIt 을 통해서 그린 부분이다.


4. Type



그리기(draw) 상태일 때 단축키 t 를 통해서 텍스트를 입력할 수도 있다. 마우스 클릭시 다시 그리기 상태가 된다.


항목 

 설명

 Set Font

  텍스트 입력상태에서 입력되는 텍스트의 글꼴을 설정한다.


5. Break




이 기능은 강의 중간 휴식을 위한 기능이다. 이런 것도 생각했다니 재미있다. 이 기능을 사용하면 휴식시간에 설정된 시간 만큼 화면에 시간 카운트가 시작된다. 10분이면 10:00 -> 0:00 으로 진행된다.





alt-tab 키로 다른 화면으로 변경하여 카운터가 안보이는 경우에는 ZoomIt 트레이 아이콘을 클릭하면 다시 화면에 카운터가 보여진다.

시간은 마우스휠 또는 up/down 키(key) 로 늘리거나 줄일 수 있으며, esc 키로 종료할 수 있다.


항목 

 설명

 Start Timer

 휴식기능의 단축키를 설정한다.

 Timer

 휴식시간의 길이를 설정한다(분단위)

 Show Time Elapsed After Expiration

 이 기능이 켜져 있으면 휴식 시간이 끝난 이후에도 얼마나 더 지나 갔는지를 보여준다

 예)  10:00 휴식 시간이 종료되오 0:00 이 된후 

       시간이 지남에 따라 0:00(-0:25) 이런식으로 보여짐

 기능이 꺼져있다면 휴식시간 종료후 0:00 상태만 보여지게 된다


5.1 Advanced


이 기능은 break 의 Advanced 를 눌렀을 때 나오는 화면이다.



휴식 화면에 대해 좀더 상세히 설정할 수 있다.


항목 

 설명

 Play Sound on Expiration

 휴식이 종료 되면 특정 사운드가 나오도록 하는 기능을 활성화 한다.

 Alarm Sound File

 휴식시간 종료시 동작할 사운드 파일을 선택한다( Play Sound on Expiration 기능이 켜져있을 경우 사용가능하다.)

 Time Opacity

 화면에 도시되는 휴식시간 카운터의 투명도를 변경한다.

 Time Position

 휴식시칸 타운터가 표시될 화면 위치를 정한다.(기본은 중간이다. 캡쳐화면에서는 변경한 상태이다)

 Show background bitmap

 카운터의 배경화면을 사용한다.

 Use faded desktop as background

 컴퓨터의 원래 화면을 희미하게 한 상태로 카운터의 배경화면으로 사용한다(Show background bitmap 을 사용상태에서만 설정 가능하다)

 Use image file as background

 특정 파일을 선택하여 휴식 카운터의 배경화면으로 사용한다.(Show background bitmap 을 사용상태에서만 설정 가능하다)

 Scale to screen

 특정 파일을 선택하여 휴식 카운터의 배경화면으로 사용된 이미지를 화면 크기에 맞도록 조절한다. 이기능이 꺼져 있을 경우 선택된 이미지크기 그대로 화면 중간에 도시된다.(Show background bitmap 을 사용상태에서만 설정 가능하다)




여기 까지가 ZoomIt 의 기능을 살펴보았다.


이렇게 보면 많은 기능을 제공하지만 실재로 사용되는 건 기본 줌 단축키(사용자 변경이 없다면 ctrl+1)과 그리기, 그리고 텍스트 입력(t) 정도만 사용해도 사용하는데 전혀 불편함이 없을 것이라 생각된다.


그렇지만 잊지말아야 할 것은 이러한 유틸은 결국은 보조이며 제일 중요한 것의 강의 그자체의 내용이라 생각된다.


이상~~~

이번 장에서는 이벤트에 대해 조금더 상세히 다루도록 하겠다.


* 마우스 이벤트의 종류


마우스 이벤트 

설명 

 click

 마우스를 클릭했을 때 발생

 dblclick

 마우스를 더블 클릭했을 때 발생

 mouseenter

 마우스가 해당요소 안으로 진입했을 때 발생

 mouseleave

 마우스가 해당요소 밖으로 나갔을 때 발생

 mousedown

 마우스의 왼쪽키가 눌린 경우

 mouseup

 마우스의 눌렸던 왼쪽키가 풀린 경우

 hover

 mouseenter 와 mouseleave 이벤트의 묶음


syntax>

$(셀렉터).이벤트액션(실행할 function)


mouseenter 와 mouseleave 이벤트는 다음 그림과 같다.



해당 태그 안으로 진입할 경우 mouseenter 이벤트가 밖으로 나갈 경우는 mouserleave 이벤트가 발생한다. 이 두가지 동작을 하나로 합친 이벤트가 hover 이다



$("table").mouserenter(function(){

alert("테이블에 들어옴");

});

$("table").mouserleave(function(){

alert("테이블에서 나감");

});



hover 로 변경

syntax>

$(셀렉터).이벤트액션(마우스 enter 이벤트 function , 마우스 leave 이벤트 function)


$("table").hover(function(){

alert("테이블에 들어옴");

    },

    function(){

    alert("테이블에서 나감");

});



키보드 이벤트의 종류


키보드 이벤트 

설명 

 keypress

 키입력에 대한 이벤트, keydown,keyup 과 다른 것은 쉬프트, 탭 등의 키는 이벤트를 발생시키지 않는다. 또한 한글에 대해서 이벤트를 발생하지 않는다.

 keydown

 키가 눌렸을 때 이벤트

 keyup

 키의 눌림이 풀렸을 때 이벤트


폼 이벤트의 종류


폼 이벤트 

설명 

 submit

 서버의 전송을 위한 이벤트

 change

 내용이 변경되었을 때 이벤트

 focus

 해당 요소가 포커스되었을 때 발생

 focusin

 해당 요소가 포커스되었을 때 발생하지만 focus 와의 차이는 focus 이벤트보다 먼저 발생한다.( focusin은 focus에 진입되는 순간, focus 완료되는 순간 focus 이벤트)

 blur

 해당 요소의 포커스가 빠져나갔을 때 발생

 focusout

 해당 요소의 포커스가 빠져나갔을 때 발생하지만 blur 와의 차이는 blur 이벤트보다 먼저 발생한다.


document/window 이벤트의 종류


document/window 이벤트 

설명 

 load

 로딩이 완료되었을 때의 이벤트

 resize

 크기가 변경되었을 때의 이벤트

 scroll

 스크롤이 변경되었을 때의 이벤트

 unload

 종료시 발생하는 이벤트





아래에서 발생되는 간단한 발생이벤트 및 순서를 테스트해보도록 하자.
(그려진 큰박스/작은박에 마우스 이동 또는 클릭을 해보자. 또는 그 하단의 textbox 에 focusing 을 해보도록 하자)


이벤트 테스트

큰박스
작은박스
발생이벤트




* 이벤트 테스트에 바인딩한 이벤트

 태그

 이벤트

 큰박스/작은박스

  • mouseenter
  • mouseleave
  • click
  • dblclick

 텍스트박스

  • focus
  • blur
  • focusin
  • focusout
  • keydown
  • keypress
  • keyup


'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 6  (0) 2014.12.16
[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24

이번에는 셀렉터에 대해 알아보도록 하자.

셀렉터는 해당 요소를 선택하기 위한 선택자이다. 정규식처럼 약속된 구문에 의해 해당하는 요소를 선택하여 반환해 준다.


제이쿼리의 셀렉터는 멀티브라우저 오픈 소스 셀렉터 엔진인 시즐(Sizzle)을 사용하고 있다.

기본적으로 css 의 셀렉터를 생각하면 된다.


기본 흐름은 다음과 같다.




셀렉터의 검색엔진을 통해 해당 요소를 검색하고 jquery 구문의 action 이 실행된다. 검색된 요소가 없다면 aciton 이 실행되지 않는다. 


가장 많이 사용하는 기본 셀렉터는 다음과 같다.

  • 태그이름
  • # + id 이름
  • . + 클래스이름


셀렉터 예시


 예시

설명

 $("*")

 모든 요소

 $(this)

 객체 자신에 대한 요소

 $("span")

 해당 span 태그에 대한 요소

 $("#deviceID")

 해당 id 를 포함한 요소

 $("p,span")

 p 태그와 span 태그  요소

 $("p.title")

 해당하는 p 태그 중 해당 클래스를 포함한 요소

 $("ul li:first")

 첫번째 ul 태그의 첫번째 li 에 대한 요소

 $("ul li:first-child")

 모든 ui 태그의 첫번째 li 에 대한 요소

 $("[name]")

 속성 name 을 가진 모든 요소

 $("tr:even")

 tr 태그중 짝수번째 요소

 $("tr:odd")

 tr 태그중 홀수번째 요소

 $("tr:eq(5)")

 tr 태그중 5번째 요소

 $(":disabled")

 속성 tag 중 disabled 된 모든 요소



아래의 창에서 간단히 확인이 가능하다.

좌측의 셀렉터를 클릭하면 해당하는 태그들이 선택이 된다.


 테스트(해당문구클릭)

 확인창

  • $("*")
  • $("p")
  • $("p,span")
  • $(".title")
  • $("tr:even")
  • $("tr:odd")
  • $("tr:eq(2)")
  • $("p:last")
  • $(":text")

<span>span태그</span>

<p>p태그</p>

<p class="title">p태그</p>

<table>

<tr><td>0</td></tr>

<tr><td>1</td></tr>

<tr><td>2</td></tr>

<tr><td>3</td></tr>

</table>

  

<p> p태그 마지막 </p>


'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21

지난 강습에는 jquery 의 기본 설정 및 로딩 이벤트를 바인딩하는 법에 대해 간단히 다루었다.


이번에는 클릭이벤트를 다는 법~에 대해 간단히 다루어 보도록 하겠다.



jquery 기본 syntax>

$(셀렉터).action()


$(document).ready(function(){});


지난 시간 이 구문도 같은 원리이다. document 가 로드되어 dom 을 사용할수 있게 되었을때 function 안에 구문이 동작하라는 의미이다.


click event syntax>

$(셀렉터).click(실행될 function) 


위와 같은 방식으로 클릭 이벤트를 해당 객체에 바인딩할 수 있다.

단~ 지난번 내용인 로딩 이벤트 안 또는 다른 이벤트 실행 이후에 바인딩해야 한다.

이유는 스크립트는 컴파일이 미리 되어있지 않은 언어이기 때문에 순차적으로 실행한다.


로딩 이벤트에 처리 안했다면 다음과 같은 상황이 된다.



코드로는 다음과 같다.


방법 A.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        $("#clickBtn").click(function(){

               alert("버튼 클릭");

        });

</script>

</head>

<body>

        <input type="button" id="clickBtn" value="버튼" />

</body>

</html>


방법 B.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

</head>

<body>

        <input type="button" id="clickBtn" value="버튼" />

</body>

<script type="text/javascript">

        $("#clickBtn").click(function(){

               alert("버튼 클릭");

        });

</script>

</html>


방법 A 의 경우에는 script 동작 시점에 버튼을 찾지 못했기 때문에 바인딩할 요소가 없어서 이벤트가 바인딩 되지 않는다.

방법 B 의 경우는 button 객체 생성이후이기 때문에 바인딩이 된다.


이러한 차이가 없이 프로그래밍하기 위해서는 로딩완료 시점에 바인딩을 해주면 된다.


$(function(){

  $("#clickBtn").click(function(){

     alert("버튼 클릭");

});

});


여기서 또 하나~!

버튼을 선택하기 위해서 #clickBtn 을 사용하였는데 이를 셀렉터라고 한다.

우선 이번에는 간단히 이야기하자면

# 을 붙이면 id 를 가르킨다.

즉 clickBtn 이라는 id 를 가진 요소에 이벤트를 달았다고 생각하면 된다.


다음 장에서는 셀렉터에 대해 이야기 하도록 해보자.



'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21



제이쿼리(Jquery) 란?


제이쿼리(jquery)는 자바스크립트로 된 프레임웍으로 프로그래머의 브라우져별 자바스크립트의 api 차이를 고려할 필요없이 동일한 코드의 작성을 지원하며, 자바스크립트의 코딩을 단순화 하였다.


즉 간단히 제이쿼리는 자바스크립트를 편리하게 사용하게 해주는 라이브러리 정도로 생각하면 된다.




자 그럼 jquery를 사용하기 위해서는 어떻게 해야하는가?

 

1.Jquery 의 CDN 주소로 포함시킨다.


      CDN 은 Contents Delivery Network 의 약자. 간단히 외부서버에서 제공하는 jquery를 include 시킨다고 생각하면 된다.


자바스크립트 라이브러리들의 cdn 주소를 확인하는 사이트 : https://cdnjs.com/



jquery 홈페이지에서 cdn 주소확인 : http://jquery.com/download/

 


 

다음의 구문을 소스에 포함시킨다.


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>


따라서 우리는 위와 같이 jquery를 포함 시킬 것이다.(cdn 으로 jquery 를 제공하는 곳은 많기 때문에 꼭 위와 동일하지 않아도 된다)



 

2. 해당 시스템 또는 로컬 서버에 해당파일은 포함시키고 해당 주소를 작성 화면에 포함 시킨다.


http://jquery.com/download/ 에서 해당 jquery 다운로드 받고 로컬서버등에 위치시킨다.

 

<script src="jquery 파일의 주소"></script>

 

 



자 간단하게 cdn으로 jquery를 실행해 보자.



소스는 다음과 같다.


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        jQuery(document).ready(function() {

               alert("hello jquery");

        })

</script>

</head>

<body>

</body>

</html>


hello jquery 라는 alert 창이 떳다면 정상 작동한 것이다.



이것을 자바스크립트로 구현하면 다음과 같다.


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>javascript</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        function init(){

               alert("hello javascript");

        }

</script>

</head>

<body onload="init()">

</body>

</html>



둘 예시는 화면이 로드되는 시점에 alert의 내용을 도시하는 내용이다.


jquery 의 ready 이벤트는 다음과 같이 축약이 가능하다. 


방식 1.

jQuery(document).ready(function() {

        alert("hello jquery");

})


방식 2. jQuery 를 $ 로 축약( jQuery  = $  동일하게 사용이 가능하다)

(document).ready(function() {

        alert("hello jquery");

})


방식 3. ready 생략

(function() {

        alert("hello jquery");

})


3가지의 결과는 동일하게 나온다.


첫강 끝~

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21

+ Recent posts