본문 바로가기

프로그래밍 공부/CSS3

CSS3 - 그레이디언트 & 벤더 프리픽스

그레이디언트는 2가지 이상의 색상을 혼합해서 채색하는 기능이다. 간단한 선형 그레이디언트는 linear-gradient(각도, 색상 위치, 색상 위치)순으로 만들 수 있다. 또한 원형 그레이디언트는 radial-gradient를 이용해서 만들 수 있으나, 대부분의 그레이디언트는 툴을 이용해서 생성할 수 있다. 

https://www.colorzilla.com/gradient-editor/

 

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

www.colorzilla.com

위의 사이트 처럼 CSS Gradient Generator를 이용해 스타일을 만들어 붙여넣는 식으로 적용이 가능하다.

그레디언트.html
0.00MB

벤더 프리픽스는 위에서 살펴본 HTML에서 background 속성이 많이 지정되어 있는데 그곳에 지정된 값중에 -moz, -webkit, -ms등의 글자가 쓰여져있는데 이것이 벤더 프리픽스이다. 

 

벤더 프리픽스는 웹 브라우저 공급 업체(마이크로 소프트, 모질라, 구글, 애플, 오페라)에서 제공이 된다. 주로 새로운 실험적인 기능들에는 벤더 프리픽스를 사용해야한다.

인터넷 익스프롤러 파이어폭스 크롬 사파리 오페라
-ms- -moz- -webkit

 

'프로그래밍 공부 > CSS3' 카테고리의 다른 글

CSS3 - 그림자 속성  (0) 2019.11.19
CSS3 - clear:both를 사용한 레이아웃  (0) 2019.11.19
CSS3 - float 속성  (0) 2019.11.19
CSS3 - 위치 속성  (0) 2019.11.19
CSS3 - 폰트 속성  (0) 2019.11.18