제이쿼리를 사용하여 스타일 추가 및 제거하기 위해 클래스(class) 속성을 선택자로 사용합니다. 그 외에 동적인 스크립트 및 액션 등은 자바스크립트의 ID 값을 많이 사용합니다. 이렇게 클래스명을 추가하거나 제거하면 간단하게 원하는 스타일을 추가 또는 제거하는 것이 가능합니다. 물론 해당하는 class에는 스타일이 css에 선언되어야겠죠.


# 제이쿼리를 사용한 스타일 추가 및 제거 방법아래는 제이쿼리(jQuery)를 사용하여 클래스명을 추가, 삭제하는 방법에 대하여 알아보려고 합니다. 또한 현재 어떤 클래스를 가지고 있는지도 확인할 수 있는 메소드도 함께 알아보도록 하겠습니다.

! 제이쿼리를 클래스를 추가하는 방법과 직접 스타일을 부여하는 방법과는 어떤 차이점이 있을까?사실 제이쿼리(jQuery)를 사용하여 클래스명을 추가하거나 제거하는 방법말고도 직접 스타일을 부여할 수 있습니다. 예를들어 아래와 같은 attr() 또는 css() 메소드를 사용하는 방법이 존재합니다.
testEle.attr('style', 'color: red');
// attr() 메소드를 사용 style 속성 지정

testEle.css('color', 'red');
// css() 메소드로 특정 css 값을 지정하는 방법

보시는 것처럼 attr()를 사용하거나 css()를 사용할 수도 있습니다. 하지만 이런 경우에 inline 형태로 웹페이지에 스타일이 부여되기 때문에 아래와 같은 제약이 생기게 됩니다.

  • 코드와 스타일이 분리되지 못하여 유지보수에 단점
  • 인라인으로 적용된 스타일을 변경시 !important 키워드가 필요할 수 있음

이런 단점들 때문에 보통 클래스에 스타일을 정해두고 이 클래스를 추가하거나 제거하는 방법이 사용됩니다.


# 클래스를 추가하여 스타일 적용 예제보기그렇다면 위 코드는 클래스 방식으로 어떻게 바꿀 수 있을까요? 아래처럼 사용하는 것이 좋습니다.
@ style.css
.red {
  color: red;
}

@ style.html
<span>Color RED!!</span>

<script>
  $('span').addClass('red');
</script>

이제 여기에 스크립트를 아래와 같이 사용합니다.
@ style.js
$('span').addClass('red');

참고로 addClass는 이미 클래스가 추가되어있는 경우 또 다시 클래스를 추가하지 않습니다. 즉 중복되는 클래스는 자동으로 제외하기 때문에 편리하죠. 그럼 아래부터는 이를 사용한 몇 가지 예제소스를 보면서 알아보겠습니다. 먼저 addClass() 부터 알아보겠습니다.


# 제이쿼리 addClass() 정보 및 예제보기아래는 제이쿼리를 사용한 addClass() 메소드입니다. 기본적인 문법은 아래와 같습니다.

$(element).addClass('클래스명');

addClass() 속성을 사용하면 특정 요소에 새로운 클래스를 추가할 수 있습니다. 앞에 언급한 것처럼 이미 가지고 있는 클래스는 더 이상 추가되지 않습니다.

! addClass() 예제보기만약 아래와 같이 span 태그가 존재할 경우 여기에 red 클래스를 주어 폰트색을 변경하는 예제를 만들어 보겠습니다.
<style>
   .red { color: red; }
</sytle>

<span>Test addClass</span>

@ red.js
$('span').addClass('red');

위 코드를 실행하면 결과는 아래와 같습니다.
Test addClass
// 적용 전

Test addClass
// 스크립트 적용 후

아래에는 스타일을 제거하는 반대 경우를 알아봅니다.


# removeClass() 정보 및 예제 알아보기아래는 클래스를 제거하는 방법인 removeClass()를 알아봅니다. 먼저 아래와 같이 사용합니다.

$(Element).removeClass('클래스명');

클래스 속성이 가지고 있는 선택한 클래스명을 삭제합니다. 이 메소드는 선택된 클래스 모두를 제거하며 만약 해당 클래스가 없는 경우 아무런 변화가 없습니다. 그럼 아래 예제를 참고하세요.
<body>
  <span class="test">Test removeClass</span>
</body>

<script type="text/javascript">
  $('span').removeClass('test');
</script>

위 코드를 실행할 경우 아래처럼 class가 제거되어 나타납니다.
<body>
  <span class>Test removeClass</span>
</span>


# hasClass() 메소드 정보 및 예제보기아래는 hasClass() 메소드를 알아봅니다. 기본적인 문법은 아래처럼 사용됩니다.

$(Element).hasClass('클래스명');

이 함수는 클래스 속성에 해당 값이 존재하는지를 확인 후 Boolean값을 반환합니다. 즉, 존재한다면 true를 없다면 false를 반환하게 됩니다. 아래 예제를 봐주세요.
<body>
  <span class="test">Test hasClass</span>
</body>

<script type="text/javascript">
  $('span').hasClass('test');
</script>

위 코드를 실행하면 아래와같이 결과가 나타나게됩니다.
true
// test 클래스명이 존재하기 때문에 true가 반환되었음

즉 클래스가 존재하므로 true값이 반환되었습니다. 만약 없는 경우에는 반대로 false를 반환하죠.


# 마치면서위에 사용된 메소드는 제이쿼리에서 매우 자주 사용되는 메소드입니다. 클래스를 사용하여 스타일 지정하거나 제거하는 경우가 매우 많이 사용되기 때문이죠. 반드시 꼭 알아야하는 방법입니다.

특히 토글(toggle) 및 스위치 방식의 UI에서는 대부분 이 메소드를 사용하여 구현됩니다. 그만큼 편리하고 간단하기 때문이죠!