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

입력양식 태그 정리

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

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

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 태그: 데스크탑에서는 안예쁘므로 잘 안씀.

감성적 정리 :

아침에 겨우 와서 마라톤처럼 공부함.

해내고자 하는 것 송곳처럼 파고들지 못하는 습성..으로 인해

이것저것 실험하다 결국 목표량 끝마치지 못함.

동영상에 다 나와있다. 잘 보고 정리하는게 중요하다는 것 깨닫

한 것:

메인페이지 디자인까지 겨우 완성.

서브라임으로 마우스오버했을때 스탑효과 하고 태그 안닫아서 아침부터 화면 깨져나와 1교시 날림

가상요소로 헤더 햄버거 메뉴 만듦

before로 span을 세개써서 nth-child(2)와 3 등 만들어줌. width height만 있음 영역이 잡히는구나

플레이, 글씨, pagination 조절함 디자인적 height 맞춤

오후 2시부턴 하단 조정하다 시간다감.

내 방식대로 html에 img로 넣고 할 수 있을거라 생각해서 열심히 해봄

포토샵으로 이미지 사이즈 다 같이 맞춰주고, 이미지 자체에 width 값주고,(근데 width,height가 조금씩 달라 모양이좀 이상하긴함, 이럴땐 bg로 넣어서 bgsize 조정하는게 나았으려나) 서로 마진값으로 사이 늘려주고, 했음.

샘은 20%로 깔끔히 하라는데 잘 모르겠음. 이것도 겨우 했음. 모바일 화면 사이즈 그대로 pc도 크기 같아도 상관없다해서.. img 퍼센트로 나타내지 않음.

카페, 7시

상세페이지 조금 작업하는데 img랑 글 있을때 수직정렬하다 시간날림.

샘이 테이블에서만 수직정렬하는 거라심.

이럴땐 이미지 poa 쓰면 코딩이 쉬워짐.

오후10시~11시 모던 웹 폼태그랑 시멘틱 태그 등 정리좀 하려했더니 표 수정하기가 왤케 힘드냐

어차피 대충 아니까 동영상 보고 샘 사이트 참고해야겠다.

열동

집와서 html5 (responsive) 동영상1 봄

공부 정리 : (

아웃라이너는 체계적이다.

책의 차례역할와 같다. 구조 파악 하기 매우 좋다 !

반응형 사이트는
웹표준 만들때와 다르다. (웹표준은 width, height 값잡고 영역잡고 했음)

쉽게 짜기위해 먼저시멘틱 태그로 레이아웃을 짠다.

먼저 header pc화면 짜고 타블렛, 모바일화면 짜면된다.->이후 nav, main,... 마찬가지로

그러나, 시멘틱태그는 ex8에서 안먹기때문에 html5shiv

섹션이 의미가 있기위해선 제목을 제공해야 합니다.

예시 보기
한눈에 구조파악

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