(Manipulating CSS 01) class 추가하기/제거하기

SoloLearn jQuery 번역

Manipulating CSS

CSS 조작하기

  • jQuery has several methods for CSS manipulation.
    • jQuery에는 CSS 조작을 위한 몇 가지 메소드가 있다.
  • The addClass() method adds one or more classes to the selected elements.
    • addClass() 메소드는 선택된 element에 하나 이상의 class를 추가한다.

  • HTML:
<div>What's up?</div>

  • CSS:
.header {
  color: blue;
  font-size: x-large;

  • JS:

코드 실행 확인

  • The above code assigns the div element the class “header”.
    • 위 코드는 div element에 “header” class를 지정한다.

To specify multiple classes within the addClass() method, just separate them using spaces: $("div").addClass("class1 class2 class3")

class를 공백으로 구분해서, 여러 class를 지정한다.

예: $("div").addClass("class1 class2 class3")

  • The removeClass() method removes one or more class names from the selected elements.
    • removeClass() 메소드는 선택된 element에서 하나 이상의 class를 제거한다.

코드 실행 확인

  • The code above removes the class “red” from the div element.
    • 위 코드는 div element에서 “red” class를 제거한다.


toggleClass() 메소드

  • The toggleClass() method toggles between adding/removing classes from the selected elements, meaning that if the specified class exists for the element, it is removed, and if it does not exist, it is added.
    • toggleClass() 메소드는 선택된 element의 class를 toggle (추가/제거) 한다.

  • HTML:
<p>What's up?</p>

  • CSS:
.red {
  color: red;
  font-weight: bold;

  • JS:
$(function() {
  $("button").click(function() {

코드 실행 확인

The code above toggles the class name “red” upon clicking the button.

위 코드는 버튼을 클릭할 때마다 “red” class를 toggle 한다.


  • Fill in the blanks to add the class names “text” and “menu” to the <p> element.
    • “text”와 “menu” class를 <p> element에 추가해라.
$("p").addClass("text menu");

  • Which class name will the <p class=”a b”></p> element have after the following code?
    • <p class=”a b”></p> element는 다음 코드 후에 어떤 class를 가지는가?
$("p").removeClass("a c");


  • Will the paragraph have a border after this code?
    • 아래 코드 후, p 태그에 테두리가 생기나?
  .test {
    border-style: solid;

<p>What's up?</p>

  $(function() {