======jQuery - Get and Set CSS Classes======
<WRAP left notice 70%>
  * description : jQuery - Get and Set Classes
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-16
</WRAP>
<WRAP clear></WRAP>
\\
%%jQuery%%를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다.\\

=====jQuery Manipulating CSS=====
%%jQuery%%에는 %%CSS%% 조작을 위한 여러 가지 방법이 있습니다. 다음 방법을 살펴 보겠습니다:\\
  * ''addClass()'' - 선택한 요소에 하나 이상의 클래스를 추가합니다.
  * ''removeClass()'' - 선택한 요소에서 하나 이상의 클래스를 제거합니다.
  * ''toggleClass()'' - 선택한 요소에서 클래스 추가/제거 사이에서 토글합니다. 
  * ''css()'' - 스타일 속성을 설정하거나 반환합니다.

=====Example Stylesheet=====
이 페이지의 모든 예제에는 다음 스타일 시트가 사용됩니다.\\
<code css>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
} 
</code>

=====jQuery addClass() Method=====
다음 예제는 다른 요소에 클래스 속성을 추가하는 방법을 보여줍니다.\\ 
물론 클래스를 추가할 때 여러 요소를 선택할 수 있습니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("h1, h2, p").addClass("blue");
        $("div").addClass("important");
      });
    });
</code>
\\
''addClass()'' 메서드 내에서 여러 클래스를 지정할 수도 있습니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").addClass("important blue");
      });
    });
</code>

=====jQuery removeClass() Method=====
다음 예제는 다른 요소에서 특정 클래스 속성을 제거하는 방법을 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("h1, h2, p").removeClass("blue");
      });
    });
</code>

=====jQuery toggleClass() Method=====
다음 예제는 %%jQuery%% ''toggleClass()'' 메서드를 사용하는 방법을 보여줍니다.\\ 
이 메서드는 선택한 요소에서 클래스 추가/제거 사이에서 토글합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("h1, h2, p").toggleClass("blue");
      });
    });
</code>

=====jQuery css() Method=====
%%jQuery%% %%css()%% 메서드는 다음 장에서 설명합니다.\\


=====jQuery HTML Reference=====
모든 %%jQuery%% %%HTML%% 메서드에 대한 전체 개요를 보려면, [[https://www.w3schools.com/jquery/jquery_ref_html.asp|jQuery HTML/CSS Reference]]로 이동하십시오.

{{tag>오션 jQuery - Get and Set CSS Classes}}