login register Sysop! about ME  
qrcode
    최초 작성일 :    2009년 04월 01일
  최종 수정일 :    2009년 04월 01일
  작성자 :    Taeyo
  편집자 :    Taeyo (김 태영)
  읽음수 :    100,377

강좌 목록으로 돌아가기

필자의 잡담~

본격적인 jQuery의 기초 설명에 들어갑니다~
그 시작은 셀렉터 입니다~
jQuery란?

jQuery는 가볍고 빠르며, 간결한 오픈소스 스크립트 라이브러리입니다. 이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들 즉, HTML 문서 트래버스, 이벤트 처리, 애니메이션, Ajax 상호 작용 등을 지원하여 빠르고 견고하게 리치 웹 애플리케이션 개발을 할 수 있도록 지원합니다.

이러한 jQuery의 기능적인 특징을 핵심 키워드만 뽑아서 정리하자면,

  • 막강한 CSS 셀렉터
  • 크로스 브라우저 지원
  • 메서드 체인
  • Ajax 지원
  • 풍부한 플러그 인 지원

정도로 설명할 수 있지 않을까 싶네요. 물론, 이 외에도 많은 것들이 제공되지만 말이죠.

개발 준비사항

처음 jQuery를 공부하고자 맘을 먹고, jQuery 웹 사이트에 가면 이런 생각이 들지도 모르겠습니다.

"에~ 그러니깐, 어디서부터 뭘 어떻게 봐야 하는 거지?"

그렇습니다. 어린 시절부터 완전정복, 맨투맨 류의 참고서적에 길들여져 있는 우리들은 항상 신기술을 접할 때 어떻게 시작해야 할지를 막막해하곤 하죠. 이는 비단 저도 예외가 아닙니다. 하지만, 언제나 신기술이 나왔을 때 가장 좋은 설명서는 해당 웹 사이트에 공개되어 있는 튜토리얼이라는 것은 변함이 없는 사실이지요(물론, 저의 경우는 인터넷 서점에서 관련 서적을 구입한 뒤, 1독이상을 하고 난 뒤에 튜토리얼을 보는 편입니다만, 이는 지극히 개인적인 성향에 따라 다른 부분입니다). 여러분도 성향에 따라 튜토리얼을 보셔도 되고, 제 강좌를 보셔도 되고, 서적을 구매해서 보셔도 됩니다(제 강좌에는 너무 의존하지 마세요 ㅎ).

공부하는 방식은 각자의 선택에 따라 다르지만, jQuery 라이브러리는 모두가 반드시 다운로드 하여 준비해야 하는 사항입니다. 해서, 우선 jQuery를 다운로드 받도록 하죠. http://jquery.com/ 에 가면 메인 화면에서 바로 다운로드가 가능하며, 현재 강좌 작성 기준으로 jQuery의 최신 버전은 1.3.2 를 얻으실 수 있습니다. 그리고, 구하신 파일은 여러분이 작업하는 어떠한 웹 애플리케이션에든지 복사해서 쓰시면 됩니다.

그럼 이제 jQuery의 셀렉터를 이야기하는 것으로 본격적으로 시작해볼까요?

jQuery 셀렉터 : 기본

jQuery의 가장 강력한 부분은 HTML DOM을 마음대로 트래버스 즉, 순회 탐색할 수 있다는 것인데요. 놀랍게도, CSS 셀렉터를 사용하여 원하는 개체를 탐색할 수 있습니다. CSS 셀렉터(Selector)는 대부분의 웹 개발자라면 이미 아실 것이라 생각합니다. 다음과 같이 css 파일에서 사용했던 표현식이 바로 CSS 셀렉터이니까요.

div p {
    font-color
:red;
}

#loginID {
    font-weight
:bold;
    background
:yellow;
}

.Columns {
    padding
:10px;
    background
:white;
}

div p라는 셀렉터는 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 요소들에 적용되며, #loginID는 loginID라는 id 값을 가진 요소에, .Columns는 class 어트리뷰트 값으로 Columns를 갖는 모든 요소에 적용되는 것이죠.

이러한 셀렉터를 그대로 jQuery에서 사용할 수 있다는 것은 놀랍습니다. jQuery에서는 원하는 DOM 요소의 그룹을 찾기 위해서 $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용하기에, 위의 3가지 셀렉터를 다음과 같이 사용할 수 있습니다.

$("div p") 혹은 jQuery("div p")
$("#loginID") 혹은 jQuery("#loginID")
$(".Columns") 혹은 jQuery(".Columns")

