안녕하세요. 혀코입니다.
오늘은 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를 사용하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글