접두사 벤더프리픽스 (Vendor Prefix) - webkit moz o ms

css3의 표준안은 아직 표준 규약으로 확정된 것이 아니기 때문에 브라우저 별로 다르게 보입니다. 

예전에 이렇게 브라우저별로 통일되지 않은 부분 때문에 정말 많은시간을 머리를 굴리며 고생고생하다가 결국 핵을 써가며

지저분하게 코딩을 마무리 기억이 나네요

아무튼 그래서 개발사들이 이런 상황에 대처하기 위해 css3표준안을 적용하기 이전에 브라우저에서 자체적으로 css3를 지원할 수 있는 접두어를 지원하게 됩니다.

즉 브라우저별로 다르게 보이는 css3 표준안은 프리픽스를 앞에 붙여주고 나중에 표준이 정해지면 접두어가 붙은 속성은 무시 되고 알아서 표준 속성을 지원하게 됩니다.

▷ 접두사

-webkit-  :  사파리, 크롬

-moz-     :  파이어폭스

-o-         :  오페라

-ms-       :  익스플로러

css3 표준속성

순서가 중요한데 호환성을 위해서 접두어가 붙은 속성들을 먼저 작성해주고 표준속성을 맨 마지막에 작성해줘야 합니다.

이렇게 하면 나중에표준이 정해지면 맨 마지막 속성만 사용되게 됩니다.

그런데 이걸 일일이 붙여주려면 여간 성가신게 아니죠

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

그래서 위 주소로 들어가서 

왼쪽에 Only 2KB gzipped라고 쓰여 있는 버튼을 클릭해서 js 파일을 다운 받습니다.

<script src="prefixfree.min.js"></script>

이렇게 연결해주면 알아서 접두어를 붙여줍니다.