본문 바로가기
Programming/jQuery

jQuery에서 css를 사용하는 방법

by 혀코 2020. 2. 15.

안녕하세요. 혀코입니다.

오늘은 jQuery에서 css를 사용하는 방법에 대해서 알아보겠습니다.

 

jQeury에서 css를 사용하는 방법은 다음과 같습니다.

우선, 간단한 html로 사각형을 그려보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery - css</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: violet;
        }
    </style>
    <script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

가로가 300px 세로가 200px인 violet 의 배경색을 가진 직사각형을 그렸습니다.

css를 사용해서 배경색을 변경해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery - css</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: violet;
        }
    </style>
    <script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="box">

    </div>
    <script>
        $('.box').css({'background-color': 'yellow'});
    </script>
</body>
</html>

`$('.box').css({'background-color': 'yellow'});`를 써서 직사각형의 배경색을 노란색으로 바꿀 수 있습니다.

 

이렇게 jQuery에서 css를 사용하는 방법에 대해서 알아봤습니다.

유용하셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)

댓글