📚 Study

[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1

자바스크립트로 웹 페이지 좀 더 자유롭게 다루려면 DOM에 대한 이해가 필요하다. 문서 객체 모델 (DOM) 문서 객체 모델(Document Object Model, DOM)은 말 그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다. 그래서 간단하게 생각하면 웹 페이지를 document라고 부르고, document를 자유롭게 다루기 위해서 객체화 하고자 구현된 개념이 결국이 DOM이라고 생각할 수 있겠다. 그리고 HTML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다. 아무튼, 결국 DOM은 웹 페이지를 객체화 한 개념이고, 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다. document 객체는..

[HTML] [드림코딩by엘리] HTML의 핵심은 박스 모델이다.

Front를 구성할 때 제일 기초는 박스모델로 전반적인 구조를 잡는다 (Wireframe) 그다음에는 태그들을 달아준다 (이 박스는 어떻게 구상할 것인지) 1. heder섹션, player섹션, info섹션, Upnext 섹션 크게 4개로 나누어진다. icon은 site :https://fontawesome.com/start CSS 디자인은 Material Design Guidelines를 따른다고한다. 2. CSS 연결 css class설정할때는 작게작게 설정 CSS도 박스모델 처럼 위에서붙어 밑으로 꾸며준다.

Font Awesome 사용해서 아이콘 넣는 방법

FontAwesome(폰트어썸)이란? 폰트어썸(Font Awesome)은 웹상에 많이 사용하는 아이콘을 벡터 형태로 제공해주는 서비스이다. 무료버전, 유료버전이 있는데 무료버전에서 제공하는 아이콘만해도 1609가지라 활용도가 높아서 홈페이지에서 많이 사용하고있다. 홈페이지를 만들 때 아이콘을 하나하나 만들지 않고, 코드를 가져다 쓰면 바로 사용할 수 있어서 아주 편리하다. 폰트 어썸에서 제공하는 무료 아이콘 Font Awesome 사용방법 1. 가입후 키트 코드 복사하기 1. https://fontawesome.com/에 접속해서 회원가입 후 로그인한다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrad..

[니코]# 8 WEATHER

8.0 Geolocation navigator.geolocation.getCurrentPosition() 이걸 부르면 브라우저에서 위치 좌표를 줄거다. WIFI, 위치, GPS JavaScript가 더많은 정보들을 줄거다 JS가 user의 위치를 전달해 줄거다. 코드 10줄로 user의 위치를 알 수 있음 8.1 Weather API 기본적으로 API는 다른 서버와 이야기할 수 있는 방법이다. 이 URL에서 정보를 응답할 거다. URL에서 가져오는 방법을 알아 볼거다. fetch를 사용해서 URL을 얻을 거다. 실제로 URL에 갈 필요 없이 JavaScript가 대신 URL 을 부를 거다. weather 전체 코드

[니코] # 7 TO DO LIST

7.0 Set up 7.1 Adding ToDos li.appendChild를 해서 li안에 span을 만듬 toDoList에 li요소를 추가함 greetings 섹션과 비슷한 걸 한거임 class에 뭐 추가하는 그런 기능들 7.2 Deleting To Dos button이 click event를 기다리고 있어야 한다. button이 클릭 된걸 인지는 하는데 어떤 li를 제거해야 되는 지를 알지 못한다. mouse클릭 좌표로 하기엔 너무 길다 path 를 이용 li를 찾는다 parentNode, parentElement를 tartget은 클릭된 HTML element 이다. 모든 HTML element에는 하나 이상의 property가 있다. parentElement는 클릭된 element의 부모이다. ..

[니코]#6 QUOTES AND BACKGROUND(명언 가져오기)

6.0 Quotes 작가는 밑에, 명언은 위에 Math.floor random 밑에quote가 아닌 author임 6.1 Background createElement 요소를 JS 로 HTML에 요소를 만든가.

[니코] #5 clock

시계 만들기 5.0 Intervals Interval은 ‘매번’일어나야 하는 무언가를 말한다. 하고싶은 거는 이 함수를 매 2초마다 실행하는 것이다. Javascript는 이미 그 개념을 내장하고 있다. 이런 기능을 제공하는 tool이 바로 setInterval()이다. setInterval은 두 개의 argument를 받는다. 첫번째 argument는 네가 실행하고자 하는 function이다 두번째 argument는 호출되는 function간격을 몇 ms(mileseconds) 로 할지 쓴다. setInterval(syhello, 5000) 매 5000ms 마다 호출 즉 5초마다 호출한다. function을 몇초마다 실행하는 방법 (Interval) 5.1 Timeouts and Dates setTim..

[니코] #4 로그인

4.0 Input Values 더 짧게 코딩한거 3줄 →2줄 첫 번째로 HTML에서 form을 찾고 있다. document.getElementById를 통해서 JS가 이걸 찾았다면 loginForm은 HTML 내에 있는 element라는 뜻이다. → 이 element를 JS로 끌고 왔다. 4.1 Form Submission HTML자체적으로 maxlength조절할 수 있어서 js에서는 안해두된다 html에서 할수 있는 거는 html로 div로 받으면 새로 고침해도 똑같이 유지가 되나 div 대신 form으로 받으면 자동으로 새로고침 되어 없어진다 form은 새로 고침되는 이유는form이 submit되고 있기 때문이다. 이 순간에 우리는 브라우저가 새로고침하지 않고 user 정보를 저장하도록 하고 싶은거다..

[니코] #3 JAVASCRIPT ON THE BROWSER

javascript가 어떻게 HTML과 상호작용하는지를 배우게 된다 3.0 The Document Object HTML은 접착제 같은거다. JavaScript를 사용하는 이유는, HTML과 상호작용하기 위해서 즉 HTML의 Element들을 JavaScript를 통해 변경하고 읽을 수 있기 때문이다. document는 브라우저에 이미 존재하는 object이다. HTML 코드를 JavaScript관점을 통해서 보고 있다. document의 object의 property들을 알아보는 것도 좋을 것 같다. 존나 쉽다 JavsScipt는 이미 HTML과 이미 연결되어있다. console.dir(document) -> object의 모든 property들을 볼 수 있다. JavaScript로 HTML을 변경한다...

[니코]#2 WELCOME TO JAVASCRIPT

javascript 2.1 두가지 데이터 타입 값 2+2 문자열 “hi”+”hello” 2.2 변수 게으르게 코딩 하게 만들기 위해서 변수를 사용한다 console.log(5+2) console.log(a+b) 출력 const a = 5 ; (변수 선언) 바뀌지않음 python 변수 선언 방식 very_Long js veryLongVariable 이런식 2.3 const and let 자바스크립트에서 변수 선언하는 방식은 두가지가 있다. const는 constant(상수)라는 것이고 constant는 값이 바뀔 수 없다. let은 선언하고 밑에가서 다시 선언하면서 값이 바뀔 수 있음 ex> let myName = “gigi” (letx)가능 myName = “ncicj” 바뀔 수 있다. 기본적으로 con..