jQuery 효과를 이용하는 것은 클래스를 이용하는 것이 기본이지요. 즉 특정 태그에 클래스를 추가했다가 삭제하는 등의 방법을 이용하는 것입니다. 보통 클래스는 CSS 를 이용한 디자인 코드를 이용하는 것이지만 이러한 CSS 구성요소를 이해해야 더욱더 jQuery 를 이용해서 더 많은 효과를 구현할 수가 있습니다.
처음 jQuery 프로그래밍을 하시는 분들에게는 css 가 무엇인지를 이해하실것입니다. 그러나 정확하게 아시는 분은 많이는 안되실것같아서 약간의 설명을 덧붙여 설명해보겠습니다. 최근에 웹페이지를 구성하는 요소는 html 태그인 소스 코드와 그 시각적인 디자인을 다루는 css 코드로 분리하는 웹표준화가 많이 진행되고 있습니다. 즉 하나의 웹페이지도 하나의 데이터 문서라고 보시면 됩니다. 따라서 디자인 요소는 대부분 css 로 구현을 하게 되는 것입니다.
즉 jQuery 도 디자인 요소를 적용하는 것이라 생각하시면 됩니다. 우선은 가장 간단하게 알 수 있는 addClass 함수를 설명해드리겠습니다.
예를 들어 jQuery 소스 코드가 아래와 같다면,
$("p").addClass("myClass yourClass");
위의 코드 내용은 P 태그를 찾아서 거기에 myClass yourClass 라는 이름으로 클래스를 추가 하라는 것입니다. 즉 아래와 같이 P 태그 안에 text 라는 글자가 있을때 특정한 클래스를 추가하라는 것입니다.
<p>text</p> => <p class="myClass yourClass">text</p>
즉 위와같이 클래스가 추가가 되는 것입니다. 객체지향 프로그래밍을 하신 분이라면 클래스라는 것에 대해서 오해하실것 같아 말씀드립니다. 여기서의 클래스는 디자인 요소 코드라고 보시면 됩니다. 아래의 코드를 보고 설명해드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected");
</script>
</body>
</html>
코드에서 <style> ~ </style> 안에 있는 내용이 스타일 코드라 보시면 됩니다. css 코드를 보시면 p 태그는 마진은 8px 폰트사이즈는 16px 이며 selected 클래스라고 선언된 곳의 색깔은 blue 로하고 highlight 클래스라고 선언된 곳의 백그라운드는 yellow 로 하라고 선언이 되어있습니다. 그리고 본문에 p 태그로 선언되어있는 글자 Hello, and, Goodbye 3개가 표시되는데..
하단의 스크립트가 동작되면서 클래스가 추가가 됩니다. 그런데 p 태그 중에 맨 마지막(last)것만 selected 클래스를 추가하는 것입니다.
즉 <p>Goodbye</p> => <p class="selected">Goodbye</p>
결과 화면은 아래와 같습니다.
즉 jQuery 는 클래스를 이용하여 그리고 그 스타일 속성값을 이용해서 에니메이션을 구현하는 것입니다. 그리고 추가된 클래스를 삭제하는 방법은 removeClass 함수를 이용하면 됩니다.
<script>
$("p:last").removeClass("selected");
</script>
위의 코드가 실행되면 아래와 같이 변경 됩니다.
<p class="selected">Goodbye</p> => <p>Goodbye</p>
'IT News > jQuery' 카테고리의 다른 글
| jQuery를 이용한 메인이미지 변경 효과 - animate, fade효과 (0) | 2012.12.23 |
|---|---|
| jQuery 본문의 모든 이미지 사이즈 조절. 배열과 관련하여 프로그램의 foreach 구문과 비슷한 기능 (0) | 2012.10.24 |
| jquery timer 시간에 따른 이벤트 설정 (0) | 2012.10.12 |