[jQuery] 6. CSS의 속성을 변경해보쟈. (css) 강의이야기 | Posted on 2012. 2. 5. 17:44
해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.
이번에는 마우스를 클릭하면 css속성이 변경되도록 해보겠습니다.
css({'속성':'값'})으로 사용이 가능합니다.
속성값 여러개를 변경하는 경우는 ,로 구별해서 사용이 가능합니다.
예를들면, css({'속성1':'값1','속성2':'값2'}) 처럼 말이죠.
HTML쪽은 "<div id="abc">abc</div>"를 그대로 사용하며..
jQuery는 클릭을 했을때 글자 크기가 커지면서 색상이 변경되도록 해보겠습니다.
$("#abc").click(function(){
$(this).css({'font-size':'40px','color':'red'});
});
클릭을 넣는 이유는, 효과를 보기 위해서 입니다.
이제 클릭을 하게 되면 폰트 사이즈와 색상이 바뀌는것을 볼 수 있습니다.
※ 사실 css 옵션을 주는 방법에는 한가지가 더 있습니다.
css('옵션','값')이 있는데..
이것의 경우는 한가지만 적용이 가능하며, 위에서 설명한것과 연동해서 사용하다 보시면 아마도 많이 햇갈리실겁니다.
주로 위에서 설명한 것을 사용하시면서, 이것은 "그냥 이런게 있다." 정도로만 알면 될거라 생각합니다.
출처 : Pure Ani's Blog
이번에는 마우스를 클릭하면 css속성이 변경되도록 해보겠습니다.
css({'속성':'값'})으로 사용이 가능합니다.
속성값 여러개를 변경하는 경우는 ,로 구별해서 사용이 가능합니다.
예를들면, css({'속성1':'값1','속성2':'값2'}) 처럼 말이죠.
HTML쪽은 "<div id="abc">abc</div>"를 그대로 사용하며..
jQuery는 클릭을 했을때 글자 크기가 커지면서 색상이 변경되도록 해보겠습니다.
$("#abc").click(function(){
$(this).css({'font-size':'40px','color':'red'});
});
클릭을 넣는 이유는, 효과를 보기 위해서 입니다.
이제 클릭을 하게 되면 폰트 사이즈와 색상이 바뀌는것을 볼 수 있습니다.
※ 사실 css 옵션을 주는 방법에는 한가지가 더 있습니다.
css('옵션','값')이 있는데..
이것의 경우는 한가지만 적용이 가능하며, 위에서 설명한것과 연동해서 사용하다 보시면 아마도 많이 햇갈리실겁니다.
주로 위에서 설명한 것을 사용하시면서, 이것은 "그냥 이런게 있다." 정도로만 알면 될거라 생각합니다.
출처 : Pure Ani's Blog
