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

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

정보수정

메뉴
상세페이지

->오후 동영상 보기~

->우리 앱 짜기~~

->이력서~

ul>li > label
ul 안에는 li만 올수있음. label>li는 잘못.
li>label>input (ok)

구조 잘못
아이디 input 박스
dt dd 로 짜줘야 했음.

ul : w70p
li : w100p dib

메인은 ul li (구조 좀 더 복잡한건 이거쓰기도 함dl dt dd)
안에 게시판 같은것 table로 만듦

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 은 인터넷 익스플로러에서 문서가 쿽스 모드일 때 사용된다.

???

백그라운드 이미지 동그랗게 할수 있나?

티월드 ㄱㄱ

???

못한 것

->오후 동영상 보기~

->우리 앱 짜기~~

->이력서~

2018.1.10 수

한 것

: 오전 마이페이지 팔로잉 게시물 만듦

오후 : 3시께까지 그라디언트와 폼, 트렌지션 정리 했다.

이후 수업시간내 로그인페이지 완성~

카페 (9:00~11:40)

: 폼 태그 좀더 다듬음

다른조 홈페이지 봤음.

집 (am5:00)

:회원가입까지 완성

감상적 정리

: 자만하지말자, 5개월과정 끝내고 취업 잘 하려면 더 빡세야 한다.

이제 학원이 편해졌다. 계속 지속되삼

background-image: linear-gradient(color, color);

background-image: linear-gradient(degrees, color, color);

background-image: radial-gradient(color, color);

background-image: radial-gradient(circle, color, color);

background-image: radial-gradient(circle, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-side, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-corner, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle farthest-side, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle farthest-corner, color 0%, color 20%, color 100%);

background-image: radial-gradient(circle closest-side at 45px 45px, color 0%, color 20%, color 100%);

* %는 위치값을 나타냄

그레디언트를 지정할 때, background-image 속성을 사용합니다. 단축 속성 background 속성도 가능.

* 방향 : 기본값은 위에서 아래로

*rgba 쓰면 rgba로 일관성 줘야함. #쓰면 안 먹힌다.

시작점은 생략하고 to로 목적지를 설정한다.(시작접을 설정하려면 to 없애면 됨)

to right

to top right (상단 오른쪽으로)

to bottom left (하단 왼쪽으로 )

*여러가지 색상 추가

background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69, #4496e3, #51b0dc);

*각도 지정하기

0deg는 아래에서 위 방향

45deg는 하단 왼쪽에서 상단 오른쪽 방향(즉 45도 방향임)

90deg는 왼쪽에서 오른쪽 방향

180deg는 상단에서 하단 방향 

음수도 가능.

백그라운드

여러개의 이미지를 사용할 경우

먼저 쓴 이미지가 앞으로 나온다.

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 넣어주기