출처 : https://youtu.be/5ETqQWvwXV4 참고 자료 : https://unikys.tistory.com/371 [Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system) * 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로 unikys.tistory.com 무료 템플릿 자료 : https://tonhnegod.tistory.com/102 무료 반응형웹 템플릿 사이트 모음 이번 포스팅에서는 무료 반응형웹 템플릿 사이트들을 소개해 드리겠습니다. 직접 사이트들을 찾아보니, 트렌드에 심하게 뒤처지는 것들만 ..

출처 : https://nomadcoders.co/ Setup 핵심 : To do list를 위해 기본 환경을 세팅한다. 0. todo.js를 만들어주고, html에 import해준다. 1. 사용자가 todo를 입력하는 것을 입력받을 form이 필요하다. 2. todo-list라는 id를 가진 ul을 만들어준다. 3. form과 ul을 HTML에서 JS로 가져온다. const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); 4. greeting의 form에서 했던 것을 똑같이 반복해줌 (submit시 브라우저의 기본 동작인 새로고침이 되는 issue) function ..

출처 : https://nomadcoders.co/ Quotes 핵심 : Random 배경화면과 Random 명언을 화면에 표시하는 법을 배운다. 0. quotes.js를 만들어주고 HTML과 연결을 시켜준다. . Random 명언을 화면에 표시하기 1. frontend에서 HTML을 생성한다. 2. quotes.js에서 div랑 span들을 가져온다. // HTML의 quote 아이디를 가진 span의 첫번째와 마지막 자식을 호출 const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); 2-1. array에 element들을 입력..

https://youtu.be/jWh3IbgMUPI . 웹사이트를 만들때 가장 중요한 것은? 우리가 만든 박스들을 원하는 위치와 사이즈로 배치하는 것이 가장 중요함 배치 할 수 있도록 만드는게 display와 position임 . display div는 대표적인 Block-level, span은 대표적인 inline-level임 block은 한 줄에 하나씩 들어가는 상자 inline이라는 것은 컨텐츠의 크기만을 기준으로 꾸며주는 것 inline-block은 block같이 상자의 크기로 변환되어서 안의 컨텐츠의 크기와는 상관없이 표시 됌, 한 줄에 여러개 가능 Block-level은 기본적으로 한 줄에 하나씩 출력 inline-level은 기본적으로 공간이 많으면 여러개 출력 가능함 . Position p..

출처 : https://nomadcoders.co/ Intervals 핵심 : intervals과 timeout 기능에 대해 알아본다. . 한 파일에 모든 코드들을 넣는게 아닌 Devide and Conquer 방식으로 예를 들어 clcok.js 에서는 시계 기능만, greetings.js 기능에서는 greeting 기능만 다룸. 이렇게 세분화하여 파일을 관리하면, 코드도 짧아지고, 정리도 쉬워짐. . intervals이란? intervals은 "매번" 일어나야 하는 무언가를 뜻한다. ex) "매 2초"는 interval이다. 즉 매 2초마다 무슨 일이 일어나게 하는 것이 interval이다. ex) 2초마다 주식 시장 확인하는 기능etc... JS에서는 intervals이 이미 저장되어있다. /* se..

출처 : https://nomadcoders.co/ Input Values 핵심 : user에게 질문을 하고, 어떻게 정보들을 받을지에 대해 배운다. . HTML에서 모든 것이 시작 되어야 한다. ( element들을 JS로 가져오기 위해서 ) 1. HTML에서 input과 button을 생성하고, div id로 묶어준다. ( 이 때 id는 중복되면 안된다! ) Log In 2. JS에서 HTML element( id = "login-form) 불러오기 // querySelector는 id를 찾는지, class를 찾는지 분명히 해줘야 함 ex) id는 앞에 #붙임. const loginForm = document.querySelector("#login-form"); // id나 클래스를 변수에 연결했으면..