[jQuery] jQuery CSS 색상
jQuery를 사용하여 HTML 요소의 배경색, 글꼴 색상 및 기타 스타일 속성을 동적으로 변경할 수 있습니다. 이 글에서는 jQuery를 사용하여 CSS 색상을 변경하는 방법에 대해 알아보겠습니다.
HTML 구조
우선, 스타일을 변경할 HTML 요소가 있어야 합니다. 예를 들어, 다음과 같은 간단한 HTML 구조를 가정해 보겠습니다:
<!DOCTYPE html>
<html>
<head>
<title>jQuery CSS 색상 변경</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.my-element {
width: 100px;
height: 100px;
background-color: #ff0000; /* 초기 배경색: 빨강 */
}
</style>
</head>
<body>
<div class="my-element"></div>
</body>
</html>
jQuery를 사용하여 CSS 색상 변경하기
jQuery를 사용하여 .my-element의 배경색을 클릭하면 파란색으로 변경하는 예제 코드는 다음과 같습니다:
$(document).ready(function() {
$(".my-element").click(function() {
$(this).css("background-color", "#0000ff"); // 파란색으로 변경
});
});
위 예제 코드에서는 .my-element를 클릭했을 때 css() 함수를 사용하여 배경색을 #0000ff로 변경하도록 했습니다.
결론
jQuery를 사용하여 CSS 색상을 동적으로 변경할 수 있으며, 이를 통해 웹 페이지의 사용자 경험을 향상시킬 수 있습니다. jQuery를 사용하는 방법은 다양하며, 이는 CSS 스타일링에 대한 유연한 접근 방법을 제공합니다.