728x90 300x250 SMALL javaScript545 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 항목1 항목2 항목3 Vanilla JS 항목1 항목2 항목3 1. document.querySeletorAll("#list li")#list안에 있는 모든 li 태그를 선택해서 NodeList로 반환 2. forEach(functio(item){...})모든 li요소마다 반복하면서 이벤트를 붙임 3. item.addEventListener("click", function(){...})각 아이템을 클릭할 때마다 실행되는 클릭 이벤트 핸들러 4. items.forEach(el => el.classList.remove("selected"))리스트 전체에서 selected클래스를 전부 제거(선택 해제).el은 각각의 를 의미items.forE.. 2025. 4. 20. Vanilla JS 입력창에 입력한 값 가져오기 다음의 jQuery를 Vanilla JS로 변경해 보자 jQuery 값 확인 값 확인 "> 값 확인 Vanilla JS - 입력창에 입력한 값 가져오기값 확인 - value : 값을 가져오거나 설정할 때 사용document.getElementById("nameInput").value = "미리 채워진 값";이런식으로 변경도 가능 2025. 4. 19. 이전 1 2 3 4 5 6 ··· 137 다음 728x90 반응형 LIST