그리고, 각각의 표현식은 각 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환합니다. DOM 요소를 직접 반환해주는 것이 아니라 그의 래퍼(Wrapper)인 jQuery 개체로 반환해 주기 때문에 직접 DOM 요소를 제어할 때보다 훨씬 편하고 쉽게 개체를 제어할 수 있다는 장점이 있습니다. 예를 들어, $("div p").hide() 와 같은 명령을 사용하면, 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 태그집합들은 눈에서 보이지 않게 됩니다. hide()라는 명령은 jQuery 개체가 지원하는 명령이며, 추후 알아보게 될 것인데요. jQuery 셀렉터에 의해 반환되는 개체가 일반 DOM 개체라면 이러한 명령을 사용할 수 없겠지만, jQuery 개체 집합으로 반환되기에 그러한 명령을 사용할 수 있게 되는 것입니다. (아직, hide() 명령의 역할에 대해서는 설명하지 않았지만, 이름만 봐도 기능을 추측할 수는 있겠죠?)

모든 요소를 선택하기 위해서는 $("*")와 같은 표현을 사용할 수 있습니다.

또한, jQuery는 이러한 기본적인 CSS 셀렉터 외에 고급 CSS 셀렉터도 지원합니다. 예를 들면, 계층 셀렉터, 일반 필터 셀렉터, 어트리뷰트 필터 셀렉터 등이 바로 그것인데요. 다음은 계층 셀렉터의 예입니다.

p > a : p 요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
div + p : div 요소의 바로 다음에 나오는 형제 p 요소와 일치된다.
div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치된다.

$("p a")와 $("p > a")의 차이점은 전자가 p요소 하위에 존재하는 모든 a 요소를 선택한다면, 후자는 p 요소 바로 아래의 자식으로 놓여있는 a 요소만을 선택한다는 것이 차이입니다.

즉, 다음과 같은 html이 존재한다면,

<p>
    
<span>
        
<a href="1.aspx">1.aspx</a>
    
</span>
    
<br />
    <
a href="2.aspx">2.aspx</a>
</p>

$("p a")는 1.aspx 링크와 2.aspx 링크 모두를 선택하지만, $("p > a")는 2.aspx 링크만을 선택한다는 것이죠.

div + p 및 div ~ p 와 같은 경우는 자식이 아니라 형제 요소와 연관이 있습니다. 즉, 다음과 같은 html 있다고 가정할 경우에 말입니다.

<div>앨범 목록입니다</div>
<p>노라조</p>
<span>수퍼맨</span>
<p>이적</p>
<span>다행이다</span>
<p>현진영</p>
<span>Break me down</span> 

$("div + p")는 div 바로 다음에 나오는 형제 수준의 p 요소, 즉, "노라조"를 선택하게 되는 반면, $("div ~ p")는 div 요소 다음에 나오는 형제 요소들 중 모든 p 요소, 즉, "노라조", "이적", "현진영"과 일치된다는 것이죠.

더불어, a[title]이나 a[href^="mailto:"]와 같이 어트리뷰트를 기반으로 하는 필터링도 가능한데요. 특정 어트리뷰트가 존재하거나, 그 어트리뷰트 값이 특정 값으로 시작 혹은 끝나거나, 특정 값을 포함하거나 하는 부분까지 비교해서 선택할 수 있습니다. 다음은 이러한 어트리뷰트 필러의 예입니다.

a[title] : title 어트리뷰트를 갖는 하이퍼 링크와 일치된다.
a[href^="mailto:"] : href 값이 mailto로 시작하는 하이퍼 링크와 일치된다.
a[href$=".pdf"] : pdf 파일에 링크가 걸린 모든 하이퍼링크와 일치된다.
a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 모든 하이퍼 링크와 일치된다.
input[type="text"] : text 형식의 입력 컨트롤과 일치된다.

이러한 선택이 가능한 것은 시작부분(^) 혹은 끝부분($)을 가리키는 정규 표현식을 jQuery가 지원하기 때문입니다.

그러면, 우선 지금까지 알아본 셀렉터들, 가장 기본이 되는 이러한 셀렉터들을 한번 정리해보고 넘어가도록 하겠습니다.

jQuery가 지원하는 CSS 셀렉터들

