login register Sysop! about ME  
qrcode
    최초 작성일 :    2009년 10월 05일
  최종 수정일 :    2009년 10월 05일
  작성자 :    Taeyo
  편집자 :    Taeyo (김 태영)
  읽음수 :    67,867

강좌 목록으로 돌아가기

필자의 잡담~

후아. 강좌가 많이 늦었네요.
그동안 ASP.NET MVC 책을 번역하느라 짬을 내기가 어려워서 그랬습니다.
번역도 마무리되었으니 이제 또 강좌를 좀 써봐야 하겠죠???
히히. 슬슬.... 크리스마스도 다가오고 있습니다. 준비하세요!

강좌가 많이 늦었습니다. 죄송합니다.

그동안 ASP.NET MVC 원서를 번역하느라 좀 바빠서 그랬습니다. 이제 ASP.NET MVC 원서 번역도 끝나서(반복해서 이야기하는 모습에서 왠지 광고효과가 느껴지시지 않나요?) 약간 한가해졌으니, 이 틈을 타서 jQuery를 마무리 짓기 위해 최선을 다해 달려보도록 하겠습니다.

그런 분들은 없으셨겠지만, 그 동안 강좌를 기다리셨다면 정말로 죄송+감사하게 생각합니다.

지난 강좌에서 제가 이번 강좌부터는 이벤트와 이펙트 쪽으로 진행할 것이라고 이야기를 했었는데요. 그래도, 그게 아니죠. 손가락 10개 중에 안 아픈 손가락이 어디있겠습니까? 그러니깐, CSS 관련된 메서드들과 어트리뷰트 관계된 메서드들도 설명은 하고 가야하지 않겠습니까? 이게 은근히 많이 사용되거든요~

말이 길면 제 손가락만 피곤해 집니다. 바로 설명 들어가겠습니다.

CSS 관련 메서드

css( name ) 매치되는 첫번째 요소의 스타일 속성을 반환한다.
예 : var color = $(this).css("color");
css( name, value ) 매치된 모든 요소에 대해 단일 스타일 속성을 설정한다
예 : $(this).css('color':'yellow');
css( properties ) 매치된 모든 요소들의 스타일 속성에 키/값을 설정한다.
예 : $(this).css(
    { 'color':'yellow','font-weight':'bolder'}
);

CSS Class 관련 메서드

addClass( class ) 매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가한다.
hasClass( class ) 지정된 클래스가 매치된 요소 집합 중 최소 한 군데 이상 적용되어 있다면 true를 반환한다.
removeClass( class ) 매치된 요소들의 각 집합에서 지정된 CSS 클래스 혹은 모든 클래스를 제거한다.
toggleClass( class ) 지정된 클래스가 적용되지 않았다면 적용하고, 이미 적용되어 있다면 제거한다.

이전 강좌들을 통해서, 수많은 메서드들로 단련된 여러분이라면 비록 머리 속에 식스팩은 없어도(응?), 이 정도의 메서드는 쉽게 이해가 가능하실 겁니다.

이들은 여러분이 정말로 자주 접하게 되는 CSS 속성을 직접 조작하거나, CSS Class를 다루는 것과 관련된 메서드들이니까요. 굳이, 이 와중에도 포인트가 되는 부분을 찾으라면, JSON 형식의 구문을 사용하여 여러 CSS 속성을 한번에 설정할 수 있는 css(properties) 라는 오버로드 메서드가 존재한다는 것하고요. CSS Class를 편하게 추가했다 제거했다 할 수 있게 하는 toggleClass()라는 메서드가 제공된다는 것이 포인트라 할 수 있습니다(적립되는 포인트는 아닙니다!! ? 허허.. 안타깝네요. 나이 40을 바라보는 개그는 이런 것인가!)

뭐 워낙 설명이 주옥같아서 읽기만해도 이해가 되긴 하시겠지만, 그래도 예제는 한번 보고 가야겠죠? 자자~ 그렇다면 한번 씸쁠한 예제 하나 같이 해보죠.

CSS.htm
<html>
<head runat="server">
    
<title></title>
    
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
      
<script type="text/javascript">
          $(
function() {
            $(
"#MtSnow")
              .addClass(
"winter")
              .css(
"width""200");
           
            
$("button").click(function() {
              $(
"#MtSnow")
                    .toggleClass(
"summer")
              })
;
          
});
    </
script>
  
<style>
      
* { font-size:12px; font-family:돋움; }
      
