td:not(:nth-child(4n)){
  text-align:center;
}

-> 4번째 td를 제외하고 td 태그에 적용됨

box-sizing 속성:

width 속성과 height 속성이 차지하는 범위를 지정합니다.

box-sizing: content-box : 이 값은 CSS 표준에 의해 정의된 기본 스타일이다. 


width와 height 속성은 padding, border, margin을 포함하여 측정되며,

을 포함하지 않는다.

box-sizing: padding-box :

width와 height 속성은 padding 크기를 포함한다.

하지만 border 및 margin을 포함하지 않는다.

margin을 포함하지 않는다. 이 box model 은 인터넷 익스플로러에서 문서가 쿽스 모드일 때 사용된다.

transition은 한 가지 상태에서 다른 상태로 변화하는 것이라고 보면 됩니다.

▶transition 문법

transition: transition-property | transition-duration | transition-timing-function | transition-delay

* 기본값 : all 0 ease 0 

transition-property 움직일 속성지정 (하나 이상의 속성을 나열할 때 쉼표로 분리)

transition-duration 총 지속 시간 (시간을 정해주지않음 기본값이 0이라 아무효과도 없다, 또한 여러가지 속성을 지정할시 쉼표로 분리해 지정) 

transition-timing-function 속도 설정 (시간지연)

transition-delay 시간 지연

transition-timing-function

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 

* ease : 기본값. 천천히 시작해서, 빠르게 진행하며, 천천히 끝남.

            cubic-bezier(0.25,0.1,0.25,1))와 같음

* linear : 처음과 끝이 같은 속도로 나타남

            cubic-bezier(0,0,1,1))와 같음

* ease-in : 천천히 시작  cubic-bezier(0.42,0,1,1))와 같음

* ease-out : 천천이 끝남  cubic-bezier(0,0,0.58,1))와 같음

* ease-in-out 천천히 시작해서 천천히 끝남  cubic-bezier(0.42,0,0.58,1))와 같음

* cubic-bezier(n,n,n,n)  직접 값을 지정할 수 있음. 가능한 값은 0부터 1까지 숫자값

cubic-bezier값 설정은 아래 참조

http://roblaplaca.com/blog/2011/03/11/understanding-css-cubic-bezier/

http://www.w3.org/TR/css3-transitions/#transition-property-property

http://www.roblaplaca.com/examples/bezierBuilder/#

<http://aboooks.tistory.com/search/gradient> 보고 대략적으로 정리 ㄱㄱ

background 단일 속성으로 사용하기

 {width: 200px; height: 200px;} 레이아웃 크기지정
        background-color: #fff; 색상지정
        background-image:url(파일경로); 이미지파일 경로지정
        background-repeat: no-repeat; 반복지정
        background-attachment: fixed; 스크롤지정
        background-position: 10px 10px;  위치지정
        background-size:100px 50px; 픽셀값으로 크기지정

{ width:270px; height:270px; background:yellow url('파일경로') no-repeat fixed 10px 10px/100px 50px;} 단일속성으로 지정

가상요소

content: ''; w h 넣고 poa left right 넣어주기

입력양식 태그 정리

입력양식은 사용자에게 입력받는 공간을 의미합니다.

입력양식 태그는 대표적으로 회원가입 양식이 있습니다.

1 입력양식은 form 태그를 사용한다.

그 입력양식 안에는 input 태그를 사용한다.

*label 의 for은 input의 id 로 받는다.

1.1 form 태그의 속성

1.2 input 태그의 type 속성값

label 태그:

label는 input 태그를 설명하는 데 사용합니다.

label 태그는 어떠한 input 태그를 설명하고 있는지 표시해줘야 합니다. input 태그에 id 속성을 입력하고 label 태그에 for 속성을 입력합니다.

label태그 안의 내용은 input 태그에 자동으로 초점이 맞추어 집니다.

1.3 html5 추가된 type 속성값

속성

*name 속성

 모든 것에 이 이름(name)속성을 정해줘야함, color, size address, id, password)

*value (가치있는 값) 기본적으로 적혀있는 글자라고도 할 수 있음. (textarea는 그냥 태그 안에 입력하면 됨.)

*placeholder 뒤에 흐린글씨로 나오는 태그이다. (placeholder="id를 입력해주세요")

2 input 태그가 아닌 입력양식이 2개 있다. textarea 태그와 select 태그이다.

textarea 태그

: 여러줄의 글자를 입력할 수 있는 태그입니다.

안에 미리 글자를 입력하고 싶으면 textarea 태그 안에 글자를 입력한다.

2.1  textarea 태그의 속성

select태그

:여러 개의 목록에서 몇가지를 선택할 수 있는 입력 양식 요소입니다.

여러개의 목록을 선택하고 싶을 때는 selct태그의 multiple 속성을 사용하삼 (dropdownlist라고도 부름)

2.2  select 태그

*selct 태그: 데스크탑에서는 안예쁘므로 잘 안씀.

form 태그 정리
>
select > option
textarea
 textarea > cols
 textarea > rows

input> type   {크기는 width, height로 줌)
type> radio
type> checkbox(여러개 선택)
type> submit(제출)

input>name
 모든 것에 정해줘야함, color, size address, id, password)

input >value (화면에 나오는 기본메시지)
input > type > button (버튼 모양과 클릭만할수 있고 자바로 뭔가 할때 이용)
input > type > reset ( 입력정보초기화)

LABEL