[jQuery] jQuery CSS 레이아웃 조작

26 Dec 2023

jQuery

jQuery는 CSS를 통해 웹 페이지의 레이아웃을 동적으로 조작하는 데 유용한 라이브러리입니다. 이 포스트에서는 jQuery를 사용하여 CSS 레이아웃을 조작하는 방법에 대해 알아보겠습니다.

1. CSS 속성 변경

jQuery를 사용하여 HTML 요소의 CSS 속성을 변경할 수 있습니다.

$(document).ready(function(){
    $("button").click(function(){
        $("p").css("color", "red");
        $("p").css("font-size", "24px");
    });
});

2. 요소 숨김/표시

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});

3. 애니메이션 효과

jQuery를 사용하여 CSS 속성에 애니메이션 효과를 적용할 수도 있습니다.

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '250px'});
    });
});

4. CSS 클래스 추가/제거

$(document).ready(function(){
    $("#addClass").click(function(){
        $("p").addClass("highlight");
    });
    $("#removeClass").click(function(){
        $("p").removeClass("highlight");
    });
});

5. 동적으로 CSS 속성 설정

jQuery를 사용하여 동적으로 CSS 속성을 설정할 수 있습니다.

$(document).ready(function(){
    $("button").click(function(){
        $("p").css({
            "color": "red",
            "font-size": "24px",
            "background-color": "yellow"
        });
    });
});

jQuery를 사용하면 CSS 레이아웃을 동적으로 조작할 수 있어서 웹 페이지의 사용자 경험을 향상시킬 수 있습니다.

Reference:

jQuery 공식 문서