1cm

UI vs API UI (User Interface) ->사용자가 시스템을 제어하기 위해서 사용하는 조작장치 API (Application Programming Interface) -> 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치 경고창은 우리가 만든 것이기도, 만들지 않은 것이기도 하다. why? 경고창이 실행되는 타이밍이나 경고창에 표시되는 text는 우리의 의도가 반영된것이기 때문에 우리가 만들었다고 할 수 있음. 한 줄짜리 코드안에는 기능, 모양 등이 설명되어 있지않음. -> 웹브라우저를 만드는 사람들이 대신 만들어줌 -> alert라는 함수를 사용하면 경고창을 띄워주겠다는 약속을 한 것임. API는 순서와 단어와 문법처럼, 부품과 부품의 결합방법처럼 뗄레야 뗄 수 없는 관계..

객체(object) 예고 코드가 많아지면 정리정돈 하기 위한 도구 -> 함수 복잡도의 한계에서 서로 연관된 함수와 서로 연관된 변수를 같은이름으로 그룹핑 하는 도구 -> 객체 서로 연관된 함수와 변수들을 그룹핑해서 정리정돈하기 위한 수납상자 - 객체 (폴더라는 관점으로 봐도 된다.) -> body.setBackgroundColor ~ 등으로 만들어주는 걸 보면 body라는 객체가 생기는 것을 확인할 수 있다. => body(객체).setColor(객체에 속해있는 함수)('color_name'); 객체에 속해있는 함수 -> 매소드(method) * alist[i].style.color = color; -> ='color';로 적혀있을 시 실행이 안되는 것을 볼 수 있었다. -> 따옴표 확인하기. 객체 쓰기..

