🖥️ 완성된 코드 1 2 3 4 5 document.querySelector('.btn1').addEventListener('click', function () { document.querySelector('.carousel-box').style.transform = 'translateX(0vw)'; document.querySelector('.carousel-box').style.transition = 'all 1s'; }); document.querySelector('.btn2').addEventListener('click', function () { document.querySelector('.carousel-box').style.transform = 'translateX(-100vw)'; docu..

🤔 input에 값을 채워도 계속 alert 창이 뜸 const input = document.querySelector('.email').value; const form = document.querySelector('form'); form.addEventListener('submit', function (event) { event.preventDefault(); if (input === '') alert('값을 입력해주세요.'); }); const input = document.querySelector('.email').value; → 이 라인이 문제였다. document.querySelector('.email').value의 초기값은 공백이므로 ‘’가 저장되고 const값이므로 input = ‘’로 고..

📒 Quotes const quotes = [ { quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde", }, { quote: "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.", author: "Albert Einstein", }, { quote: "A room without books is like a body without a soul.", author: "Marcus Tullius Cicero", }, , ... ]; const quote = document.querySelector("#quo..

🤖 경로 수정 폴더 만들어서 경로를 수정했을 경우 html에서도 경로를 수정한다. 📒 element#id, #id element 00:00:00 1. const clock = document.querySelector("h2#clock"); 2. const loginInput = document.querySelector("#login-form input"); 1. h2 element안의 id clock을 부를 때는 h2#clock 형태처럼 공백 없이 써야 코드가 작동 (문서 좀 더 찾아보기) element#id 2. form id의 자손인 input element를 부르므로 공백, 즉 자손결합자(descendant combinator) #id(space)element - descendant combina..

🤖 클래스 선택시 주의사항 const loginInput = document.querySelector("login-form input"); const loginButton = document.querySelector("login-form button"); function onLoginBtnClick() { console.log("click"); } loginButton.addEventListener("click", onLoginBtnClick); 에러 원인 → ‘login-form’은 클래스 이름인데 앞에 . 을 안 붙힘. 클래스는 .class, id는 #id 📒 HTML - form 태그 Log In form 안에 input을 넣어 정보 submit 시키기 엔터 키를 눌러도 submit이 가능 브라우저..

📒 Events 자바스크립트가 주로 하는 일 : event listen event : click, input, enter, disconnect from wifi… console.dir(title): element 내부의 property 알 수 있음 on으로 시작하는 속성들이 이벤트 How to use Events // 1. addEventListener 사용 // removeEventListner로 삭제 가능 title.addEventListener("click", handleTitleClick); // 2. window 이벤트 사용 (title).onclick = handleTitleClick; Window events function handleWindowResize() { document.body..