.winter { border:7px solid #dddddd; }
      
.summer { border:7px solid lightblue; }
  </
style>
</head>
<body>
   
  
<div id="Mt">
    
<img id="MtSnow" src="resource/snowMt.png" />
  </
div>
  
<button>요! 태요!</button>
  
</body>
</html>

소스는 뭐 늘 그렇듯이 간단합니다.

일단 화면부터 보도록 하죠. 화면에는 이미지가 하나 존재하고요. 그 이미지의 id는 MtSnow 입니다. 그리고, 버튼도 하나 있어요. 그리고, 약간의 CSS 클래스들도 존재하는데요. winter라는 클래스와 summer이라는 클래스가 그것입니다. 각 클래스의 역할은 각각 테두리를 약간 두껍게 하여 연한 회색이나 연한 파란색으로 나타나게 하는 것입니다.

jQuery의 초기 함수에서는 MtSnow란 아이디를 갖는 개체에게 winter라는 CSS 클래스를 적용(addClass 메서드를 사용)하고 있는 것을 볼 수 있습니다. 그리고, 메서드 체인을 사용해서 개체의 너비(width)를 200 픽셀로 지정하고 있지요(css 메서드 사용).

그런 다음, 버튼에게 click 이벤트를 걸어두고 있는데요. Click 이벤트의 사용법에 대해서는 기존 강좌인 "폼 필터 및 조작 메서드(each 등)" 강좌에서 설명을 드렸었습니다. 물론, jQuery 이벤트에 대한 좀 더 구체적인 설명은 다음 강좌에서 다룰 예정이니깐, 기존 강좌의 내용이 약간 부족하게 느껴지시더라도 양해해 주세요(부족하다고 하기엔, 기존 강좌에서 설명을 너무 잘해놓았었죠? 우핫핫!).

여하튼, click 이벤트에서는 $("#MtSnow").toggleClass("summer"); 라는 코드를 사용해서, MtSnow란 개체에게 CSS 클래스가 토글되어 적용되도록 설정하고 있는 것을 볼 수 있습니다. 소스와 같이 toggleClass("summer") 메서드를 사용하면, 버튼이 클릭될 때마다, MtSnow 개체에게 summer라는 CSS 클래스를 적용했다가, 제거했다가를 반복하게 됩니다. 즉, 첫번째 클릭 시에는 addClass("summer")를 하고, 두번째 클릭시에는 removeClass("summer")를 반복해서 수행한다는 것이죠.

이미 MtSnow란 개체는 앞쪽의 코드로 인해 winter라는 CSS 클래스를 가지고 있는 상황이기에, toggleClass("summer")를 적용하게 되면, 첫번째 클릭 시에는 개체가 winter와 summer 클래스 모두를 갖게 되고, 다시 클릭하면 winter만 갖게되는 방식으로 동작하게 될 것입니다. 충분히 결과가 예상이 되시죠? 그렇다면, 그 예상과 실제 결과가 동일한지를 확인해 보도록 하세요. 다음은 결과 입니다.

좌측은 처음 로드 되었을 경우의 화면이고요. 우측은 클릭을 했을 경우의 화면입니다. 그리고, 다시 또 클릭을 하면 좌측처럼 원래의 모습으로 돌아가겠죠? 그렇습니다!!!

매우 쉽죠? jQuery의 CSS 관련 메서드들을 사용하면 이렇듯 쉽게 스타일을 변경하거나, CSS 클래스를 변경할 수 있습니다. 피곤하게 여러분이 관련 스크립트 코드를 반복해서 작성할 필요가 없어요~~~

좋습니다. 지금까지 CSS 관련 메서드들을 알아봤고요. 이번에는 알아두면 매우 유용한 또 하나의 기능인 어트리뷰트 관련 기능들에 대해서 알아볼께요.

기본적으로 HTML DOM은 사용자 정의 어트리뷰트를 사용할 수 있도록 하고 있기에, jQuery의 어트리뷰트 메서드들도 알아두면 특정 시나리오에서 매우 유용하게 사용할 수 있습니다. 물론, 사용자 정의 어트리뷰트의 사용에 대해서는 논쟁이 많은 편이긴 합니다. 사용하지 않는 것이 바람직하다는 의견과 적절하게 사용한다면 사용해도 무관하다가 팽팽하게 맞서 있긴 하지만, 개인적인 생각은 비록 혼란을 야기할 수 있는 기법이라 하더라도, 적절한 장소에 적절한 규칙을 가지고 사용한다면 나쁘지 않다는 쪽입니다. 마치, 복어가 비록 독을 가진 위험한 물고기이지만, 독만 잘 처리한다면 대단한 보양식이 되어주는 것과 같다고나 할까요? 헛? 관계 없는 이야기인가요? 그렇다면, 독초도 잘 쓰면 약이 된다는 비유는 어떨까요? 아… 네… !! 네! 자꾸 뭔가에 비유할라고 애쓰지 말고 강좌에 집중하겠습니다.

우선, 어트리뷰트 관련 메서드들부터 살펴보도록 하죠.

Attribute 관련 메서드

attr( name ) 메치된 첫 번째 요소의 특정 어트리뷰트에 접근하여 값을 가져온다. 만일, 지정된 어트리뷰트 명이 존재하지 않는다면 undefined가 반환된다. 어트리뷰트에는 title, alt, src, href, width, style와 같은 것들이 해당된다.
attr( properties ) 모든 매치되는 요소들의 어트리뷰트를 키/값 개체로 설정한다.
attr( key, value ) 모든 매치되는 요소들의 단일 어트리뷰트의 값을 지정한다.
attr( key, fn ) 모든 매치되는 요소들의 단일 어트리뷰트에 대해 계산된 값을 지정한다.
removeAttr( name ) 매치된 요소 각각으로부터 해당 어트리뷰트를 제거한다

사용방법은 위에서 살펴봤던 CSS() 메서드와 유사합니다. 단일 어트리뷰트 값을 읽어오거나, 설정할 수 있고요. JSON 포맷을 사용해서 여러 개의 어트리뷰트에 값을 줄 수도 있습니다. 다만, CSS() 메서드에서는 지원되지 않았던 독특한 오버로드가 하나 있는데요. 그것은 두 번째 인자로 함수를 지정하여 그 함수의 계산된 반환 값으로 어트리뷰트의 값을 지정할 수 있는 기능입니다.

예를 들면, 다음의 코드를 한번 보시죠.

$("img").attr("title", function(i) {
                     
return (i + 1) + "번째 이미지입니다";
         
});

호오. 뭔가 재미있어 보이지 않나요?

위의 코드는 모든 <img> 들을 가져와서 그들의 title 어트리뷰트의 값을 동적인 문자열로 설정하는 예입니다. 두 번째 인자로 function이 사용되고 있는 부분이 재미있는 부분입니다. 즉, 그 함수의 반환 값이 결과적으로 img의 title 어트리뷰트 값이 되는 것입니다. function(i)의 인자인 i는 0부터 시작하는 요소의 인덱스 값이기에, 상기 결과에 의해서 각각의 이미지들은 “1번째 이미지입니다”, “2번째 이미지입니다”와 같은 title을 갖게 됩니다.

그렇다면, 예제로 이 부분을 한번 확인해 보도록 해요. 저는 다음과 같이 attr.htm 이라는 파일을 만들었습니다.

Attr.htm
<html>
<head runat="server">
    
<title></title>
    
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
      
<script type="text/javascript">
          $(
function() {
              $(
"#photos img")
                .attr({
                    border: 
"1px",
                    height : 
"100"                    
                
})
                .attr(
"title"function(i) {
                     
return (i + 1) + "번째 이미지입니다";
                
});
          
});
    </
script>
</head>
<body>
   
  
<div id="photos">
    
<img src="resource/snowMt.png" />
    <
img src="resource/hongSeattle11.jpg" />
    <
img src="resource/hongSeattle31.jpg" />
    <
img src="resource/hongSeattle41.jpg" />
    <
img src="resource/run.png" />
  </
div>
  
</body>
</html>

코드는 그리 어렵지 않습니다. 화면에 놓여진 이미지들을 jQuery의 attr() 메서드를 사용해서 정리하고 있는 것이 전부이니까요. 제가 사용하고 있는 각각의 이미지들은 width와 height가 서로 다르기 때문에, jQuery 로딩 함수에서는 각 이미지들의 어트리뷰트를 통일되게 설정하고 있는데요. border은 1px로, height는 100px로 고정하고 있는 것을 볼 수 있습니다. 그 다음, 조금 전에 설명드린 attr(name, function()) 오버로드를 사용해서 각 이미지에게 title 어트리뷰트 값을 동적으로 지정하고 있는 것을 볼 수 있습니다.

그렇기에, 이 jQuery 설정이 적용되고 나면, 최종 결과 화면은 이미지가 모두 1px 테두리를 가지며, 100px의 높이를 갖는 이미지가 되고요. 마우스를 이미지에 올리면 각 이미지는 “2번째 이미지입니다”와 같은 풍선 도움말이 뜨게 될 것입니다. 다음 그림은 jQuery가 적용되기 전의 화면과 적용된 후의 화면을 각각 보여주고 있습니다.


사실, attr() 메서드가 이렇게 열을 낼 만큼 대단한 것은 아닙니다만, HTML DOM 개체에는 사용자 정의 어트리뷰트를 사용할 수 있기 때문에 약간 강조해서 설명 드리고 있습니다. 프로그래밍을 하다보면, 동적으로 생성된 특정 개체들을 식별해야 할 경우가 있으며, 그런 경우 사용자 정의 어트리뷰트를 사용하는 것은 꽤나 자주 있는 일입니다. 사용자 정의 어트리뷰트라는 것은 다음과 같이 임의의 어트리뷰트를 여러분이 설정하는 것을 말합니다.

<img src="myImage.gif" status="Big" order="desc" />

상기 태그에서 status와 order이라는 어트리뷰트가 바로 사용자 정의 어트리뷰트 되겠습니다. 그냥 특정 명칭을 마구 사용할 수 있습니다. 묻지도 따지지도 않습니다. 마치 ‘내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에…’이라는 싯구처럼(또또! 이상한 비유든다!), 원래는 존재하는 어트리뷰트가 아니지만 지정되는 순간 살아 숨쉬기 시작하는 그런 동적인 어트리뷰트 기능입지요. 그렇기에, 난잡하게 사용할 경우 프로그래밍을 어렵게 한다는 단점이 있으며, 오타가 날 확률도 꽤나 있어서 이러한 사용자 정의 어트리뷰트의 사용은 그다지 권장되지 않는 편입니다. 하지만, 살다보면 어쩔 수 없이 사용할 수 밖에 없는 상황이 오곤 하죠. 그렇기에 그런 경우에는 부디 신중하게 사용할 것을 요구하곤 합니다.

저의 경우는 주로 동적 넘버링을 위해서 사용자 정의 어트리뷰트 기능을 사용하곤 하는데요. 예를 들면, 각각의 이미지를 순서에 따라 식별하기 위해서 사용하곤 합니다. 한번 예를 들어볼께요. 이번 예는 각 이미지가 클릭되는 경우, 그 이미지가 몇번째 이미지인지를 메시지박스로 나타내는 예입니다.

Attr2.htm
<html>
<head runat="server">
    
<title></title>
    
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
      
<script type="text/javascript">
          $(
function() {
              $(
"#photos img")
                 .each(
function(i) {
                     
//this.idx = i + 1;
                     
$(this).attr("idx", i + 1);
                 
})
                 .click(
function() {
                     
alert(this.idx + "번째 이미지입니다");
                 
});
          
});
    </
script>
</head>
<body>
   
  
<div id="photos">
    
<img src="resource/snowMt.png" />
    <
img src="resource/hongSeattle11.jpg" />
    <
img src="resource/hongSeattle31.jpg" />
    <
img src="resource/hongSeattle41.jpg" />
    <
img src="resource/run.png" />
  </
div>
  
</body>
</html>

소스는 각 이미지를 루프 돌면서, 그 이미지에게 idx라는 어트리뷰트를 지정하고 있습니다. 원래 img 에는 idx라는 어트리뷰트가 존재하지 않지만, 지금과 같이 무턱대고 지정해버리면 그 순간 해당 어트리뷰트를 가지게 되는 것입니다. 일단, 특정 어트리뷰트가 만들어지고 나면, 어디에서나 그 어트리뷰트를 읽거나 변경할 수 있습니다. 해서, click 이벤트에서는 그 idx 값을 읽어서 메시지박스로 출력하도록 하고 있습니다.

주석에서 보이는 것처럼, this.idx = i + 1; 라는 코드를 사용해서도 마찬가지의 결과를 얻을 수 있습니다(결과적으로는 같은 코드이니까요). this.idx = i + 1;은 image DOM 개체의 idx 속성에 값을 할당하는 코드이지만, 해당 속성이 존재하지 않으면 그에 해당하는 DOM 어트리뷰트를 먼저 만들고 난 다음에 값을 할당하게 됩니다. 쿨하네요!

이러한 사용자 정의 어트리뷰트를 사용하면, 데이터베이스로부터 가져온 각각의 사진 설명을 image의 description 어트리뷰트나 detailInfo 어트리뷰트(어떤 이름이던 여러분이 원하는대로 지정)를 사용해서 할당하고, 그 설명을 jQuery를 사용해서 이미지에 오버레이 텍스트로 출력한다거나 하는 것을 생각해 볼 수도 있을 듯 합니다. 응용하는 것이야 여러분의 아이디어에 달린 것이니~~~ 뭐든지 가능하겠죠?

이로써, 뭔가 찜찜했던 기분이 좀 나아졌네요. css 관련 메서드와 cttr 관련 메서드를 모두 설명하고 나니깐 말이죠. 하하하.

하지만 솔직히 말하자면, 이로써 jQuery가 제공하는 모든 메서드들을 살펴본 것은 아닙니다. 이 외에도 위치값, position과 관계된 메서드들도 조금 남아 있고, 그 밖에도 자주 사용되지는 않지만 그런대로 유용한 메서드들도 더 존재하긴 하니까요. 하지만, 사실! 위치를 구하고 하는 부분은 플러그인 중에 유명한 Dimension이라는 플러그인을 사용하는게 더 낫다고들 합니다(플러그인에 대한 설명은 뒤쪽 강좌에서 다룰 예정입니다). 그래서, 저는 이 부분의 설명은 넘어갈까 합니다. 그리고, 덩달아 그 밖의 메서드들도 퉁쳐서 넘어가 볼까 합니다.

사실, jQuery의 모든 인스턴스 메서드를 다 일일이 설명하는 것은 어려움이 있지 않겠습니까? 그리고, 지금의 여러분이라면 jQuery 참조문서를 찾아보면서 충분히 각각의 메서드를 이해하실만한 내공을 갖추고 계십니다.

네? 10개의 손가락 아픈 이야기 그거는 어케 된 거 냐고요? CSS 관련 이야기랑 어트리뷰트 관련 이야기는 10 손가락이 깨물면 다 아프다 어떠다 해서 설명해놓구선 왜 포지셔닝 관련 이야기는 어물쩡 넘어가는 거냐고요? 그건 말입니다!!! 포지셔닝은… 포지셔닝은… 그게… 손가락이 아니라 발가락이기 때문입니다(도망쳐!! 후다닥!!)

다음 번 강좌는 본격적으로 이벤트에 대해서 다룰 예정입니다.
그리고, 그 다음 강좌는 이펙트, 애니메이션에 대해서 다룰까 합니다.

감사합니다.


authored by

  khs3141
  2009-10-05(18:52)
좋은 강좌 감사합니다~
  violeter33
  2009-10-06(09:00)
캐릭 이미지
기대하고
고대하고
그리워 하던 그분이 오셨군요~~


  goni0607
  2009-10-06(09:40)
캐릭 이미지
오~!! 드뎌 연좌가 나왔군요~!!

근데... 추석에 얄짤없이 안 쉬신건지... ^^;

일단 선댓글 후 정독 들어갑니다~ ^0^

  youngsunkr
  2009-10-06(10:36)
캐릭 이미지
주옥같은 jQuery 강좌 감사합니다.
  kjhnice79
  2009-10-06(13:47)
캐릭 이미지
좋은 강좌 진심으로 감사합니다 ^^
잘 보고 갑니다 ^^

  itist
  2009-10-06(17:21)
캐릭 이미지
굿 입니다요~~~~~~~~
  hyun2hyun2
  2009-12-09(17:00)
캐릭 이미지
좋은 강좌 감사드립니다.
  neokwg
  2010-01-12(15:55)
좋은 강좌
정말 감사드립니다.!

  lsiwon
  2010-01-24(10:38)
좋은 강좌 감사 합니다 ..
  ggaebong2000
  2010-02-03(23:52)
캐릭 이미지
강좌 잘 보았습니다.
근데 attr2.htm 을 파폭(ver.3.5.7)에서 실행시키면
undefined번째 이미지입니다.
라고 나옵니다. IE에서는 잘 되는데...
왜 그런거죠? 사용자 정의 어트리뷰트가 파폭에서는 동작하지 않나요?

  jucke
  2010-06-08(10:42)
캐릭 이미지
attr2.htm.. 파폭에서 문제생기는건 아래처럼 수정하면 됩니다.
----> alert($(this).attr('idx') + "번째 이미지입니다");

  summleo
  2010-07-14(15:08)
캐릭 이미지
cttr 관련 메서드를 --> attr
오타가 난것 같습니다.
별건아닙니다.ㅎㅎ

  nsg4790
  2012-01-18(12:45)
캐릭 이미지
강좌 잘봤습니다. 도움이 많이 되었습니다.(__)
  incago
  2012-09-03(16:24)
캐릭 이미지
너무 쉽게 잘 가르쳐주시네요 :-)

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

로딩 중입니다...

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