최코딩의 개발노트

개요: 필자가 공부하면서 정리한 게시물이다. const loginInput=document.querySelector("#login-form input"); const loginButton=document.querySelector("#login-form button"); querySelector에서 id를 #으로 통해 불러올 수 있다. const loginInput=document.querySelector("#login-form input"); const loginButton=document.querySelector("#login-form button"); function onLoginBtnClick(){ console.log(loginInput.value); } loginButton.addEventLis..

개요: 필자가 공부하면서 정리한 게시물이다. document라는 object를 통해 html 코드를 불러올 수 있다. title은 현재 승호인데 gg 하면 일시적으로 title 변경이 가능하다. 이외에도 document.body , document.head 등 을 통해 불러올 수 있다. 승호얌 id를 title 지정한 부분을 getElementById를 통해 위와 같이 불러올 수 있다. const title = document.getElementById("title"); console.log(title); js에서도 이렇게 불러올 수 있다.! console.dir(title); h1 태그에서 가져올 수 있는것들이다. 즉 dir은 요소 내부를 불러오는것이다. title.innerText="d"; 이때 js..

개요: 필자가 공부하면서 정리한 게시물이다. function sayHello(){ console.log("hello"); } sayHello(); 기본적인 구조는 다음과 같다. function sayHello(nameOfPerson){ console.log(nameOfPerson); } sayHello("a"); 인자 전달방식은 다음과 같다. function sayHello(nameOfPerson){ console.log(nameOfPerson); } sayHello("1"); sayHello("1"); sayHello(15); 숫자로도 가능하다. function sayHello(nameOfPerson,age){ console.log(nameOfPerson+age); } sayHello("승호",24);..

개요: 필자가 공부하면서 정리한 게시물이다. DOCTYPE html> 승호 html 파일에 js를 넣고 싶으면 문법을 이용해 다음과 같이 작성한다. alert("hi"); 해당 js 파일 소스는 다음과 같다. 결과는 이렇다! 콘솔로도 제어가 가능하다! 문자로 할때는 ""붙여서 한다! string으로 인식이 된다. console.log(1234156) console.log를 하면 콘솔에 log 또는 print하는 일을 한다. const a=5; const b=2; console.log(a%b); console.log(a+b); console.log(a*b); const 변수를 써서 다음과 같이 지정이 된다. const myName="승호"; let myName1="승호2"; 이때 let 이라는 변수도 쓸 ..

개요: 필자가 클론코딩을 공부하면서 정리하는 게시물이다. Transition - 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 한 것이다. - state에 따라 바뀌는 property를 갖고 있는 사용된다. - box, element를 변형시키지 않는다. - margin, padding 적용안된다. 일종의 3D transformation이기 때문이다. a { color: wheat; background-color: tomato; text-decoration: none; padding: 3px, 5px; border-radius: 5px; font-size: 50px; transition: background-color 10s ease-in-out, color 5s ease-in-out; } a:ho..

개요: 필자가 클론코딩을 공부하면서 정리한 게시물이다. position 레이아웃보다는 위치를 아주 조금 위로 오른쪽으로 옮기고 싶을 때 사용 fixed div { color:blue; width:300px; height:300px; background-color:teal; } #different { position:fixed; background-color:wheat; width:350px; } 이렇게 하면 스클롤을 내렸을시 화면상에 wheat박스는 그대로 고정되있는다. #different { top:5px; position:fixed; background-color:wheat; width:350px; } 이렇게 하면 wheat박스는 teal 박스 위로 가게 된다. 레이어가 구분되는 것을 쉽게 확인할 수..