함수 (Function) 함수의 기본 문법 function 뒤에 함수 이름을 붙여준다-> ex) two(){ 함수 내용 } 컴퓨터는 two라는 함수를 만들려고 하고(function), {}안의 내용은 two함수의 내용이구나-. 하고 기억한 뒤, 그 아래 어디든 two(); 라는 함수를 붙여주면 {}안에 있는 함수를 실행시키고자 하는구나-. 하고 실행시킨다. 함수 : 매개변수와 인자 프로그래밍 상에서의 함수 입력(Parameter, 매개변수 / Argument 인자) - 출력 (Return) 2가 해당되는 자리(left), 3이 해당되는 자리 (right) ->매개하는 변수 (parameter) -> 이제 left = 2, right=3으로 약속한다. 2,3이라는 값 -> 인자 = Argument 그 값(..

리팩토링 중복의 제거 리팩토링 : 코딩을 하고 나면 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수에 편리하도록 개선하는 작업. documnet.querySelector('#night_day') 를 -> this 로 바꿔줌으로써 훨씬 간결하고 깔끔한 태그로 정리 되었다. document.querySelector('body') -> var target = document.querySelector('body') 코드를 추가해준 뒤, 기존 자리에 target으로 넣어주면 훨씬 간결해진 것을 확인할 수 있다. -> 코드의 양이 줄었고, target으로 되어있는 부분은 'body' 부분만 바뀌는 경우, target이 전부 바뀔 수 있다. 배열 :Array 배열은 대괄호부터 시작해서 대괄호로 끝난다 ..

조건문 예고 : (if) 하나의 프로그램이 하나의 흐름으로 가는 것이아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것. 비교 연산자와 블리언 Comparison operators & Boolean === -> 동등 비교 연산자 / 이항 연산자(좌항 우항을 결합해서 어떠한 데이터를 만든다.) 왼쪽의 값과 오른쪽 값이 같냐 묻는 연산자 -> 참이면 true, 거짓이면 false -> 두 가지를 묶어서 Boolean이라고 부름. 숫자 (Number) - 多 (무한) 문자열 (String) - 多 (무한) 불리언 (Boolean) - true / false 비교 연산자 ampersand less than -> (>, 보다 큰) 수업은 를 ..

JavaScript : 사용자와 상호작용하여 반응하는 동적인 언어다. onclick = "" -> 자바스크립트 코드를 onclick했을 때 ""안에 있는 내용들을 작동시키게 한다. JavaScript : HTML위에서 동작하는 언어. : 스크립트 내에 있는 코드를 자바스크립트로 해석한다. 자바스크립트 : 계산기 기능처럼 동적으로 효과를 냄. HTML : 문자 그대로 출력 document.write(); -> 웹페이지 상에서 글자를 출력하기 위해서 쓰는 태그이고, 태그를 통해 감싸주면 자바스크립트 코드라고 알려줄 수 있다. 이벤트 onclick="" -> onclick속성의 속성 값은 반드시 자바스크립트가 와야 한다. -> onclick 속성 값은 웹 브라우저가 기억하고 있다가 onclick 속성이 위치하..

미디어 쿼리 소개 반응형 디자인 : 화면의 크기에 따라서 웹페이지의 각 요소들이 반응하여 동작하는 것. screen width가 800px보다 작으면 div의 display를 none으로 하고 싶다.(예시) -> 바꿔 말하면 screen width > 800px = @media (min-width: 800px) @media (min-width: 800px) -> 최소너비가 800px이어야 한다. 즉 800px보다 화면이 크다면 { div{display:none;} } 중괄호 안에 있는 코드가 동작하게 한다. ---> 800px이 넘으면 화면상에서 사라지는 것을 확인할 수 있다. : 미디어쿼리를 활용하면 화면 크기, 가로모드 세로모드 등 화면의 특성들에 따라서 조건을 만족할 때만 CSS의 내용이 동작하도록..

박스 모델 수업 최종 목표는 상단 그림처럼 웹페이지 구성하기. 일단 box.html을 통해 box의 개념을 정립한다. border(테두리)-width(두께): border-color: border-style(테두리가 단선,실선,점선 등): (h1)화면 전체를 쓰는 태그: /* block level element*/ (a)자기 자신의 부피만큼의 크기를 갖는 태그: /*inline element*/ -> block lovel,inline 기본값일뿐 언제든 css를 통해 변경할 수 있음 태그들을 안 보이게 하고 싶으면 display:none; 화면상에서 안 보이게 할 수 있음. 중복되어 있는 태그들을 ,(쉼표)와 일렬로 적어서 압축. 5px solid red -> 순서 상관 없이 적어도 된다. 컨텐츠(CSS)..

태그는 잊는다. 태그로 폰트 컬러를 변경할 수 있다. (디자인적 요소) - html코드 태그를 추가하는 것 보다 어렵지만 근본적인 해결책인 CSS. 사이의 content는 무시. : style안에 있는 내용들은 css의 언어에 문법에 맞게 해석해서 처리해야한다.(디자인과 관련된 태그) a { (폰트컬러)color:red; } : 같은 성격의 것을 바꾸는 것.(웹페이지 유지보수를 편리하게 할 수 있으며, 가독성 높아짐.) 코딩을 어떻게 할까?에 초점을 맞추지만, 중복된 코드를 간결하게 맞추는 것이 코딩을 잘 하는 것. HTML에서 정보에 전념하기 위해서 디자인에 대한 기능을 빼온 것이 CSS이므로 HTML은 정보/ CSS는 디자인에 초점 CSS의 기본 문법 웹페이지 안에 CSS를 삽입하는 방법 1. 태그 ..

댓글 추가 disqus 서비스를 통해 댓글 기능을 추가하려고 했으나 로그인에 문제가 있는지 계속 댓글을 달 수가 없다:( 댓글, 구글링을 해봐도 로그인 오류 or 404 페이지가 떠버리니 아쉽게도 이 부분은 그냥 스킵하기로-, 채팅 기능 추가 twak 에서 제공하는 서비스를 활용해 채팅 기능을 추가한다. twak의 ui가 약간 변경되어 하단쪽에 Administration을 클릭해주면 하단의 그림과 같이 뜨는데, Add Property를 클릭해 내 웹페이지를 추가해주면 된다. 사이트 상세 정보에서 Property Name과 위젯 이름은 임의로 작성해도 되는 것 같고, 사이트 URL의 경우 http://127.0.0.1/index.html을 입력해 주었다. 두 번째 페이지로 넘어가게 되면 위젯을 설치할 수 ..