728x90 자바스크립트 기초2 JavaScript 기초 강의 10편: JavaScript와 CSS 애니메이션 연동 1. CSS 애니메이션과 JavaScript의 연동기본적으로 CSS 애니메이션은 CSS만으로 실행되지만, JavaScript를 사용하면 애니메이션의 시작, 중지, 속성 변경 등을 동적으로 제어할 수 있습니다.CSS 애니메이션 설정 예제/* CSS 애니메이션 */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}.animated-element { animation: fadeIn 2s forwards;} JavaScript로 애니메이션 클래스 추가JavaScript에서 CSS 클래스를 동적으로 추가하거나 제거할 수 있습니다.const element = document.querySelector(".el.. 2024. 12. 10. JavaScript 기초 강의 2편: DOM 조작과 이벤트 처리 1. DOM이란?DOM(Document Object Model)은 웹 페이지의 구조를 트리 형태로 표현한 것입니다. 각 HTML 요소는 DOM의 노드로 변환되며, JavaScript는 이 DOM을 통해 페이지의 콘텐츠와 구조를 동적으로 조작할 수 있습니다.예를 들어, 아래와 같은 HTML 구조가 있다면: Hello, World! 이것은 JavaScript DOM 조작 예제입니다.DOM은 다음과 같은 트리 구조로 표현됩니다:- html - head - title - body - h1#main-title - p.description2. DOM 요소 선택DOM 요소를 선택하려면 JavaScript에서 제공하는 다양한 메서드를 사용할 수 있습니다.1) getElementByIdid.. 2024. 12. 2. 이전 1 다음 728x90