셀렉터설명
*모든 요소와 일치
E1E1(태그명)인 모든 요소와 일치
E1.classE1(태그명) 요소의 클래스가 class와 동일한 요소와 일치
E1.#idE1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치
E1 E2 E1 요소의 자식인 모든 E2(태그명) 요소와 일치
E1 > E2E1 요소 바로 아래 자식인 E2 요소와 일치
E1 + E2E1 요소의 바로 다음에 나오는 형제요소 E2와 일치
E1 ~ E2E1 요소의 다음에 나오는 모든 형제 E2와 일치
E1[attr]attr 어트리뷰트를 갖는 E1 요소와 일치
E1[attr=val]attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치
E1[attr^=val]attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치
E1[attr$=val]attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치
E1[attr*=val]attr 어트리뷰트의 값이 val 값을 포함하는 E1 요소와 일치

그리고, 이러한 셀렉터를 사용하는 가벼운 예제를 한번 같이 해 보도록 하겠습니다. 가상 디렉토리를 하나 만드시고, 다음과 같은 htm 파일을 하나 작성하도록 하세요. 물론, 동일 폴더에는 아까 다운로드 받은 jQuery 자바스크립트 파일(저의 경우, jquery-1.3.2.min.js)이 있어야 하겠죠?

Default.htm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title></title>
    
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    
<script>
        $(
document).ready(
            
function(){
                $(
"#song").css("border""solid 1px silver");
                
$("a[href^='mailto:']").css("background""lightblue");
                
$("input[type='button']").css("background""yellow");

                
$("div ~ b").css("background""#efefef");
                
$("div > b").css("border""1px");
            
});
    </
script>
    
<style type="text/css">
        
* { font-size:12px; font-family:돋움 }
    </
style>
</head>
<body>
    
<div>
        
<span><a href="http://taeyo.net">taeyo.net</a></span>
        
<br />
        <
a href="mailto:taeyo@A.net">태오의 메일주소</a>
        
<p>
            
<input type="button" value="클릭~" />
            <
input type="checkbox" />
            <
input type="radio" />
        </
p>
        
        
<div id="song">요즘 노래방에서 부르는 노래 목록입니다</div><br />
        <
b>노라조</b>
        
<span>수퍼맨</span><br />
        <
b>이적</b>
        
<span>다행이다</span><br />
        <
b>현진영</b>
        
<span>Break me down</span>        
    
</div>
</body>
</html>

예제는 간단합니다. jQuery 셀렉터를 사용해서 몇몇 DOM 요소의 스타일을 변경하는 것이 전부이니까요. 그렇다고, 설명을 안하면 뭔가 서운하니깐, 이야기를 한번 해 보죠.

일단, $(document).ready();라는 함수에 대해서는 설명을 드릴 필요가 있을 듯 합니다. 이는 jQuery가 제공하는 이벤트 메서드 중 하나인데요. 문서의 DOM 요소들을 조작 가능한 시점이 되면 자동으로 호출이 되는 이벤트 메서드라고 보시면 됩니다. 굳이 비교하자면, window.onload 이벤트와 유사한 것이라고 보면 되겠네요. 메서드의 인자로는 델리게이트 함수명을 기입하거나, 익명 함수를 작성하면 됩니다. jQuery를 사용하는 경우에는 일반적으로 별도의 델리게이트 함수를 작성하지 않고, 익명함수를 그대로 작성하곤 합니다. 해서, 소스에서도 그렇게 처리한 것을 보실 수 있습니다. 이 방식은 처음에는 뭔가 복잡해 보일 수 있습니다만, 차츰 매우 익숙해지게 되실 것입니다. 사실, $(document).ready()와 windows.onload 이벤트와는 확실한 차이점이 있습니다만, 일단은 비슷하다고만 기억을 하시고요. 나중에 관련 이야기가 본격적으로 펼쳐질 때, 다시 설명드리도록 하겠습니다.

그리고, 익명 함수 내에서는 다양한 jQuery 셀렉터들을 보실 수 있습니다. 일단, 셀렉터로 원하는 DOM 요소를 찾고, css() 라고 하는 jQuery의 메서드를 사용해서 스타일을 매기는 것을 볼 수 있습니다. 기본적으로 DOM 요소는 css() 라는 메서드는 가지고 있지 않지만, jQuery 셀렉터가 반환하는 개체는 jQuery 확장 개체이기에, 이러한 메서드를 사용해서 쉽게 스타일을 매길 수가 있습니다. 각각의 셀렉터가 어떤 DOM 요소와 일치하는 지는 설명을 드리지 않아도 되겠죠? 여러분이 이미 다 아실 수 있을테니까요. 다음은 이번 예제의 실행 결과입니다.

참 쉽죠?

