Language/jsp

테이블에 무늬 넣기(Zebra Striping Made Easy with jQuery)

천본앵 2008. 11. 22. 21:14

원문 : http://15daysofjquery.com/examples/zebra/


1단계 : 시작하기

  • 이 예제에서 사용하는 코드는 Mathew Pennell이 쓴 "Striping Your Tables the OO Way"라는 글을 많이 인용했음을 밝힙니다.
  • 첫 시작으로 Mathew가 사용한 레이아웃과 스타일시트를 적용해 봅시다.
  • 아직 자바스크립트는 사용하지 않습니다.
  • 레이아웃과 스타일을 다 적용하고 나면 이런 모습이 됩니다.
  • 예제코드 : sample.html


2단계 : CSS 살펴보기기

  • "alt"라는 클래스가 테이블의 모든 열에 적용될겁니다.
  • 이 클래스가 얼룩 무늬 테이블을 만들어 줄겁니다.
  • "over"라는 클래스는 나중에 마우스가 올려질 때 하이라이트 효과를 주기위해 사용될 것입니다.
  • 이제 tr:hover 라는 항목을 스타일시트에서 제거하도록 하겠습니다. 이건 IE에서 지원하지 않기 때문이죠.
  • "아주 훌륭한"브라우저들(Firefox/Opera/etc)은 tr:hover 가 아주 잘 돌아갑니다. - 자바스크립트가 필요없죠.
  • zebra3.png


3단계 : 테이블에 클래스 추가하기

  • 무늬를 주고 싶은 테이블에 클래스를 추가해 보자.
  • 테이블에 추가할 클래스는 class="stripeMe"
  • 머지 않아 클래스태그를 사용하는 것이 아이디를 사용하는 것보다 더 유용하다는 것을 보게될 것이다.
  • 이렇게 하면 페이지 상에서 무늬를 주고 싶은 테이블을 선택할 수 있게된다.(즉, 사용자가 무늬를 주고 싶은 테이블을 선택할 수 있게된다.)
  • zebra2-b.png


4단계 : jQuery를 이용해 작업하기

  • jQuery 라이브러리를 사용하기 위한 첫번째 라인
  • 하이라이트된 섹션이 우리가 보통 사용하던 window.onload함수와 같은 역할을 하게된다.
  • 이제부터 작성하는 코드는 더 빠르게 실행될 것이다.
  • zebra4-b.png


5단계 : 기본작업 - 간단하게 만들어 보기

  • jQuery코드는 $ 시작한다.(역자주, jQuery가 $로 매칭되어 있다고 함. 즉 둘 다 같은 의미임)
  • $뒤에는 괄호가 따라온다.

  • 괄호 안은 jQuery가 찾아야 오브젝트를 의미한다. - 쌍 따옴표를 빼먹으면 안된다. (몇가지 예제를 살펴보면서 그 의미를 조금 더 파악해 보도록 하자.)

    • $('p') = 모든 문단을 찾아라.
    • $('.whatever') = class가 "whatever"(즉, class="whatever")인 부분을 찾아라.
    • $('.stripeMe tr') = "stripeMe"라는 클래스의 요소 안에 모든 tr을 찾아라(여기서는 table내에 tr을 의미한다.)
    • 지금 이 예제에서는 class="stripeMe"라는 클래스를 가진 테이블내에 있는 모든 줄을 찾으라는 의미이다.

     

  • zebra5.png
  • $('.stripeMe tr').addClass('alt'); 이 코드의 의미는 stripeMe라는 클래스명을 갖는 테이블의 모든 줄에 "alt"라는 클래스를 추가하라는 의미이다.
  • 주의 - 최종 결과물은 교차하는 형태의 무늬를 가진 테이블이다. 한번에 한 단계씩 해보도록 하자.


6단계 : 무늬가 있는 테이블 쉽게 만들기

  • $('.stripeMe tr').addClass('alt'); 이 코드의 의미는 stripeMe라는 클래스명을 갖는 테이블의 모든 줄에 "alt"라는 클래스를 추가하라는 의미이다.(추가하고 나면 테이블은 이렇게 된다.)
  • zebra6.png
  • 자. 이건 우리가 원했던 모양이 아니죠.

 

  • 우리가 원하는 모습으로 바꾸는 건 아주 쉽습니다.
  • $('.stripeMe tr:even').addClass('alt'); 코드를 이렇게 바꾸기만 하면 됩니다. tr:even 은 짝수행을 의미한다.
  • 이제 테이블이 원하는 모양대로 무늬가 있는 테이블이 되었다.


7단계 : 요약하자면

  • zebra7.png
  • 단 세줄의 코드로 아래와 같은 결과물을 얻은것이다.:
  • zebra7-b.png
  • 무늬가 들어가 있는 깔끔한 테이블!
  • 웹상에 있는 다른 예제들은, 아무리 잘 만들어져 있다할지라도 아주 많은 코드를 사용한 경우가 많다. - most of which is beyond the reach of the beginning coder(?)
  • 이제 jQuery라이브러리와 위 세줄의 코드 그리고 테이블에 "stripeMe"라는 클래스명만 추가하면 무늬가 있는 테이블을 만들 수 있다.
  • 이제 마지막 단계가 남았다.


