코딩하는 마멋

- 자바스크립트에는 애니메이션 기능을, CSS에는 스타일 기능을 쓰는 게 좋다. - 즉, 구분해서 사용하는 것이 좋음 HTML click me! // JS 파일과 연결 JavaScript에서 조건문 활용한 스타일 변경 const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick() { const currentColor = h1.style.color let newColor; if(currentColor === "blue") { newColor = "tomato"; } else { newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click..

Event - 클릭 하는 것, 마우스가 특정 위치에 올라가는 것, 이름 적는 것 등 대부분 모든 것이 event - console.dir을 사용해서 코드 내부를 보면 on으로 시작하는 것들이 event listener HTML click me! eventListener addEventListener - 지정하는 이벤트를 감지하고 행동 - .removeEventListener 사용해서 제거 가능 Click, mouse event const title = document.querySelector(".hello:first-child h1"); function handleTitleClick() { console.log("title was clicked!"); } title.addEventListener("cli..

HTML grab me! 요소 가져오기 (getElements) const hellos = document.getElementsByClassName("hello"); console.log(hellos); /* [h1.hello, h1.hello, h1.hello, h1.hello] */ - getElementsByClassName : hello라는 class이름을 가진 요소를 가져오는 것 - 배열로 출력 - tagName, ById 등도 있음 querySelector, querySelectorAll const title = document.querySelector(".hello h1"); console.log(title); /* grab me! - 요소를 CSS 방식으로 검색 - querySelector..

HTML 문서 marmot HTML에 '' 를 넣어야 자바스크립트에서 HTML을 사용할 수 있다. 자바스크립트에서 HTML 불러오기 const title = document.getElementById("title"); // title = 불러온 HTML의 title이라는 id 값을 가진 요소 console.dir(title); // console.log도 같은 결과 /* h1#title */ title = HTML 문서의 title이라는 id 값을 가진 요소라고 선언 하는 것 console.dir을 활용하면 콘솔에서 title에 대한 여러 값들을 자세하게 볼 수 있음 자바스크립트에서 HTML 변경하기 const title = document.getElementById("title"); title.inne..