jQuery는 HTML 요소의 CSS 스타일을 동적으로 변경하는 데 사용할 수 있는 강력한 도구입니다. 이 포스트에서는 jQuery를 사용하여 웹 페이지의 요소에 CSS 스타일을 적용하고 변경하는 방법에 대해 살펴보겠습니다.

1. jQuery를 사용한 CSS 스타일 변경

jQuery를 사용하여 CSS 스타일을 변경하려면 css() 메서드를 사용합니다. 이 메서드는 지정된 요소의 CSS 속성을 설정하거나 반환합니다.

// CSS 스타일 변경
$(document).ready(function(){
    $("button").click(function(){
        $("p").css("color", "red");
        $("p").css("font-size", "24px");
    });
});

위의 예제에서는 버튼이 클릭되면 <p> 요소의 텍스트 색상을 빨간색으로 변경하고 글꼴 크기를 24px로 변경합니다.

2. CSS 클래스 추가 및 제거

jQuery를 사용하여 CSS 클래스를 추가하거나 제거하여 스타일을 변경할 수도 있습니다. addClass() 및 removeClass() 메서드를 사용하여 CSS 클래스를 추가하거나 제거할 수 있습니다.

// CSS 클래스 추가 및 제거
$(document).ready(function(){
    $("#addBtn").click(function(){
        $("p").addClass("highlight");
    });
  
    $("#removeBtn").click(function(){
        $("p").removeClass("highlight");
    });
});

위의 예제에서는 “highlight” 클래스가 추가 또는 제거될 때 <p> 요소의 스타일이 변경됩니다.

3. CSS 속성 이벤트 처리

또한 jQuery를 사용하여 CSS 속성에 이벤트를 적용할 수 있습니다. 예를 들어, 요소에 마우스를 올렸을 때와 마우스가 요소를 떠났을 때 스타일을 변경하는 것과 같은 이벤트 처리가 가능합니다.

// CSS 속성 이벤트 처리
$(document).ready(function(){
    $("p").hover(function(){
        $(this).css("color", "blue");
    }, function(){
        $(this).css("color", "black");
    });
});

위의 예제에서는 마우스를 <p> 요소 위로 올릴 때 텍스트 색상을 파란색으로 변경하고, 마우스가 요소를 벗어날 때 텍스트 색상이 검정색으로 되돌아갑니다.

결론

jQuery를 사용하면 HTML 요소의 CSS 스타일을 동적으로 변경할 수 있어 웹 페이지를 보다 상호작용적으로 만들 수 있습니다. CSS를 직접 변경하는 것보다 훨씬 간편하게 작업할 수 있으며, 이로 인해 사용자 경험을 향상시킬 수 있습니다.

참고 자료: jQuery 공식 문서