8단계 : mouseover이벤트가 발생하면  하이라이트 효과 주기 1

  • 전에 자바스크립트를 다뤄본적이 있다면 onMouseover, onMouseout, onClick, onSubmit 같은 것에 익숙할 것이다.
  • 이것들은 이벤트이다. 특정 이벤트가 발생하면 특정 코드를 실행하는데 사용된다.

  • jQuery는 이런 이벤트 작업들을 아주 쉽게 구현할 수 있도록 해준다.

    • $('.whatever')라는 코드는 "'whatever'라는 클래스명을 갖는 오브젝트를 찾아라"라는 의미라는 것을 기억하다.(심플한 해석)
    • $('.whatever').mouseover()는 "'whatever'라는 클래스명을 갖는 모든 것(오브젝트)에 새로운 onMouseover이벤트가 발생할 것이다"라고 jQuery에게 알려준다.
    • mouseover뒤에 나오는 괄호안에는 함수가 들어가게 될것이다. 함수는 이벤트가 발생했을때 무엇을 해야하는지를 jQuery에게 알려준다.

     

    zebra8.png


9단계 : mouseover이벤트가 발생하면 하이라이트 효과 주기 2

  • What you're about to see is as complicated as this tutorial gets. If you can make it past this... you're home free.
  • $(this)는 맨 마지막에(직전에) 호출된 $()라고 jQuery에게 말해준다.
  • zebra9.png

  • 섹션별로 코드의 의미를 해석해 보자.

    • "stripeMe"라는 클래스명을 가진 요소들의 모든 줄(tr)을 찾아라.
    • 각 라인에 mouseover이벤트를 할당하라.
    • mouseover이벤트가 발생하면 함수를 실행하라.
    • $(this)는 jQuery가 찾아낸 모든 줄을 의미한다.
    • 이 모든 줄에(mouseover이벤트가 발생한 모든 줄..) "over"라는 클래스를 추가하라.


10단계 : mouseout

  • Mouseout은 이전에 했던 방식과 같다.
  • 이번에는 addClass 대신에 removeClass 를 사용한다.
  • zebra10.png


11단계 : 완성

  • (튜토리얼은 아직 끝나지 않았다.... 하지만 완성된 모습을 한번 보자.)
  • 완성된 모습을 한번 보도록 하자. (새창으로 열린다.)
  • 이게 다 된거라고 할 수 있다.... 하지만 jQuery는 위 코드를 조금 더 짧게 줄여서 그 장점(확장성)을 우리에게 보여줄 것이다.


12단계 : 내가 뭐 실수한게 있나?

  • "이봐, 잭.... 당신은 이걸 5줄 이하로 만든다고 했잖나?"
  • 자. 완성된 코드를 다시 한번 살펴보도록 하자.
  • zebra11.png
  • 나쁘진 않은데.... 조금 더 해보자.


13단계 : 체인을 이용해서 묶어보자.

  • jQuery에는 '체인'이라는 개념이 있다.
  • jQuery는 한 요소에 대해서 2개나 혹은 그 이상의 명령을 수행할때 중복되는 부분은 없앨 수 있도록 하고 있다.

  • 예를 들어 :

    • $('.whatever').mouseover().mouseout();

     

  • 실제로 보면 이런 형태이다.
  • zebra12.png
  • $(".stripeMe tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
  • 위와 같이 하면 코드를 줄일 수 있을 뿐만 아니라 동시에 mouseover와 mouseout을 위한 명령들도 수행할 수 있게 된다.
  • 이제 몇가지 꽁수를 부려보자.


14단계 : 원한다면 한줄로 만들어 버릴 수 도 있다.

  • 자 모두 제대로 작성했다면 코드를 한줄로 만들어 버릴수도 있어야 한다.
  • 자바스크립트를 보고싶다면 여기를 클릭하라.
  • 그럼, 코드를 에워싸고 jQuery를 사용하면 가치가 있었는지를 보도록 하자.


15단계 : 왜 jQuery를 사용하는가?

  • jQuery는 몇 가지 핵심 목표를 달성할 수 있도록 도와준다.

    • jQuery는 정말 극적으로 코드를 줄여준다.
    • DOM에 대해 자세히 익히는 과정(아주 힘든 과정인) 없이 DOM을 사용할 수 있도록 해준다.(역자주, DOM을 다루는 것이 advanced javascript에 속하는 군요...ㅠ.ㅠ)
    • 위에서 작성한 코드는 무늬를 주고 싶은 테이블에 "stripeMe"라는 클래스만 추가하면 바로 무늬가 있는 테이블로 만들 수 있는 확장성을 제공해 준다.
    • 위에서 작성한 코드가 실행되기 위해 전체 페이지가 불러지도록 기다리지 않아도 된다는 부분에 대해서 jQuery에게 감사하게 될것이다.
    • 공간과 시간을 절약하기 위해서 "체인"(chain)이라는 개념으로 여러개의 명령어를 묶어서 사용할 수 있다.