jQuery CSS 메소드
css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자
CSS 지정
css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자
#example{backgound: #fcc;}
/*선택자는 아이디인 #example
그리고 프로처티는 배경인backgound
마지막으로 그배경색은 #fcc로 한것*/
이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자
jQuery css()메소드
jQuery에서 사용해보자 방법은 다음과 같다.
- .css('프로퍼티' ,'값')
- 만약 여러개를 정한다면 중괄호와 콜론을 사용한다. .css({'프로퍼티1':'값1','프로퍼티2':'값2' })
예제를 통해 알아보자
배경색을 #fcc로 할것임
배경색을 #fcc로 하고 폰트 사이즈를 28px로
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의 다른 메소드와 함께 혼용하여 다양한효과를 줄수도 있다는 점이 장점이다.
댓글