전체 글

HTML, CSS (feat.JavaScript) 에 대해서 간단하게 알아보자.

웹사이트는 브라우저가 text파일을 이해하여 구현해 준다. 그래서 코드로 감싸진 text들로 이뤄져 있다. HTML은 Markup launguage, / 브라우저에게 웹사이트에 어떤 contents가 있는지를 알려주는 역할이자 뼈대. CSS는 Design, Style launguage, / 브라우저에게 contents이 어떻게 보여야하는지를 알려주는 역할이자 근육. Javascript만 Programming language, / 웹사이트를 동적으로(interactively) 만들어주는 역할이자 뇌. CSS 만으로 웹사이트 NO! HTML만으로 웹사이트 Sososo.... HTML과 CSS는 together! JavaScript는 sometimes use. #contents : text, image, ti..

Git, GitHub 총정리

git의 필요성 - 코드가 긴 경우에는 파일의 히스토리를 알고 있어야 한다. 처음에 뭘 작성했는지, 나중에 뭘 추가했는지, 변경 내역 등을 알고 있어야 하는데 이럴 때 git을 사용하면 것이 도움이 된다. - 내가 원하는 파일의 변경된 내용을 확인 할 수 있다. - git은 programming에서 주로 사용되는 도구다. - text 파일에서만 사용 할 수 있는 것이 아니라, excel, image, song 등등 다른 파일 형식에도 사용 할 수 있다.(git 시스템은 파일을 binary format(0101010 같은 것)으로 인식하기 때문) - git은 어떤 파일이든 수정된 내역을 알 수 있다. - code에 주로 사용되는 도구이지만, 다른 형식의 파일도 변경 내역을 추적하는데 사용할 수 있다. ⇒ ..

Weather날씨 만들기

navigator.geolocation.getCurrentPosition(success, error) Step 1. 사용자의 위치를 알아본다. (현재 위치의 위도와 경도) function onGeoOk(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."); } // 사용자의 현재 위치를 요청한다. navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); function onGeoOk(position) { const lat = position.coords.latitude; const lon = position.coor..

To Do List 만들기

기본 세팅 const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector(" #todo-form input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event.preventDefault(); // input의 현재 value를 새로운 변수에 복사하는 것. const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit", handleToDoSubmit); ToDo 추가하기 co..

Quotes and Background 명언 만들기

Quotes 기본 세팅 // 10개의 명언들을 object안에 10개의 array들이 ,으로 연결되어있ㄷ. const quotes = [ { quote: "Be the change that you wish to see in the world.", author: "Mahatma Gandhi", }, { quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde", }, { quote: "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me..

Clock만들기

기본 세팅 00:00 const clock = document.querySelector("h2#clock"); Intervals interval : "매번" 일어나야 하는 무언가를 말한다. setInterval(실행하고자 하는 function, 호출되는 function간격 {ms}) ex. setInterval(sayHello, 5000) - 매 5초마다 실행하는 것! function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); Timeouts and Dates Timeout 도 마찬가지이다. function sayHello() { console.log("hello"); } setTimeout(sayHello, 5000); Date..

Login만들기

Input values Log In // 방법 1. //form형태를 가져오고 싶은 코드 const loginForm = document.getElementById("login-form"); //input의 value값을 가져오고 싶은 코드 const loginInput = loginForm.querySelector("input"); //button형태를 가져오고 싶은 코드 const loginButton = loginForm.querySelector("button"); // 방법 2. document 또는 하나의 element를 통해서 const loginInput = document.querySelector("#login-form input"); const loginButton = document.q..

JavaScript - 브라우저(Document, Elements, Events)

Document - Object HTML이 CSS와 JS를 가져온다는 건 국룰~ HTML의 Element들을 JS로 변경하거나 가지고 올 수 있다. (HTML과 상호작용) 마치 object내부에 있는 property들의 값들을 변경할 수 있다. Console창에서 HTML코드를 JS관점에서 불러올 수도 있고, 수정도 가능 ex. document.title = "Hi" 라고 하면, 웹페이지 제목이 Hi로 변경됨. 여기서 document 는 웹페이지를 말하는 것. 그리고 Javascript의 시작점이라 말할 수 있다. ※ console.log(document) Vs console.dir(document)의 차이 console.log(document) -> 태그내용이 나온다. 우리가 보는 HTML의 구조 co..