정보공간_1

[2기 부산 노형식] jQuery를 이용한 생산성 있는 Web 개발 본문

IT 놀이터/Elite Member Tech & Talk

[2기 부산 노형식] jQuery를 이용한 생산성 있는 Web 개발

알 수 없는 사용자 2012. 9. 18. 00:32


------------------------------------------------------------------------------------------------------------------------


1. jQuery 를 이용한 javascript 코딩

  지난 시간 JQM를 이용한 Mobile PR Web App 제작 에서 JQM를 이용한 모바일 페이지를 직접 구현해 보았습니다. JQM에서는 모바일 페이지를 위한 틀과 테마를 이미 제공해 주기 때문에 사용자의 입장에서는 손쉽게 코드를 바꾸는 것 만으로도 쉽게 모바일 웹앱을 제작 할 수 있었습니다. 이렇듯 웹에 있어 편리함을 주는 JQM의 핵심 코어에는 이름에서도 알 수 있다 시피 jQuery가 포함 됩니다. 이번 시간에는 지난 번의 연장선으로 JQM를 통해 맛보기로 보았던 jQuery의 정체에 대해서 공부해보도록 하겠습니다. 기본적으로 보시는 분들께서 HTML과 CSS 그리고 javascript의 기본 문법에 대해서 숙지가 되어 있다고 생각하고 진행 토록 하겠습니다. 



< jQuery는 웹 코딩의 생산성을 향상 시켜 줍니다. >



2. jQuery의 include 방법

  C언어의 Header 파일과 마찬가지로 Web에서도 <script> 태그를 이용해 외부 JS파일을 include 할 수 있습니다. <head>태그의 하위 태그에 다음과 같이 사용 하시면 됩니다. (script 태그와 link 태그를 이용한 외부 환경 파일 include 방법은 지난 시간 주제에 포함되어 있습니다.) 

<head>...

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

