조건문과 반복문 Javascript는 Programming 언어 이다. html(마크업 언어), css ( 스타일시트 언어) 와 다르게 명령어를 '시간의 순서와 조건에 따라' 수행하게 만들 수 있다. 즉, 조건문과 반복문을 사용하여 프로그램의 흐름을 제어할 수 있다. 제어문은 프로그래밍 언어에서 공통적으로 사용되는 개념이므로 다른 프로그래밍 언어에 대한 이해가 있다면 이부분은 쉽게 사용할 수 있다. 특히 C언어의 제어문을 안다면 문법도 거의 동일하다. 조건문 if (document.querySelector('#nightbutton').value==='NightMode') { document.querySelector('body').style.backgroundColor='black'; document.qu..

원문 : https://dev.to/davidkwan95/why-learning-programming-is-hard-5fd6 Why Learning Programming is Hard and Tips for Learning it Better dev.to 프로그래밍을 배우는게 어렵지 않다는 사람들도 있는데 그 이유도 알것 같다. 천재이거나 원래 분석적인 사람일수도 있고, 그냥 개구리 올챙이적 생각 못하는 것일수도 있다. 또 하나의 가능성은 아직 그 지점에 도달하지 못했을 수도 있다. (어렵다고 느끼는 구간!) 프로그래밍의 학습곡선은 linear 하지 않은 것 같다. 어떤 수준에 도달하면 , 벽에 마주치게 되고 더이상 발전할 수 없을 것 같고, 어떻게 발전해야될지도 모르겠을 것이다. 게임에 빗대서 말하면 계..

Html은 정적인 page를 만드는 언어. Css 는 페이지의 style 속성으로 디자인적 요소를 넣어주는 언어 Javascript로 Html을 제어하여 페이지를 Dynamic하게 만들 수 있는 Programming 언어 따라서 사용자와 상호작용하는 페이지를 만들 수 있다. HTML과 Javascipt의 만남 - 1+1 html은 정적이기 때문에 "1+1" 이라는 문자가 그대로 나오지만 javascript는 1+1을 계산해서 2로 출력된다. - event 어떤 "event" 가 일어났을 때 어떤 자바스크립트가 실행되도록 한다. 대표할만한 event 들이 html 속성으로 정의되어있다. Console을 통해 javascript 실행해보기 Script를 작성하지 않고도 개발자도구의 Console에 Javas..

웹을 구성하는 4가지 중요한 요소들 HTML : 웹페이지를 만드는 언어 URL : 주소체계 Web browser/ Web server : 웹페이지를 주고받는 sw HTTP : Web browser와 Web server가 통신할 때 사용하는 규칙 HTTP : HyperText Transfer Protocol서버와 클라이언트는 어떻게 데이터를 교환할까? 클라이언트의 요청(request)과 서버의 응답(respond) 개발자도구 - Network 에서 브라우저가 어떤 통신을 하고있는지 모니터링 할 수 있음. GeneralHeader ㅣ통신에 필요한 전반적인 내용 RequestHeader | fetch할 내용(가상호스트, 포트..), client측에 대한 내용(브라우저 , 운영체제 ,사용 가능한 encoding..

Grid 그리드: 수평선과 수직선이 교차해서 이루어진 집합체 열과 행으로 된 라인을 따라 생성된 grid 에 각 element들을 배치할 수 있다. - 각 트랙의 크기를 px을 지정해서 고정히킬수도 있고 %,fr등 가변크기로 유연하게 할 수 있다. - 아이템을 정확한 위치에 지정하여 배치할 수 있다. - 행열을 추가/ 정렬 - 겹치는 콘텐츠 제어 Grid 트랙/라인/셀/영역 Grid 트랙 : 그리드는 기본적으로 트랙으로 정의 된다. 그리드 트랙은 그리드에 그려진 두 라인 사이의 공간을 나타낸다. grid-template-columns: repeat(3, 1fr); -> 3개의 열방향 트랙이 그려진다. One Two Three Four Five .wrapper{ display:grid; grid-templ..

CSS Cascading Style Sheets css의 구조 selector{ property : value; //Declaration } selector 우선순위 설정 #id 1 페이지에서 1회 .class 2 다회 element 3 모든 tag 기본 html tag를 사용하거나, class나 ID를 추가해서 HTML에 design 요소를 넣을 수 있다. CSS를 적용하는 3가지 방법 - external stylesheet : 가장 일반적인 방법 / html 에 link를 통해 css 파일을 추가한다. - internal stylesheet : html 안에 tag 내부에 기술 - inline : html tag에 기술 (하지 말것) Box Model layout을 잘 구성하기 위해서는 Box mod..