Wanna be Brilliant Full-Stack Developer

목표 우리는 CSS를 활용해서 Application의 스타일링을 더 잘할 수 있다! style에 적합한 도구는 CSS이고 Animation에 적합한 도구는 JavaScript이다. style.css에서 h1 을 색상을 변경하기 위해서는 h1을 적고 color을 선정해주면된다! body { background-color: beige; } h1 { color: cornflowerblue; } 만약 .active라는 클래스를 생성해서 컬러를 tomato로 선정하게 되면 이 class를 어떤 element에 지정해 주면 ex) h1이던 span이던간에 tomato 색깔을 가지게 될것이다! 이제 자바스크립트에 하고싶은것은 이 h1에 active class를 전달해주고 싶다! const h1 = document.q..

목표 유저가 title을 클릭했을떄 title을 파란색으로 칠해주고 내가 한번더 클릭하면 색깔을 토마토색으로 바꾸고 싶다. const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { h1.style.color = "blue"; } h1.addEventListener("click", handleTitleClick); 여기서 하고 싶은건 console.log(h1.style.color);을 하여서 만약 h1.style.color가 blue라면 이걸 tomato로 변경해주세요! 만약 h1.style.color 가 blue 색깔이 아니라면 blue로 변경해주세요 라고하는것! const h1 = docume..

Event를 사용하는 방법에는 2가지의 방법이 있다! ㅅㅅㄴㅁㄴㅇ 1) title.addEventListner("click", handleTitleClick )을 사용하는것 2) title.onclick = handleTitleClick const title = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { title.style.color = "blue"; } function handleMouseEnter() { title.innerText = "Mouse is here!"; } function handleMouseLeave() { title.innerText = "Mouse is Gone!"; } tit..

const title = document.querySelector("div.hello:first-child h1"); console.log(title); title.innerText = "Hello"; 여기서 이 element의 내부를 보고싶으면? console.dir(title); 자자스크립트 오브젝트 내부에 있는 property들긔 값들을 우리는 변경할수 있다고 배웠다. 특정 property들은 변경 할수가 없지만 만약 style object안에 있는 color를 바꾸기위서는 어떻게 해야할까? const title = document.querySelector("div.hello:first-child h1"); console.dir(title); title.style.color = "blue"; h1의..