우디킴의 개발 기록

- javascript 는 클라이언트 컴퓨터의 브라우저(Browser) 에서 작동된다.

- javascript 에서 변수의 선언은 var 키워드를 사용한다. *var 보다 const 사용해야한다. 더 알아보자.

- javascript 에서 함수의 선언은 function 키워드를 사용한다.

- javascript 는 자료형간의 형변환이 자유롭다.

- 특정함수를 특정시간마다 계속 호출하는 함수는 setInterval() 이다.

- 특정함수를 특정시간후에 한번 호출하는 함수는 setTiteout() 이다.

- setInterval() 함수를 멈추기 위해서 사용하는 함수는 clearInterval() 이다.

- 난수의 발생을 위해서 Math.random() 함수를 사용한다.

- 날짜 및 시간을 이용하기 위해서 Date 객체를 사용한다. *Javascript 의 내장객체중 하나

- 브라우저 자체를 의미하는 객체는 window 이다.

- HTML 문서 자체를 의미하는 객체는 document 이다.

- 주소창을 의미하는 객체는 location 이다.

- window, document, loaction 등의 객체를 브라우저가 가진 객체라고 하여 BOM(Browser Object Model) 이라고 한다.

- <h1> <div> <input> 등 HTML 에 있는 요소들을 트리구조로 인식하는 방법을 문서객체모델 DOM(Document Object Model) 이라고 한다.

* BOM 과 DOM 에 대해서 더 알아보자.

- Javascript 를 편리하게 사용하기 위해서 jQuery 라이브러리를 이용한다.

- 날짜 및 시간을 편리하게 사용하기 위해서 moment 라이브러리를 이용한다.

- Javascript 에서 템플릿을 편하게 사용하기 위해서 underscore 라이브러리를 이용한다.

- jQuery 는 DOM 선택이 쉽고 요소들의 내용(css, 글자)의 변경이 쉽다.

- jQuery 는 이펙트, 애니메이션이 쉽다,

- jQuery 는 ajax가 편리하고 쉽다.

- jQuery 는 이벤트처리가 쉽다.

- jQuery()  함수는 $() 로 축약하여 사용한다.

- $(선택자) 로 jquery 요소객체를 얻어올 수 있다.

- 이벤트리스너를 등록하는 메서드는 on이다. *인자 3개짜리 중요하다.

- 이벤트리스너를 제거하는 메서드는 off이다.

- click 메서드를 이용하면 편리하게 'click' 이벤트를 처리할 수 있다.

- this는 Javascript 객체이다.

- 자바스크립트 객체를 jquery 객체로 변경하려면 $(자바스크립트객체)이다.

- 요소의 css를 변경하거나 얻어오기 위해서 css() 메서드를 이용한다.

- 요소의 글자를 변경하거나 얻어오기 위해서 text() 메서드를 이용한다.

- input, select, textarea 에서 내용을 변경하거나 얻어오기 위해서는 val() 를 이용한다.

- 해당요소가 부모로부터 몇번째 요소인지 얻어오는 메서드는 index() 이다.

- 배열이나 여러 jquery 요소객체의 각번지에 접근하기 위해서 사용하는 메서드는 each() 이다.

- 요소의 속성을 얻어오거나 변경하기 위해서 사용하는 메서드는 attr() 이다.

- 요소의 클래스를 추가하는 메서드는 addClass() 이다.

- 요소의 클래스를 제거하는 메서드는 removeClass() 이다.

- 요소가 특정클래스를 가지고 있는지 확인하는 메서드는ㅇ hasClass() 이다.

- display:none 을 쉽게하는 메서드는 hide() 이다.

- display:block 을 쉽게하는 메서드는 show() 이다.

- 요소의 앞요소를 선택하는 메서드는 prev() 이다.

- 요소의 뒷요소를 선택하는 메서드는 next() 이다.

- 부모를 선택하는 메서드는 parent() 이다.

- 조상요소들을 선택하는 메서드는 parents() 이다.

- 자식요소들을 선택하는 메서드는 children() 이다.

- 랩퍼(wrapper) 객체들 중에 특정 index 를 선택하는 메서드는 eq() 이다.

- 자식요소들 중에 특정요소를 찾아내는 메서드는 find() 이다.