다음 강좌에서는 이렇듯 막강한 셀렉터에 대해서 조금 더 알아볼 예정입니다. 즉, jQuery 셀렉터 필터라는 것에 대해서 살펴볼까 해요. 원래는 같이 하나의 강좌로 올리려 했는데 생각보다 길어져서 기본 셀렉터만 먼저 올리게 되었습니다 ^^; 셀렉터 필터까지 알고 나시면, 여러분은 찾고자 하는 DOM 요소를 정말 편하고 쉽게 얻어내실 수 있다고 장담합니다.

스크립트 라이브러리를 왜 써야 하는가?

물론, 안 써도 됩니다. 매번 스크립트 기능이 필요할 때마다 손수 다 작성해도 뭐라 그럴 사람은 없으니까요. 하지만, 팀 개발을 하는 경우나 유사한 프로젝트를 반복해서 하는 경우에는 여러분 스스로가 가벼운 수준일지라도 자신만의 라이브러리(일반적으로 유틸리티 function들을 모아놓은 js 파일들) 만들어 놓고 있을 것입니다. 그러면서, 뭔가 풍족하고도 믿고 사용할만한 라이브러리는 없을까 둘러보곤 하죠.

일반적으로 우리가 웹 프로젝트에서 공개된 혹은 상용의 스크립트 라이브러리를 사용하려는 데에는 다음과 같은 이유가 있기 때문입니다.

  • 모든 브라우저에서 올바로 동작하는 자바스크립트를 작성하기는 힘들다.
  • 유사한 기능을 위해서 반복적으로 스크립트 코드를 작성하곤 한다.
  • 수 많은 자바스크립트로 인해 사이트의 유지보수가 힘들다.

더 많은 이유가 있겠지만, 결론적으로 말하자면 스크립트 라이브러리를 사용할 경우, 공수(비용과 시간)를 줄일 수 있고, 개발 및 관리하기가 편해지며, 균일한 코드 퀄리티를 유지할 수 있고, 그에 따라 스트레스도 줄어들기 때문이라고 할 수 있을 것입니다. 사실 이것이 서버 측이던 클라이언트 측이던 프레임워크를 도입하는 대표적인 이유이기도 하죠.


authored by

  cor2000
  2009-04-01(11:51)
캐릭 이미지
좋은 강좌 고맙습니다~!! 역쉬 수뉘꿘 1등~!
  holy13
  2009-04-01(15:53)
캐릭 이미지
'참 쉽죠?'
윽, 고인이 된 밥 아저씨가 생각나네요.

앞으로의 jQuery 강좌도 기대되네요.

  itist
  2009-04-01(16:03)
캐릭 이미지
좋은 강좌 감사합니다.
  kchlja
  2009-04-01(16:56)
캐릭 이미지
cor2000//좋은사진 감사합니다.
아울러 좋은 강좌 감사 ^^

  hero100
  2009-04-02(09:54)
캐릭 이미지
강좌 잘 봤습니다 ^^
감사합니다.....

  shuralla
  2009-04-02(11:37)
태요님 강좌를 보면 항상 느끼는 거지만 어려운 내용도 쉽게 풀어내는거 같습니다.
이것도 천부적인 재능인거 같습니다. 한마디로 천재란 얘기죠!!
이상 담 강좌를 무지 기대하는 사람의 아부였습니다 ^^

  서방님
  2009-04-02(20:40)
캐릭 이미지
좋은 강좌입니다.
재밌게 잘 봤어요~* ^^

  비밀
  2009-04-06(11:32)
캐릭 이미지
좋은 강좌 감사합니다.
한가지 궁금한게 있는데요.. 예제파일을 작성해서 브라우저에서 실행해보니 서유럽
어로 인코딩이 됩니다. 한국어 인코딩으로 바꾸어주면 한글이 잘 나오기는 하는
데... 파일은 ANSI로 저장했구요.. 이건 왜그런지 혹시 알 수 있을까요..? 저만 그런
가요? ^^a

  taeyo
  2009-04-06(14:37)
캐릭 이미지
인코딩이나 그런 것은 본인이 정하기 나름입니다.
예제를 그대로 따라했다고 자동으로 서유럽어로 인코딩될리는 없습니다. -_-;

반면, 파일 인코딩은 요즘은 파일은 ANSI가 아니 UTF-8로 저장하는 것을 기본으로
하지요.

  nom3203
  2009-04-06(16:08)
캐릭 이미지
감사합니다.
jQuery의 기초를 잡아줄 강좌인듯 싶습니다.
역시 태오님이십니다.

  goodlucker
  2009-04-11(02:10)
너무익한 강좌네요....잘보고 갑니다..꾸벅_ㅠ_
  느림보
  2009-04-21(17:10)
캐릭 이미지
강좌 정말 잘 봤습니다. 이게 얼마만에 공부해보는것인지 ^^a...
  nikemodel
  2009-04-24(15:39)
