벤더프리픽스(Vendor Prefix : 벤더 접두사)

주제선정이유

 평소에 CSS 스타일을 적용하다가 -webkit-, -moz-, -o-(요건 잘 사용 안한다ㅎㅎ)로 시작하는 css 를 추가해야하는 경우가 있다. 그런데 이게 사실 정확히 뭔지는 모르고 다른 브라우저에서도 동일하게 CSS가 먹도록 추가해야 한다는 정도만 알고 있었다.  그래서 이것에 대한 정확한 개념과 필요성을 알기 위해 주제로 선정하게 되었다.

1. 벤더 프리픽스(Vender Prefix)란?

간략하게 말해서 Vendor 는 "공급업체"이고,  Perfix는 "접두사"이다. 즉, 벤더 프리픽스(Vender Prefix)는 '공급업체접두사'라고 정의 내릴 수 있다.

html5로 넘어가는 과도기적인 시점에서 몇몇의 CSS3의 기능은 웹표준이 아니다. 때문에 브라우저마다 접두어를 넣어줘서 변환 효과를 적용해야한다. 

'벤더 프리픽스'는 새로운 기능을 모두 제공해야 할 때 변환 효과를 적용하는 스타일 시트라 할 수 있다. 

2. 사용법

너무 쉬워서(?) 사용법이라고 할 정도로 특별한 것이 없다..

CSS의 문법 특성만 이해하고 있다면 사용에 아무런 문제가 없다.

아래는 기본적인 사용 예제이다. 

브라우저가 계속 버전업 되고 있는 상황인 만큼 사용하기전에 꼭 확인해보고 사용하자. (→ 확인은 Can I Use에서..)

CSS Sample	Browser
-webkit-border-radius: 10px;	사파리, 크롬
-moz-​border-radius: 10px;	파이어폭스
-o-​border-radius: 10px;	오페라
-ms-border-radius: 10px;	인터넷 익스프롤러
border-radius: 10px;	표준 속성

* border-radius는 몇년전까지만해도 크롬과 파이어폭스에서 사용하려면 접두사를 붙여야 했지만 현재 그냥 표준속성을 사용하면 된다. 그리고 크롬의 경우에는 -webkit-border-radius 만 써줘도 실행이 되지만, 최신 버전의 파이어폭스의 경우 -moz-border-radius 를 아예 실행하지 않고 있다. 그래서 그냥 border-radius를 사용해줘야 한다. 

3. 플러그인도 있다?

번거로울 수 있는 벤터 프리픽스를 생략할 수 있게 도와주는 플러그인도 있다고 한다. 이 플러그인은 Prefix free 이다.

http://leaverou.github.io/prefixfree/

prefixfree.min.js 다운로드

Prefix Free는 벤더 프리픽스를 사용하지 않아도 만들어 주는 유용한(?) 라이브러리이다.

이렇게하면 굳이 번거롭게 Style.css에 벤더프리픽스 코드를 입력할 필요가 없다.