- $("h2) / $("<h2>") 둘의 차이점을 설명하세요

- => $("h2") 는 기존에 존재하는 요소를 선택하는것, $("<h2>") 는 h2 라는 요소를 생성하는 차이가 있다.

- 부모.append(자식) <-- 부모의 마지막 자식으로 삽입하는 메서드이다.

- 자식.appendTo(부모) <-- 부모의 마지막 자식으로 삽입하는 메서드이다.

- 부모.prepend(자식) <-- 부모의 첫번째 자식으로 삽입하는 메서드이다.

- 자식.prependTo(부모) <-- 부모의 첫번째 자식으로 삽입하는 메서드이다.

- 자식요소들 전부를 지우는 메서드는 empty() 이다.

- 특정요소 한 개를 지우는 메서드는 remove() 이다.

- ajax 를 사용하려면 $.ajax({}) 이다.

- WWW(World Wide Web) 에서 웹페이지를 만들기 위한 언어는 HTML 이다.

- 프로토콜은 HTTP 프로토콜이다.

- HTTP프로토콜은 요청 / 응답 프로토콜이다.

- 웹표준이란 구조 / 표현 몇 동작 / 동작 및 제어의 분리다.

- 웹표준에서 구조는 HTML 이 담당하고, 표현  및 동작은 CSS 가 동작 및 제어는 Javascript 가 담당한다.

- 웹표준은 표준에 맞는 요소와 속성을 사용하고 의미에 맞게 마크업해야 한다.

- <h1>, <div>, <span> 이런 것들을 요소라고 한다. 영어로는 element

- <img src="">, <div id=""> 에서 src, id 등은 속성이고 영어로는 attribute

- 제목을 의미하는 요소는 <h1>~<h6> 다.

- 문단을 의미하는 요소는 <p> 이다.

- 순서가 있는 리스트는 <ol> 이다.

- 순서가 없는 리스트는 <ul> 이다.

- 제목과 내용으로 구성된 정의리스트는 <dl> 이다.

- 이미지를 의미하는 요소는 <img> 이다.

- 하이퍼링크는 <a> 이다.

- <ol>, <ul> 의 자식요소는 반드시 <li> 이다.

- <dl> 의 자식요소는 제목을 의미하는 <dt> 와 내용을 의미하는 <dd> 이다.

- <img> 요소는 반드시 src 속성과 alt 속성을 가져야 한다.

- <a> 요소는 반드시 href 속성을 가져야 작동한다.

- 표를 HTML 에서 표현하기 이해서는 <table> 요소를 이용한다.

- table 요소는 구조상 머리부분을 <thead> 요소가, 내용 부분을 <tbody> 요소가, 하단 부분을 <tfoot> 요소가 담당.

- table 에서 한 줄(row)를 의 <tr> 이다.

- table 에서 하나의 데이터 셀을 의미하는 요소는 <td> 이다.

- table 에서 하나의 제목 셀을 의미하는 요소는 <th> 이다.

- 유저가 로그인을 하거나 글을 쓸때 유저가 입력한 정보가 서버(의 특정주소로)로 넘어가야 한다. 바로 이런 데이터를 파라미터(Parameter) 라고 한다.

- 파라미는 이름(Name)과 값(Value) 으로 구성되어 있다.

- 폼안의 input, select, textarea 는 반드시 name 속성을 가지고 있어야 파라미터가 제대로 넘어간다.

- 서버로 넘길 방식은 get 방식과 psot 방식이 있다. (그 외에도 RESTFUL 을 이용하려면 put, delete 도 있다.)

- get 방식은 파라미터가 주소창에 "?id=test&pwd=1234"와 같이 서버로 넘어간다. 이런 문자열을 쿼리스트링(Query String) 이라고 한다.

- post 방식은 HTTP 프로토콜의 body 에 파라미터가 넘어가는 방식으로 주소창에 노출되지 않는다. 또 용량제한이 없어서 글쓰기, 로그인, 회원가입, 파일업로드에 사용된다.

- 유저가 입력한 여러 데이터를 한번에 함께 서버로 넘길때 필요한 요소는 <form> 이다.

- <form> 요소에 입력된 데이터들을 넘길 주소를 작성하려면 action 속성에 작성한다. 또 넘길 방식을 작성하려면 method 속성에 쓴다.

- <form> 요소에는 입력필드를 묶어주는 <fieldset> 요소와 그의 제목을 의미하는 <legend> 요소도 같이 마크업하는 경우가 많다.

- 한 줄 글자 입력필드는 <input> 요소다.

- 선택하는 요소는 <select> 요소다.

- 여러줄의 글을 입력하는 요소는 <textarea> 이다.

- 중복체크가 불가능한 요소는 input type="radio" 이다. 그리고 input 요소의 제목을 의미하는 요소는 label 이다.

- 중복체크가 가능한 요소는 input type="checkbox" 이다.

- 파일을 선택하는 요소는 input type="file" 이다.

- 버튼 요소는 <button> 이다.

- <button> 요소의 type 은 button / sumbit / reset 이 있다.

- 요소는 block-level 과 inline-level 요소로 나뉜다.

- block-level 요소는 컨테이너다. 레이아웃을 담당한다.

- inline-level 요소는 컨텐츠(글자) 다.

- CSS 는 다양한 선택자를 가진다. h1, span 등은 요소선택자다.

- #id, #wrap 등은 id선택자다.

- .box, .shadow, .list_movie 등은 class선택자다.

- '>' 는 자식선택자이다. ' '(한 칸 띄우기) 는 자손선택자다.

- ':' 는 가상클래스선택자다. '::' 는 가상요소선택자다.

- 블록레벨요소는 width 와 height 값을 지정하여 크기를 줄 수 있다.

- 인라인레벨요소는 크기를 지정할 수 없다. 다만 인라인레벨 요소중 대체되는 요소들은 크기를 지정할 수 있다.

  *대체된 요소에 대해서 알아보자. img, object, video, button, input, textarea, select

- 강조를 나타내는 요소들은 <em> 과 <strong> 이 있다.

- 글자의 색상을 지정하는 css 속성은 color 속성이다.

- 뒷배경색상을 지정하는 속성은 background-color 속성이다.

- 글자의 크기를 지정할때는 font-size 속성을 작성한다.

- 한 페이지의 내부링크를 만들때는 <a> 요소의 href 속성에 id 를 작성한다.(#을 포함해서)

- 블록레벨의 가장 대표적인 요소로 구역을 의미하는 요소는 <div>다.

- 인라인레벨의 대표적인 요소로 특별히 의미가 없지만 많이 사용되는 요소는 <span> 요소다.

- 아이디(id)는 한 페이지에 똑같은 이름으로 두 개 이상 쓸 수 없다. 즉 고유한 이름이어야 한다.*매우 중요

- 클래스(class)는 한 페이지에 여러개 있어도 되고, 한 요소에 여러개를 지정할 수도 있다.

예) <button class='btn delete'></button>

- 외부 css 를 HTML 에 적용하기 위해서는 <link>요소를 연결한다.

- font-awesome 은 아이콘을 웹폰트로 이용하는 라이브러리다.

- 웹폰트는 서버에서 다운로드 받는 폰트이다. 즉 웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법이다.

- :hover 는 해당 요소에 마우스를 hover 했을때 적용된다.

- 뒷배경색을 적용하는 속성은 background-color 이다.

- 뒷배경이미지를 적용하는 속성은 background-image 이다.

- 뒷배경이미지의 반복을 적용하는 속성은 background-reapeat 이다.

- 뒷배경이미지의 위치를 지정하는 속성은 background-position 이다.

- 글자들이 부모를 기준으로 가운데 정렬 되게 하려면 text-align 속성의 값을 center 로 지정한다.

- 블록레벨안에 글자가 한 줄이 있고, 그 글자들을 수직으로 정렬 하기 위해서는 블록레벨의 height 속성의 값과

line-height 속성의 값을 같게 써주면 된다.

- 부모로부터 벗어난 자식들을 처리하는 속성은 overflow 이다.

- 부모에서 벗어난 자식들을 숨기려면 속성값에 hidden 을 준다.

- 파비콘 설정은 <link> 요소를 이용한다.

- 글자 들여쓰기는 text-indent 속성이다,

- 마우스 커서의 모양을 지정하는 속성은 cursor 이다.

- css 의 변화값을 부드럽게 처리하기 위해서 transition 속성을 적용한다.

- 투명한 뒷배경색을 적용하기 위해서는 rgba() 속성값을 이용한다.

- 요소 전체가 (반) 투명하기 위해서는 opacity 속성을 이용한다.

- 요소에 그림자를 적용하기 위해서 box-shadow 속성을 이용한다.

- 글자에 그림자를 적용하기 위해서는 text-shadow 속성을 이용한다.

- 클릭했을때 적용하는 가상클래스는 active 이다.

- input 등 포커스가 맞을때의 가상클래스는 focus이다

- 박스의 끝을 둥글게 처리하기 위해서 border-radius 속성을 사용한다.

- transform 속성의 값에는 translate / scale / rotate 등이 있다.

- css의 애니메이션을 만들려면 @keyframes 과 animation 속성을 이용한다.