...</head>

  직접 JS파일을 다운로드 받은 후 링크를 하셔도 무방합니다. (http://jquery.com 사이트에서 최신 버전을 다운로드 가능합니다.) 연결이 되었다면 이제 jQuery를 이용할 준비가 되었습니다.




3. HTML 엘리먼트 요소의 선택자 역할

  HTML 문서에 있는 각각의 객체 요소(DOM)에 의미를 부여하기 위한 방법입니다. 쉽게 말해서 어떤 HTML 요소를 선택하는 올가미 역할을 생각하시면 됩니다. 예로 들어 <div> 태그로 나누어진 영역에 포함되어 있는 엘리먼트 요소들의 전체 폰트 색상을 변경하고자 한다면 일반적으로 CSS를 이용하여 color:red; 와 같이 사용되게 됩니다. 하지만 이는 CSS에 미리 기재되어 있어야 하는 정적인 방법일 뿐이고 javascript를 이용하면 동적인 변화가 가능합니다. 그렇게 하기위해서는 <div> 요소를 선택하고 CSS를 변경하는 함수를 호출해주면 됩니다. 잘 이해가 안되실 수도 있는데, 직접 코드를 통해 보여드리도록 하겠습니다.

<script>

$('#menu').css("color","red"); //menu 하위 영역에 모두 적용

</script>

..............

<div id="menu">

<p style="color:red">P태그 요소입니다. Style 태그를 이용하여 CSS를 적용 하였습니다.</p>

<p>P태그 요소입니다. 적용된 스타일이 없습니다.</p>

</div>


※ 기본적인 jquery의 선택자의 구성

  $는 jQuery의 문법을 사용하는 정의 표현을 뜻하고, #는 ID값을 찾겠다는 의미가 됩니다. 위의 소스에서 보듯이 <div id="menu">라고 ID값을 menu로 명명하였습니다.#menu 라는 것은 menu라는 id값을 가진 HTML요소를 선택하라는 뜻이 됩니다. <div class="menu">와 같이 class를 이용하는 경우에는 $('.menu')로 선택자를 이용하시면 됩니다. 그럼 여기서 잠깐! jQuery가 코딩 생산성을 향상 시켜 준다고 앞서 말씀을 드렸는데 정말 그런 것인지 한번 선택자를 통해 알아 보도록 하겠습니다. 

Before:     document.getElementById('menu'); //jQuery 미사용

After:          $('#menu'); //jQuery 사용

  어떠신가요? javascript가 좀 더 직관적이고 간단 해졌다는 것을 느끼 실 수 있을 겁니다. 선택자를 차치하고도 많은 면에서 코딩 생산성 향상에 도움을 줍니다.



< 선택자는 태그의 ID값을 통해 HTML 엘리먼트를 찾고 선택합니다. >



4. 엘리먼트 선택 후 할 수 있는 일

  이제 지금 글을 보시는 분들은 자바스크립트를 통해 HTML 요소를 자유자재로 선택 할 수 있게 되셨습니다. 그것도 jQuery라는 아주 좋은 도구를 통해 말입니다. 그럼 이제 HTML 엘리먼트들을 선택 후 할 수 있는 작업에 대해서 간단하게 나열해 보도록 하겠습니다.

가. CSS Style의 변경

나. 웹페이지에 Content 추가/삭제

다. 태그의 속성 변경

라. 요소에 대한 이벤트 추가

  그렇습니다. 웹에서 할 수 있는 거의 모든 동적 작업들을 jQuery를 통해서 구현 가능합니다. 이 밖에도 다양한 기능들이 있지만 대표적으로 나열하자면 위의 리스트와 같습니다. 그럼 하나하나 예제를 통해서 진행 하도록 하겠습니다. 이러한 기능들을 통해서 동기식이고 정적인 웹에 생명을 불어 넣을 수 있습니다.


가. CSS Style의 변경

$('#div id').css("css 속성","css 값");

ex) $('#menu').css("color","blue"); //menu 요소 글씨 파랗게

  선택자에 .CSS를 걸어 줌으로써 CSS 속성 변경이 가능합니다. CSS 속성 부분에서는 실제 사용 되는 CSS 문법을 그대로 적어주시면 됩니다. 


나. 웹페이지에 Content 추가/삭제

  웹페이지에 동적으로 HTML 요소를 생성할 필요가 있을 때 다음과 같이 이용 해주시면 됩니다.

$('#content').html('<p>p태그가 안에 추가됩니다.</p>');

// content ID를 가진 요소의 내용을 변경합니다.


$('# content ').append('<p>p태그가 뒤에 추가됩니다.</p>');
// content ID를 가진 요소 뒤에다 추가 합니다.


$('# content ').prepend('<p>p태그가 앞에 추가됩니다.</p>');

// content ID를 가진 요소 앞에다 추가 합니다.


$('# content ').load('외부 문서 주소');

// content ID를 가진 요소 안에 외부 문서를 불러옵니다.


다. 태그의 속성 변경

  HTML 요소 중에 속성값을 가지고 있는 태그 들을 동적으로 조작 할 수 있는 기능입니다. 예로 들어 <IMG> 태그는 이미지의 주소값을 뜻하는 SRC 속성을 가지고 있습니다. SRC의 속성 값을 변경 하게 된다면 화면에 보이는 이미지가 변경 되게 됩니다.

<img id="image1" src="1.jpg">

 //원래 태그

...

$('#image1').attr("src","2.jpg");

 //태그의 속성 변경

...

<img id="image1" src="2.jpg">

 //처리 후 결과

  <img> 태그 뿐만 아니라 <a>태그의 경우에도 href 속성 값을 변형 시키면 하이퍼링크 주소를 동적으로 바꿀 수 있습니다.


