[jQuery] jQuery CSS 배경 이미지

26 Dec 2023

jQuery

jQuery를 사용하여 웹 페이지의 CSS 배경 이미지를 동적으로 변경하는 방법을 살펴보겠습니다. jQuery는 효율적인 방법으로 CSS 스타일을 조작할 수 있는 강력한 도구입니다.

1. jQuery 라이브러리 로드

우선, jQuery 라이브러리를 웹 페이지에 로드합니다. 다음과 같이 <script> 태그를 사용하여 jQuery 라이브러리를 로드합니다:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. CSS 배경 이미지 변경

다음은 jQuery를 사용하여 CSS 배경 이미지를 변경하는 간단한 예제 코드입니다:

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    width: 200px;
    height: 200px;
    background-image: url('default-bg.jpg');
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container"></div>

<script>
  $(document).ready(function(){
    $('.container').css('background-image', 'url("new-bg.jpg")');
  });
</script>

</body>
</html>

위 코드에서, $(document).ready() 함수는 문서가 로드될 때 실행되며, .container 클래스를 가진 요소의 배경 이미지를 변경합니다. css() 함수를 사용하여 background-image 속성을 수정합니다.

3. 결론

jQuery를 사용하면 간단하게 웹 페이지의 CSS 스타일을 동적으로 변경할 수 있습니다. 배경 이미지뿐만 아니라 다른 CSS 속성도 jQuery를 통해 쉽게 조작할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 웹 페이지의 동적인 기능을 구현할 수 있습니다.

이상으로 jQuery를 사용하여 CSS 배경 이미지를 변경하는 방법에 대해 알아보았습니다.

참고 자료

jQuery 공식 문서