[jQuery] CSS 효과 주는 방법

기본 사용 방법

$("요소선택").css("속성", 값")

 

// id가 example인 요소의 스타일 변경
$("#example").css('color','red');

 

여러 개의 CSS 적용하기

1. 체이닝 기법

체인처럼 주고자 하는 효과들을 연속적으로 써내려가면 된다.

 

// id가 example인 요소의 스타일 변경
$("#example").css('color','red').css('font-size','24px');

 

2. 객체(Object) 사용

 

객체 (object)을 이용해 복수의 값을 저장할 수도 있다.

 

// id가 example인 요소의 스타일 변경
$("#example").css( {'color' : 'red' , 'font-size' : '24px');

 

값 변수화 시키기

css 스타일을 변수에 저장하고 사용할 수 있다. 자주 사용하는 스타일이라면 이와 같이 작성하는 것을 추천

 

// 변수에 값 저장
let myStyle = { "color" : "red", "font-size" : "24px" }

// id가 example인 요소의 스타일 변경
$("#example").css(myStyle);