캐릭 이미지
감사감사 잘보고있습니다.
^^

  monarch7
  2009-05-03(01:10)
캐릭 이미지
잘 보고 있어요 ㅋ 제이쿼리 셀렉터에 대해 이해만 하면 나머지는 찾아서 쓰면되는
데... 역시 좋은강좌 감사드려요 ^^

  triplek
  2009-06-03(12:01)
오~ 정말 감사합니다... ^^
  youngsunkr
  2009-07-17(19:48)
캐릭 이미지
소스라인중에 value클릭~ 부분이 오타 네요
  hosinatomoko
  2009-08-05(13:04)
캐릭 이미지
Ajax 공부하러 왔다 jQuery 공부하게 되었습니다.

감사합니다.

  kiz98
  2009-08-10(23:46)
몇년만에 찾은 태오님 사이트,..
아직도 배움에 대한 열정은 진행형이시군여~~
존경스럽습니다 ^^*
asp 문법 보러 방문했다가 jquery 읽고 갑니다.
앞으로도 그 열정 계속되길 바랍니다. 감사합니다.~~

  tiger154
  2009-10-06(13:37)
캐릭 이미지
좋은 강의 입니다. 참고로 저도 jQuery 하면서 도움이 되었던 셀렉터 URL도 참고
해보세요^^ 유용 하답니다^^
http://codylindley.com/jqueryselectors/

  wildmoon
  2009-10-14(09:31)
캐릭 이미지
항상 이해하기 쉽게 설명해주셔서...감사~~ ^^
  muku
  2009-11-02(11:21)
캐릭 이미지
8년전 초보시절(지금도.. ㅠㅠ)부터 많은 도움을 받았던 이곳에, jQuery때문에 오랜
만에 다시 들렸습니다. 오랜세월동안 한번도 감사의 인사를 못했었는데, 이자리를
빌어서 감사의 말씀을 드립니다. 감사합니다~~

  alf007kim
  2009-11-19(15:38)
jquery 한번 해 볼만한것 같아요. 다음강의가 기대됩니다
  camicase
  2009-11-24(10:53)
캐릭 이미지
아...정말 잘보고있습니다. 새로운세계에요~
  mosquito5757
  2009-12-14(11:31)
캐릭 이미지
안녕하세요 태요님^^ 다름이 아니라 ASP에 적을 하려고 하는데요 인터데브에서
JQuery 폴더를 만들고나서 jquery-1.3.2.min.js 파일과 jquery-1.3.2-vsdoc2.js 파
일을 다운 받은 파일을 JQuery폴더에 넣고요
asp에 적용하는 법 좀 알려주시면 감사하겠습니다^^

  kshpope
  2010-02-02(16:07)
캐릭 이미지
태요님 value클릭~ 요거 수정해주세욤~ ^^;;
  taeyo
  2010-06-11(15:44)
캐릭 이미지
/kshpope
늦었지만, value클릭~ 수정했습니다요~

  doojic
  2011-04-05(14:48)
캐릭 이미지
잘 보고 있습니다. 매우 흥미롭네요.
그런데 마지막 소스 중에 border 값은 노라조에 보이는게 맞죠?

  ekfqkqhd
  2012-01-11(22:20)
캐릭 이미지
너무너무잘봤습니다
이런자료가있었다니 너무너무감사합니다
요기에다가 질문 남겨도되나욤?
$("div > b").css("border", "1px");
이부분이 이해가 안되네요 ㅠㅠ

  taeyo
  2012-03-23(12:13)
캐릭 이미지
/doojic , ekfqkqhd

네. 노라조에 보이는게 맞습니다.
border 색상지정이 없어서 눈에 안 띄었나보네요
$("div > b").css("border", "solid 1px red"); 라고 바꿔보세요.
그리고, $("div > b")는 div 바로 다음에 나오는 형제 b 태그를 말하는 겁니다.
문서에서 div에 이어 b가 존재할 경우, 그 b 태그들이 모두 해당되는 것이죠.

  web1481
  2012-09-06(11:07)
캐릭 이미지
강의 정말 고맙습니다
친절하게 자세한 설명까지 곁들여서 웹디자이너로서 jqury 공부도 해야하는데
막막했습니다. 가슴이 뻥뚤리는 기분입니다
정말 감사 하고 있습니다.

  lady90
  2014-11-11(11:26)
캐릭 이미지
이해하기도 쉽고 ㅠㅠ 잘 이해하며 따라가고 있습니다 정말 좋은강좌에요 흑흑

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})