호다닥

CSS - grapic 본문

HTML & CSS

CSS - grapic

3jun 2018. 7. 11. 18:54

배경 ( back-ground ) 

back-ground-image: url(' ');

back-ground-repeat: (no-repeat / repeat / repeat-x / repeat-y );

background-attachment: (scroll / fixed);

background-size: (cover / contain);

background-position: ( bottom/center/left/right/top | bottom/center/left/right/top );

 

 

 

필터 ( filter )

어떤 이미지, 텍스트 등 그래픽 대상에게 다양한 효과를 줄 수 있는 기능이다.

컬러 이미지를 흑백이미지로 바꾼다던지, 뿌옇게 처리한다던지 등등

포토샵이나 기타 그래픽 프로그램들이 코드화 되었다고 생각하면 무난하다.

원본이미지를 그대로 유지하면서 코드를 통해 효과를 주는 것이다. 

 

CSS Filters Playground

 

위 사이트를 들어가면 CSS에서 filter 를 통해 구현할 수 있는 기능들을 확인할 수 있다. 

어떤 브라우저에서는 지원을 하지만 어떤 브라우저에서는 시험적으로 사용을 하고 있기 때문에 Vender prefix를 입력해야한다.

 

 

 

 

 

 

 

 

'HTML & CSS' 카테고리의 다른 글

CSS - Parcel  (0) 2018.09.03
CSS - Position / box-sizing / background-repeat  (0) 2018.08.29
CSS - layout ( flex, float )  (0) 2018.07.10
CSS basics - layout  (0) 2018.07.09
CSS flexbox  (0) 2018.06.27
Comments