라. 요소에 대한 이벤트 추가

  HTML 요소에 클릭이나 마우스오버와 같은 이벤트를 걸어 줄 수 있습니다. 선택자로 선택 가능한 모든 요소에 대해서 가능하며 스타일이 지정되지 않은 <div>와 같은 경우에는 이벤트를 추가하여도 적용 되지 않습니다.


$('#id').click(function(){ 처리될 내용 });


예)

$('#menu').click(function(){

alert("클릭 되었습니다.");

});


//실제로 웹상에서 menu 요소를 클릭하면 alert 창이 뜨게 됩니다.

  HTML 요소에 추가 가능한 이벤트는 .click 뿐만 아니라 .mouseover, .mouseout 등도 설정 가능합니다. 보통 웹 상에서 mouseover와 mouseout 를 통해서 롤오버 메뉴를 구현을 하곤 하는데, jQuery를 이용하면 각각의 이벤트를 지정할 필요 없이 hover 함수를 통해 간편하게 구현 할 수 있습니다.


$('#id').hover(function(){},function(){});

//hover 함수에는 function() 지정되는 매개변수를 2개 받을 수 있게 됩니다. 
//첫번째 function()에는 mouseover시에 지정되는 처리가 지정되며 두번째 function()에는 mouseout시의 처리를 입력 하면 됩니다.

예)

$('#menu).hover(function(){
    alert("마우스가 들어 왔습니다.");
},function(){
    alert("마우스가 나갔습니다.");
});


마. HTML 요소의 숨김과 해제

  HTML 요소를 화면상에 보이게 하거나 숨기게 할 수 있습니다. CSS의 visibility 와 비슷하다고 생각하시면 됩니다. 선택자에 show()와 hide()를 붙여주면 쉽게 구현 가능합니다. show()와 hide()와 유사한 기능으로 fadeIn()과 fadeOut()이 있습니다. fadeIn()의 경우에는 show()의 기능도 가지고 있지만 약 1초의 시간의 애니메이션 효과를 가지고 있습니다. fadeIn(4000)과 같이 써주시면 4초가 걸리며 나타나게 됩니다. 즉 파워포인트의 페이드인, 페이드아웃 효과와 같다고 할 수 있습니다. 


5. 마치며

  이번 주제에서는 직접 jQuery를 설치 해보고 선택자를 통해 HTML 요소를 변경 하는 부분까지 진행 하였습니다. 적절한 자바스크립트의 이용은 웹사이트의 접근성 및 UX측면에서의 큰 이점을 주게 됩니다. 다음 시간에 이러한 이점을 극대화 할 수 있는 비동기식 처리 방법인 Ajax에 대해서 이야기 하도록 하겠습니다. 웹상에서 정보가 전달되고 페이지가 재로딩 되는 것이 아니라 필요한 부분의 엘리먼트만 비동기식으로 변경 할 수 있는 Ajax 기술에 대해서 이야기 할 예정입니다. 오늘 이야기 한 jQuery에서도 ajax함수인 .ajax() 지원하기 때문에 좀 더 수월하게 구현이 가능합니다. 이상으로 jQuery를 이용한 생산성 있는 Web 개발이라는 주제로 한 포스팅을 마치도록 하겠습니다. 감사합니다.





'IT 놀이터 > Elite Member Tech & Talk' 카테고리의 다른 글

[2기 부산 최은진] RTP(Real-time Transport Protocol)의 이해  (3) 2012.09.18
[2기 부산 배보람] 쉘 프로그래밍을 이용한 간단한 GUI 프로그램 만들기  (0) 2012.09.18
[2기 광주 박이근] Feature Extraction (RANSAC)  (0) 2012.09.17
[2기 강남 권도일]Service와 Broadcast-Reciever를 이용한 나만의 LockScreen 만들기  (1) 2012.09.17
[2기 신촌 김태호] Jersey + Tomcat을 이용한 REST 서비스 구축  (0) 2012.09.17
'IT 놀이터/Elite Member Tech & Talk' Related Articles more