728x90 300x250 SMALL 바닐라JS5 Vanilla JS 간단한 모달창 열기/닫기 jQuery모달 열기 × 모달 내용입니다. Vanilla JS모달 열기 × 모달 내용입니다. 모달 열기 × 모달 내용입니다. ">모달 열기×모달 내용입니다. 제이쿼리에서 fadeIn() / fadeOut()은 서서히 나타나고 사라지는 부드러운 효과가 나타난다,하지만 Vanilla JS 코드는 단순히 display:none 했다가 display:block 하는 효과로 애니메이션 효과가 없다.Vanilla JS로도 fadeIn / fadeOut 효과를 구현할 수 있지만 코드가 길고 번거롭다.바닐라 JS로 fadeIn / fadeOut 효과 만들기function fadeIn(el, duration = 400) { el.. 2025. 4. 22. Vanilla JS 동적 요소 추가/삭제 jQuery추가 Vanilla JS추가 const li = document.createElement("li"); //새 li요소를 생성li.textContent = "새 항목"; //텍스트 내용을 설정list.appendChild(li); //ul 또는 ol에 추가 2025. 4. 21. Vanilla JS 입력창에 입력한 값 가져오기 다음의 jQuery를 Vanilla JS로 변경해 보자 jQuery 값 확인 값 확인 "> 값 확인 Vanilla JS - 입력창에 입력한 값 가져오기값 확인 - value : 값을 가져오거나 설정할 때 사용document.getElementById("nameInput").value = "미리 채워진 값";이런식으로 변경도 가능 2025. 4. 19. 클래스 제어, 토글, 조건문 버튼 클릭 시 클래스 토글(활성화 상태 표시) 다음 jQuery를 Vanilla JS로 변경해 보자토글 버튼 Vanilla JS토글 버튼 토글 버튼">토글 버튼 1. document.querySelector(".btn3")html에서 .btn3클래스가 붙은 첫 번째 요소를 선택 2. .addEventListener("click", function*(){...})해당 버튼을 클릭했을때 실행할 함수 (이벤트 핸들러)를 지정 3. this.classList.toggle("active")this.는 현재 클릭한 요소 자신을 의미함classList는 해당 요소에 적용된 클래스 목록을 관리할 수 있는 DOM 객체toggle("active")는active 클래스가 없으면 추가 있으면 제거 2025. 4. 18. 이전 1 2 다음 728x90 반응형 LIST