Jazz with IT

label의 for 속성을 사용하게 되면 입력박스(input)와 라벨(label)간 연관을 줄수있다.
이렇게되면 의미있는 마크업을 할 뿐만 아니라 클릭가능한 영역도 넓어진다.

label태그의 for속성으로 input과 연관되어있을 경우, label를 클릭하면 자동적으로 연관된 input가 활성화(포커스) 된다.

<label for="subject">제목</label> <input id="subject" name="subject" type="text" />

이렇게 하게되면

제목 □□□□□□□□□

처럼 나올것이다. (□□□□□□□□□ 는 입력박스라고 생각하자;;;)
그러면 [제목] 이라는 글자를 클릭하게 되면 입력박스(□□□□□□□□□)가 활성화되게 된다!!
만일 type="checkbox" 라면 label을 클릭하였을때 체크박스에 체크가 된다!

참고:
http://www.w3schools.com/tags/tag_label.asp
http://www.w3schools.com/tags/att_label_for.asp
http://mygony.com/archives/129

http://www.lipsum.com/

http://meyerweb.com/eric/tools/css/reset/

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
   display: block;
  }
  body {
   line-height: 1;
  }
  ol, ul {
   list-style: none;
  }
  blockquote, q {
   quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
   content: '';
   content: none;
  }
  table {
   border-collapse: collapse;
   border-spacing: 0;
  }

http://dever.tistory.com/102

테이블 셀은 border-spacing이라는 공간이 margin을 대체한다.

일괄 적용 되며, 개별 적용은 안된다.

border-collapse: collapse; 로 border-spacing 공간은 없앨 수 있다.

http://www.colorzilla.com/gradient-editor/

http://css3generator.com/

CSS는 block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일 속성이 업서 line-height와 block의 컨텐츠 height를 동일하게 맞추어 수직정렬한다.

box-sizing: content-box (width와 height가 컨텐츠 크기를 설정)

box-sizing: border-box (width와 height가 border까지의 총 합으로 설정)

text-align 속성은 블록 요소 안에 있는 모든 인라인 콘텐츠를 정렬한다.

적용한 요소 내부에 있는 블록 요소는

적용된 요소의 text-align 속성을 상속받아 동일하게 적용된다.