css3에 추가된 속성들(정리중)

css3에 추가된 속성들

*벤더프리픽스 : 모든 브라우저에 적용하기 위해 css 속성 앞에 붙여줌 

-webkit-: 사파리, 크롬

-moz-: 파이어폭스

-o-: 오페라

-ms: 익스플로러

1. border-radius

: border-radius를 통해 display:block의 모서리를 둥글게 혹은 원으로 표현할 수 있음.

- border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius

- 위의 값을 4개의 값으로 축약형으로 사용가능 cf) border-radius: 10px 20px 10px 20px

모서리 위치 지정하는 법(시계방향으로 돌림, 시작은 왼쪽 상단)

값이 4개일때 - 왼上->오上->오下->왼下 순으로 모서리 구현

값이 3개일때 - 왼上 - 오上,왼下 -> 오下 

값이 2개일때 - 왼上, 오下 - 오上,왼下 

2. border-image

: 요소를 감싸는 테두리를 이미지로 처리할 수 있음

**IE10 버전은 표현되지 않음

속성지정 : 테두리선으로 사용될 이미지, 이미지 위치(background-position과 유사), 이미지 반복

https://developer.mozilla.org/ko/docs/Web/CSS/border-image

3.background

- 하나의 요소에 2가지 이상의 배경이미지를 포함할 수 있음(콤마(,)를 사용해 관련 이미지를 구분)

ex) background: url(이미지 주소) right bottom no-repeat, url(이미지 주소) left top repeat;

1) background-size

      - background-size: 0px 0px ;

- background-size: contain; 

- background-size: cover; -> 반응형 사이트를 만들때 사용, full size background image(fixed 속성을 추가해서 scroll방지)

 

cf ) https://www.w3schools.com/css/css3_backgrounds.asp

cf2 )  https://css-tricks.com/perfect-full-page-background-image/

2) background-origin

-> background의 position을 의미함

 

 - background-origin:padding-box;

    : top:0과 같이 외곽 border에 딱 맞게 배경이미지를 위치

 - background-origin: border-box;

    : border를 지정해줬다면 border가 배경이미지를 덮는 형태 

 - background-origin: content-box;

    : padding 값과 같이 배경이미지도 padding값을 가지게 됨

 3) background-clip 속성

 ->  background-clip 속성은 배경의 그림 영역을 지정할 수 있음(보더까지 감싸는것)

  

- border-box : 배경은 테두리의 바깥 가장자리에 그려짐.(default) (전체를 다 감쌈)

- padding-box : 배경은 내부 여백이 포함된 바깥 가장자리에 그려짐(보더 안쪽까지만)

- content-box : 배경은 내부 콘텐츠 영역 안에 그려짐(컨텐츠만)

4.CSS3 Gradients

 -> 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시할 수 있습니다. 

- 직선형

background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */    

background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */   

background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */    

background: linear-gradient(red, blue); /* Standard syntax (must be last) */