우디킴의 개발 기록

■ 웹표준 기본

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

- 웹표준이란 요소를 의미에 맞게 마크업해야 한다.

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

■ 폼만들기

- 프로토콜은 http 프로토콜

- 방식은 GET / POST 방식(PUT, DELETE 도 있음 : 나중에 REST 할 때 사용)

- 클라이언트에서 서버로 넘어가는 데이터는 파라미터(Parameter)

- 파라미터는 이름(name) 과 값(value) 로 구성

- GET 방식은 주소의 뒷부분에 ?id=test 이렇게 넘어감. 이를 쿼리스트링(QueryString) 이라고 한다.

- POST 방식은 요청프로토콜 body 로 파라미터가 넘어감

* 요청프로토콜 body? => 찾아보자.

- 폼은 <form> 요소

- input , select , textarea 등에 반드시 name 속성을 써줘야 파라미터가 넘어갑니다.

■CSS

- 박스모델이란 width, height, padding, border, margin 을 모두 더한 크기다.

- 요소는 블록레벨(block-level) 과 인라인레벨(inline-level) 이 있다.

- 브라우저가 가진 기본 css 가 있다. ex) ul 이 가진 기본 css 는 margin, border, list-style 등이 있다.

- <a> 요소는 인라인레벨 요소이다. 크기를 지정하기 위해서는 블록레벨로 변경해야 한다.

- 블록레벨을 수평으로 배치ㅣ키기 위해서는 float 속성을 ㅇ지정하거나, 아니면 display 속성은 inline-block 으로 지정하면 된다.

- 포지션속성의 기본값은 static 이다. 이 경우 left, top, bottom, right 를 지정해도 움직이지 않는다. 

- 포지션 속성은 reletive, absolute, fixed 가 있다.

- float 은 공간을 차지하지 않는다. 이에 대한 해결책은

   1. 부모요소에 overflow:hidden 을 준다.

   2. 부모요소에 height 값을 적절하게 지정한다.

   3. float 이 끝나는 마지막 형제요소에 clear:both 속성을 지정한다.

- 마진은 겹침 현상이 있다. 부모와 자식간의 마진 겹침도 있다. 이에 대한 해결책을 막아주거나 (border, padding 아니면 overflow 속성을 지정한다.

■javascript / jquery

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

- javascript 의 대표적인 자료형은 숫자형 , 문자열형 , (ㄴㄹ형) 이 있다.

- 확인 버튼 한 개가 있는 다이얼로그창을 띄우는 함수는 alert 이다.

- 변수를 선언할때는 var 키워드를 쓰고 변수명을 써준다. 

* var 을 쓰는건 좋지 않다고 들었음. =>찾아보자.

- 변수란 값을 저장할 수 있는 공간이다. 영어로는 variable

- 변수는 선언과 대입(처음에 하는것을 초기화)이 중요하다

- 함수는 영어로 function 이다. 함수는 선언 및 호출이 중요하다. 함수는 호출하지 않으면 작동하지 않는다.

- jquery 를 쓸때는 <script> 요소를 이용하고 src 속성세 jquery.js의 파일 경로를 써준다.

- jquery 에서 우선 기억할 것은 달러($) 이다.

- jquery 에서 css 를 변경하기 위해서는 css 메서드를 사용한다.

- jquery 에서 글자를 변경하기 위해서는 text() 메서드를 사용한다.

- 함수안에서 그 요소 자신을 나타내는 키워드는 this 다. 그 this 는 순수 자바스크립트객체다.

- jquery객체로 변환하려면 $(this) 이렇게 하면 jquery 객체로 변환된다.

- jquery 객체의 index 값을 얻어오고 싶으면 index 매서드를 사용한다.

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

- <h1> <div> <span> 이런 것들을 요소(element) 라고 한다.

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

- 아이콘 등을 나타낼 때 쓰는 요소는 <i> 요소다.

- 마크업을 할때는 최대한 의미에 맞게 해야한다.

- 요소는 블록레벨(block-level) 과 인라인레벨(inline-level) 요소로 나뉜다.

- 블록레벨 요소는 컨테이너다. 레이아웃을 담당한다.

- 인라인레벨 요소는 컨텐츠(글자)다.

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

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

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

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

- ul>li 에서 '>' 는 자식선택자 이다.

- ul li 에서 ' '(한칸 띄어쓰기)는 자손선택자 이다.

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

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

- '::' 은 가상요소선택자다.

- ::before / ::after 는 해당요소의 가장 첫번째, 마지막번째 자식요소가 된다. 그리고 인라인레벨요소이다.

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

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

  만약 <a> 요소 등 인라인레벨 요소에 크기를 주고 싶으면 display 속성을 block 으로 변경해야 한다.

- 구체성 관련 공부를 해보자.

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

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

- 글자의 두께를 지정할때는 font-weight 속성을 작성한다.

-  font-family 속성의 마지막에는 반드시 대표 family 를 지정한다. (영어로는 Generic family names 라고 한다.)

- 대표 family 중에 삐침이 있는 폰트를 serif 라고 한다.

- 대표 family 중에 삐침이 없는 폰트를 sans-serif 라고 한다.

- font 나 text 관련 속성들은 자손요소들로 상속 된다.

- class 는 한 페이지에 여러개 있어도 되고, 한 요소에 여러개를 지정할 수도 있다. ex) <li class='btn delete'></li>

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

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

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

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

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

- 뒷배경이미지의 크기를 지정하는 속성은 background-size 이다.

- 글자들의 정렬을 위한 속성은 text-align 이다.

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

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

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

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

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

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

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

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

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

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

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

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

- 브라우저를 기준으로 어떤 요소를 위치지정하기 위해서는 position 속성의 값을 fixed 로 지정한다.

- 박스모델이란 width, hieght, border, padding, margin 의 값을 전부 더한 값이다.

- border, padding, margin 은 각각 top, right, bottom, left 가 있다.

- 브라우저 기준으로 수평, 수직 가운데 정렬하기 위해서는 position 을 fixed 로 지정하고, left 를 50%,

   top 을 50% 로 지정한뒤, margin-left 를(width의 절반), margin-top 을(height의 절반) 으로 지정하면 된다.

   (음수값으로 지정)

- 마크업에는 글자(콘텐츠) 가 존재하나, css 를 적용할때는 글자가 아닌, 이미지가 보여지게 하는 방법을 

  바로 IR(Image Replacement) 이라고 한다. 

  적용방법은 text-indent 속성을 -9999px 로 지정하고 overflow 속성을 hidden 으로 지정한다.

- 한 이미지를 나눠서 여러 요소에 적용하는 방법을 IS(Image Sprite) 기법이라고 한다. 

   이 경우 background-position 을 적절하게 지정하면 된다.

- 블록레벨요소들을 수평 레이아웃으로 개발하려면 display 속성의 값을 inline-block 으로 지정하거나,

  둘째, float 속성의 값을 left or right 로 지정하면 된다.

- float 속성을 지정하여 수평 레이아웃을 만들면 부모의 높이는 0 이다. 이를 해결하려면 

    1. 부모의 height 값을 적절하게 지정한다.

    2. 부모요소에 overflow:hidden 을 지정한다.

    3. 마지막 자식요소에 블록레벨을 추가하고 clear:both 속성을 지정한다.

- display 속성의 값을 inline-block 으로 지정하면 블록레벨요소의 장점(width, height 지정가능)과 

  인라인레벨의 장점(수평으로 레이아웃 가능)이 둘 다 적용된다. 단 글자로 취급되기 때문에 빈공백 만큼

  띄어지는 것을 주의해야 한다.