공짜맨의 초보태그[홈페이지&포토샵]

최근에는 홈페이지나 웹 페이지 제작과 관련하여 "jQuery"란 용어를 많이 듣게 됩니다. jQuery는 한마디로 자바 스크립트(Java Script)의 라이브러리(Library)를 말합니다. 즉, 자바 스크립트를 보다 간단하고 효율적으로 사용하기 위해 만들어진 프로그램 모음이라고 할 수 있는데 실제로 자바 스크립트로 프로그래밍을 하다 보면 소스가 상당히 길어지고 복잡해지는 경우가 많으며 요즘같이 웹 표준이 중요시되는 현실에 서로 다른 웹 브라우저에서는 결과물이 동일하게 나오지 않는 경우도 있습니다. jQuery가 "The Write Less, Do More(덜 쓰고 더 많이 구현한다.)"라고 그 기본 목적을 표방하는 데서도 알 수 있듯이, 그래서 최근에는 jQuery를 사용하여 자바 스크립트를 보다 간단하고 효율적으로 사용하며 웹 표준에 맞게 작성된  jQuery를 사용하여 서로 다른  웹 브라우저에서도 항상 동일한 결과물을 보이게 하는 효과를 얻고 있습니다.   그러면  jQuery를 어떻게 사용하며 구체적으로 어떻게 프로그래밍되는지 몇 가지 간단한 예를 들어서 살펴보겠습니다. 먼저 아래의 소스를 보시죠.   ......................................................................................   <html> <head> <title>공짜맨의 초보태그 jQuery 예제</title>   <script src="jquery-1.7.2.min.js"></script>   <script type="text/java-script">  $(document).ready(function(){   $("input").click(function(){    alert(‎'정말 누르셨네요.^^');   });  }); </script>   </head> <body> <input type="button" value="누르세요.^^"> </body> </html>   ......................................................................................   `실행 결과-> <A href="http://totosoro37.cafe24.com/jqex/jqex1.htm">http://totosoro37.cafe24.com/jqex/jqex1.htm</A><A href="http://totosoro37.cafe24.com/sslec/ss24.htm"></A> (클릭)   위의 실행 결과 링크에서 확인하셨듯이 위 소스는 버튼을 누르면 알림창이 뜨는 결과를 가져오는 jQuery 소스입니다. 그러면 소스를 구체적으로 설명드리겠습니다.   `<script src="jquery-1.7.2.min.js"></script>-> jQuery를 사용하기 위해서 웹 페이지에 jQuery 라이브러리를 포함시켜줘야만 하는데 여기서는 해당 라이브러리를 포함시켜주는 과정입니다. <A href="http://jquery.com/">http://jquery.com/</A> 사이트를 가시면 오른쪽에 아래와 같이 해당 라이브러리 파일을 다운받을 수가 있는 메뉴가 있습니다. <img src="https://t1.daumcdn.net/cfile/cafe/1138633A4FE6BCCD2E" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="287" border="0" hspace="1" vspace="1" width="287" id="A_1138633A4FE6BCCD2E4EA4"/>   두 가지 종류 중에 PRODUCTION 파일을 다운받으시고 해당 파일을 자신이 사용하는 계정에 올려서 위와 같이 웹 페이지에 포함시켜줍니다. 사용하는 계정이 없으시면 위 사이트에서 사용하는 라이브러리 파일 주소 그대로를 사용하셔도 되지만 외국 계정이라 속도도 느리고 여러 문제를 감안해서 가급적 자신의 계정으로 사용하시는 편이 나으실 듯합니다.   `<script type="text/java-script">-> jQuery는 자바 스크립트이므로 사용하려면 이와 같이 자바 스크립트임을 선언해줍니다. ※다음 카페 게시판에 java-script란 단어를 사용하지 못하게 조치가 되어 있어서 부득이 java-script로 표시를 했는데 여기서 -는 빼고 사용하세요. 즉, <script type="text/java-script">~</script> 이 태그 사이에 jQuery 소스를 사용해줍니다.   `$(document).ready(function(){-> jQuery를 사용하기 위해서 기본적으로 선언해주는 부분으로 $는 jQuery임을 표시해주는 기호이며 (document)는 셀렉터(Selector)를 지정해주는 부분입니다. 셀렉터란 jQuery를 사용하여 효과를 주기 원하는 부분을 말하는 것으로 예를 들어서 ("p")는 태그를 사용하는 부분이 셀렉터가 되고, ("div")는 <div> 태그를 사용하는 부분이, ("#chk")는 id="chk"와 같이 chk라는 id로 지정된 부분이, (".ex")는 class="ex"와 같이 ex라는 클래스(Class)로 지정된 부분이 셀렉터가 됩니다. id와 클래스에 대한 보다 구체적인 내용은 본 카페 스타일 시트 강좌의 "스타일 적용하기2: 지정한 부분에 스타일 적용(클래스)", 스타일 적용하기3: 지정한 부분에 스타일 적용(id)" 강좌를 참조하시기 바랍니다.   (document)는 DOM의 document 객체를 셀렉터로 지정해준 부분이 되겠는데 .은  지정된 셀렉터와 이벤트를 서로 연결해주는 부분입니다. 즉, (document).ready라고 하면 document 셀렉터를 ready 이벤트에 연결하라는 의미입니다. 이벤트란 셀렉터에 주어지는 특정 사건을 이벤트라고 합니다. 예컨대 버튼을 클릭하는 것, 버튼을 드래그하는 것, 버튼을 클릭하고 마우스를 떼는 것 이런 것들이 하나의 이벤트들입니다.  이 부분은 document 객체 즉, "문서 부분이 완전히 로딩이 되면" 이라는 의미입니다. 이 소스를 넣어주는 이유는 문서가 완전히 로딩되기 전에 jQuery가 실행된다면 오류가 발생할 수도 있기 때문에 그것을 방지하기 위해 넣어주는 것으로 $(document).ready(function()은 문서 부분이 완전히 로딩되면 jQuery를 실행하자는 의미로 jQuery 소스는 항상 $(document).ready(function(){와 }); 이 사이에서 작성해준다 이렇게 이해하시면 되겠습니다.   `$("input").click(function() {-> 위의 설명을 이해하셨으면 이 부분도 이해가 되실 겁니다. <input> 태그를 사용하는 셀렉터를 click 즉,  마우스로 누르는 이벤트가 일어나면 {와 }); 사이에 작성된  jQuery를 실행하라는 의미입니다. <input> 태그로 버튼을 만들어줬기 때문에 버튼을 클릭하면 아래의 결과가 발생합니다.    `alert(‎'정말 누르셨네요.^^');-> "정말 누르셨네요"라는 알림창이 뜨게 하는 소스입니다. ※다음 카페 게시판에 alert란 단어를 사용하면 !가 붙도록 조치가 되어 있는데 여기서 !는 빼고 사용하세요.   결과적으로 위 소스는 버튼을 누르면  "정말 누르셨네요"라는 알림창이 뜨게 됩니다. 더욱 확실한 이해를 위해서 jQuery 소스를 2개 더 살펴보도록 하겠습니다. 아래의 소스를 보시죠.   ......................................................................................   <html> <head> <title>공짜맨의 초보태그 jQuery 예제</title>   <script src="jquery-1.7.2.min.js"></script>   <script type="text/java-script">  $(document).ready(function(){   $("#chk").click(function(){    $(".ex").fadeOut();   });  }); </script>   </head> <body> <input type="button" id="chk" value="누르세요.^^"> <div class="ex"> 버튼을 누르시면 이 글자는 사라집니다.^^ </div> </body> </html>   ......................................................................................   `실행 결과-> <A href="http://totosoro37.cafe24.com/jqex/jqex2.htm">http://totosoro37.cafe24.com/jqex/jqex2.htm</A> (클릭)   위 소스는 버튼을 누르면 버튼 아래의 글자가 서서히 사라지는 결과를 보여줍니다.   `$("#chk").click(function(){-> chk라는 id로 지정된 셀렉터를 click 즉,  마우스로 누르는 이벤트가 일어나면 {와 }); 사이에 작성된  jQuery를 실행하라는 의미입니다. <input> 태그 안에 id 속성값으로 chk을 넣어줬기 때문에 버튼을 클릭하면 아래의 결과가 발생합니다.   `$(".ex").fadeOut();-> ex라는 클래스로 지정된 셀렉터에 fadeOut() 메서드의 효과(Effect)를 주라는 의미입니다. 메서드(Method)는 셀렉터에 특정 기능을 수행하게 하는 일종의 명령어를 메서드라고 합니다. fadeOut() 메서드는 대상을 서서히 사라지게 하는 효과를 줍니다.  그리고 jQuery 문장의 끝에는 세미 콜론(;)을 붙입니다. jQuery나 자바 스크립트나 문장의 끝에 세미 콜론을 굳이 붙이지 않아도 줄바꿈만 되면 정상적으로 소스가 작동을 하지만 기본을 지키는 의미에서 붙여주도록 합니다.   다음은 아래의 소스를 살펴보겠습니다.   ......................................................................................   <html> <head> <title>공짜맨의 초보태그 jQuery 예제</title>   <script src="jquery-1.7.2.min.js"></script>   <script type="text/java-script">  $(document).ready(function(){   $("#chk").click(function(){    $("div").animate({height:300},"slow");    $("div").animate({width:300},"slow");    $("div").animate({height:100},"slow");    $("div").animate({width:100},"slow");   });  }); </script>   </head> <body> <input type="button" id="chk" value="누르세요.^^"> <div style="background:#00cc00; height:100px; width:100px; position:relative"> </div> </body> </html>   ......................................................................................   `실행 결과-> <A href="http://totosoro37.cafe24.com/jqex/jqex3.htm">http://totosoro37.cafe24.com/jqex/jqex3.htm</A><A href="http://totosoro37.cafe24.com/jqex/jqex3.htm"></A> (클릭)   위 소스는 버튼을 누르면 버튼 아래의 박스가 이리저리 움직이는 결과를 보여줍니다.   ` $("div").animate({height:300},"slow");-> <div> 태그를 사용하는 셀렉터에 설정된 animate() 메서드의 효과를 주라는 의미입니다. animate() 메서드는 대상을 움직이게 하는 효과를 줍니다.  결과적으로 위 소스는 버튼을 누르면 각 animate() 메서드에 4번 설정된 대로 박스가 4번 이리저리 움직이게 됩니다. 일반적인 자바 스크립트로 해당 효과를 구현하는 것보다 소스가 아주 간결합니다.    jQuery의 이벤트나 메서드 그 외 여러가지 구성 요소는 <A href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</A> 이 사이트로 가시면 자세한 사용법 등을 확인하실 수가 있으니 참조하시기를 바랍니다. animate() 메서드 대해서는 아래의 웹 페이지에 자세한 설명이 되어 있습니다. <A href="http://api.jquery.com/animate/">http://api.jquery.com/animate/</A>   위의 예제들에서 살펴보았듯이 jQuery 사용의 기본 형태를 정리하자면 아래의 그림과 같습니다. <img src="https://t1.daumcdn.net/cfile/cafe/1658324D4FF7CBD201" class="txc-image" style="FLOAT: none; CLEAR: none" actualwidth="296" border="0" hspace="1" vspace="1" width="296" id="A_1658324D4FF7CBD201E838"/>   이상 jQuery에 대해서 기초적인 사항을 살펴보았습니다.   ※예제 소스는 첨부 파일을 다운받으시면 됩니다.   `강좌 불펌 금지   <a href="javascript:checkVirus('grpid%3Dw05%26fldid%3DMAqs%26dataid%3D1%26fileid%3D9%26regdt%3D20120624165849')"><img src="https://t1.daumcdn.net/daumtop_deco/icon/icon.hanmail.net/editor/p_zip_s.gif" border="0" alt="첨부파일" class="vam"/> jQuery 예제 소스.zip</a>