[jQuery] jQuery CSS 콘텐츠 스타일링

26 Dec 2023

jQuery를 사용하면 쉽게 HTML 요소들을 선택하고 조작할 수 있습니다. 이를 활용하여 CSS 속성을 동적으로 변경하여 콘텐츠를 스타일링할 수 있습니다. 이번 포스트에서는 jQuery를 사용하여 콘텐츠를 스타일링하는 방법을 살펴보겠습니다.

요소 선택

jQuery를 이용하면 CSS 선택자를 사용하여 원하는 요소를 선택할 수 있습니다. 예를 들어, $('h1')은 모든 h1 요소를 선택하게 됩니다. 선택한 요소에 CSS 스타일을 적용하거나 변경할 수 있습니다.

.css() 메서드를 사용하여 선택한 요소의 CSS 속성을 변경할 수 있습니다. 예를 들어, $('p').css('color', 'red')는 모든 p 요소의 글자 색상을 빨간색으로 변경합니다.

$(document).ready(function(){
  $('button').click(function(){
    $('p').css('color', 'blue');
  });
});

위의 예제는 버튼을 클릭할 때 모든 p 요소의 글자 색상을 파란색으로 변경하는 예제입니다.

animate() 메서드를 사용하여 CSS 속성을 부드럽게 변경하고 애니메이션 효과를 추가할 수 있습니다. 이를 사용하여 요소의 크기, 위치, 투명도 등을 조절할 수 있습니다.

$(document).ready(function(){
  $('button').click(function(){
    $('p').animate({fontSize: '20px'}, 'slow');
  });
});

위의 예제는 버튼을 클릭할 때 모든 p 요소의 글꼴 크기를 부드럽게 20px로 변경하는 예제입니다.

jQuery를 사용하여 CSS 콘텐츠를 스타일링하는 다양한 방법이 있으며, 이를 이용하여 웹페이지의 인터랙티브한 콘텐츠를 구현할 수 있습니다.