초보 개발자의 일기

CSS 적용방법에는 크게 3가지가 있다. 1. 내부 스타일 시트 HTMl파일에 스타일 기술한다. 헤드 태그 사이에 스타일 태그 부분에 작성한다. 장점: 작업이 쉽고 간편 단점: 재활용이 안된다. ex) ... 2. 외부 스타일 시트 다른 파일에 CSS문서를 작성하고 CSS를 필요로 하는 HTML 문서에 불러서 적용을 한다. 가장 기본이 되는 방법 ex) 헤드와 헤드 사이에 링크라는 태그 사용 3. 인라인 스타일시트 중간중간 태그사용해서 필요한 디자인을 바로바로 적용 HTML 태그에 직접 작성을 한다. 바로바로 적용이 되는 편리함이 있지만 권장은 하지 않는다. 모든 태그에 스타일 태그를 사용하면 적용이 가능하다. ex) This is a heading -캐스케이딩 상위 요소에서 하위 요소로 전달되는 의미에..

function onGeoOk(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in", lat, lng); } function onGeoError() { alert("Can't find you. No weather for you"); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); 이 코드를 이용해 우리의 현재 위치를 알 수 있다. navigator.geolocation.getCurrentPosition ( ) 이때 getCurrentPosition 은 2개의 argument가 필요하다. ..

filter 함수 array에서 뭔가를 삭제할 때 실제로 array에서 지우는 게 아닌 지우고 싶은 item을 빼고 새 array를 만듦 (item을 지우는 게 아닌 item을 제외하는 것) 기본 틀 function sexyFiler(){return True} [1,2,3,4].filter(sexyFilter) function sexyFilter(){return true} -> array의 item을 유지하고 싶으면 true를 return! [1,2,3,4,5].filter(sexyFilter) [1, 2, 3, 4, 5] 출력 function sexyFilter(){return false} -> array의 item을 제외하고 싶으면 false를 return! [1,2,3,4,5].filter(sexy..

const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); //const toDoInput = toDoForm.querySelector("input"); 와 같다 const toDoList = document.getElementById("todo-list"); function paintToDo(newTodo) { const li = document.createElement("li"); //변수명을 꼭 li 말고 다른것으로 해도 된다. 하지만 구분을 쉽게하기 위해 li //하지만 createElement안에는 li를 꼭써야한다. 이유는 li를 추가하기 위해서..

Math.floor는 소수점을 버리는 것(버림) 1.999999999 => 1 Math.ceil은 소수점을 올리는 것(올림) 1.0100111111111 =>2 Math.round는 소수점을 반올림하는 것이다. 1.499999 까지는 1로 1.5부터는 2로 const quotes로 배열을 선언한다. const quotes= [ { quote:~~~~, author:~~~ },... ]; const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); const todaysQuote = quotes[Math.floor(Math.random(..

파일을 이렇게 나누어 주었다. 파일의 경로가 바뀐 만큼 HTML에서 경로를 다시 설정해줘야 했는데 설정을 하지 않아 처음에 오류가 났었다. 이렇게./를 눌러 파일의 경로를 찾아보고 직접 눌러주면 파일 경로 설정이 완료된다. const clock = document.querySelector("h2#clock"); // const clock = document.getElementById("clock"); 과 같은 표현 function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); setInterval(함수명, 몇 초 주기로 반복) 5000ms==5초 주기 setInterval(getClock, 1000); 1초 주기로 getClock 함..

lcoalStorage 브라우저에 무언가를 저장한 후 나중에 가져 올 수 있다. lcoalStorage.setItem("username", "qweqwe"); lcoalStorage.getItem("username") 저장한 것을 불러온다. lcoalStorage.removeItem("username") username에 저장된 것을 삭제한다.

querySelector로 id태그를 쓸 때는 #를 써야 한다 하지만 getElementById로 id태그를 쓸 땐 #를 안 써도 된다 예를 들어보면 HTML에 로 코딩을 하고 const loginForm =document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); const loginInput =document.querySelector("#login-form input"); const loginButton =document.querySelector("#login-form button"); 이 둘은 같은..