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> 보고 대략적으로 정리 ㄱㄱ