jQuery CSS 메소드

css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자

CSS 지정

css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자

#example{backgound: #fcc;} 
/*선택자는 아이디인 #example  
 그리고 프로처티는 배경인backgound 
 마지막으로 그배경색은 #fcc로 한것*/

이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자

jQuery에서 사용해보자 방법은 다음과 같다.

예제를 통해 알아보자

1.<H4>배경색을 #fcc로 할것임</H4>

2.<P>배경색을 #fcc로 하고 폰트 사이즈를 28px로</P>

h4엘리먼트에는 배경색변화 그리고 p엘리먼트에는 배경색변화와 더불어 폰트사이즈도 변하게 할것이다.

$(document).ready(function(){ 
  $('h4').css('background','#fcc'); 
  $('p').css({'background':'#fcc','font-size':'28px' }); 
});

위 소스와 같이$('h4'),$('p')로 접근했고 .css()메소드로 css를 지정해주었다.프로퍼티를 여러개 사용할떄는 중괄호와 콜론을 사용한다는점을 명심해두자.

직접작성한 예제는 여기서보자 그냥 css를 사용한것과 jquery를 이용한예제이다http://sianasiatiger.cafe24.com/study/J_cssEffect.html

jQuery를 이용한 것은 크로스브라우징의 목적도 있지만 이외 css()메소드와 함께 jQuery의 다른 메소드와 함께 혼용하여 다양한효과를 줄수도 있다는 점이 장점이다.