jQuery DOM 조작 및 시각 효과

🧩 DOM 조작 및 시각 효과

이번 강좌에서는 jQuery를 이용해 HTML 문서 구조인 DOM(Document Object Model)을 어떻게 조작할 수 있는지 배우고, 시각적으로 다양한 효과를 어떻게 적용하는지 알아봅니다. DOM 조작은 동적인 웹 페이지를 만들기 위한 핵심 기술입니다.

📌 DOM 조작이란?

DOM(Document Object Model)은 웹 페이지의 구조를 표현한 객체입니다. HTML 요소들은 DOM 트리로 구성되어 있으며, jQuery를 이용해 이 구조를 쉽게 탐색하고 수정할 수 있습니다.

✅ 콘텐츠 조작 메서드

• .html() : 요소의 HTML 콘텐츠를 가져오거나 변경합니다.
• .text() : 요소의 텍스트를 가져오거나 변경합니다.
• .val() : 폼 요소의 값을 가져오거나 설정합니다.

$('#title').html('<b>굵은 텍스트</b>');
$('#description').text('일반 텍스트만 입력');
$('#username').val('guest123');
  

✅ 요소 추가 및 삭제

• .append(), .prepend() : 자식 요소로 추가
• .after(), .before() : 형제 요소로 추가
• .remove(), .empty() : 요소 삭제

$('#list').append('<li>새 항목</li>');
$('#title').before('<h2>부제목 추가</h2>');
$('#box').remove(); // 요소 전체 삭제
$('#content').empty(); // 내용만 삭제
  

✅ 속성 및 클래스 조작

• .attr(), .removeAttr() : 속성 추가/삭제
• .addClass(), .removeClass(), .toggleClass() : 클래스 조작

$('#link').attr('href', 'https://example.com');
$('#link').removeAttr('target');
$('#box').addClass('highlight');
$('#box').toggleClass('active');
  

🎨 jQuery 시각 효과

jQuery는 사용자 인터페이스에 시각적 효과를 쉽게 추가할 수 있는 다양한 메서드를 제공합니다. 애니메이션, 페이드 인/아웃, 슬라이드 효과 등으로 웹 페이지를 더 생동감 있게 만들 수 있습니다.

✅ 자주 사용하는 효과 메서드

• .hide(), .show() : 요소를 숨기거나 표시
• .fadeIn(), .fadeOut(), .fadeToggle() : 투명도 기반 전환
• .slideDown(), .slideUp(), .slideToggle() : 위/아래 슬라이딩
• .animate() : CSS 속성을 이용한 커스텀 애니메이션

$('#box').hide(); // 숨기기
$('#box').fadeIn(1000); // 1초간 서서히 보이기
$('#menu').slideToggle(); // 메뉴 슬라이드 열기/닫기
$('#box').animate({ width: '300px', opacity: 0.5 }, 500);
  

✅ 콜백 함수

애니메이션이나 효과가 끝난 뒤 실행할 코드를 콜백 함수로 전달할 수 있습니다.

$('#box').fadeOut(1000, function() {
  alert('박스가 사라졌습니다!');
});
  

🧪 예제 실습

버튼을 클릭하면 콘텐츠 박스에 애니메이션 효과를 적용하는 간단한 예제를 만들어봅시다.

<div id="box" style="width:100px; height:100px; background:#3498db;"></div>
<button id="move">이동하기</button>


<script>
  $('#move').click(function() {
    $('#box').animate({ left: '+=100px' }, 500);
  });
</script>
  

위 예제에서는 #box 요소를 오른쪽으로 100px 이동시키는 애니메이션을 적용합니다.

📌 마무리

DOM 조작과 시각 효과는 jQuery의 가장 큰 장점 중 하나입니다. jQuery를 사용하면 복잡한 JavaScript 코드를 간결하게 줄이고, 직관적으로 DOM을 제어할 수 있습니다. 실습을 반복하며 자연스럽게 몸에 익히는 것이 가장 좋은 학습 방법입니다.