[CSS] Vendor Prefix(접두어) webkit, moz, o, ms

웹 개발을 하면서 CSS에 -webkit-, -moz-, -o-, -ms- 접두어가 속성 앞에 붙어 있는 것을 볼 수 있다.

이는 벤더프리픽스 (Vendor Prefix)라 하며, 이 접두어들은 크로싱 브라우저를 위해 사용된다.

각 접두어의 의미는 아래와 같다.

-webkit-

 : 구글의 크롬, 애플의 사파리 웹 브라우저에 적용한다.

-moz-

 : 웹브라우저 모질라 (파이어폭스)에 적용한다.

-ms-

 : MS(마이크로소프트)의 인터넷익스플로러에 적용한다.

-o-

 : 오페라 웹 브라우저에 적용한다.

간단한 사용 예제

.example {

border-radius: 1em;

-webkit-border-radius: 1em;

-moz-border-radius: 1em;

-o-border-radius: 1em;

-ms-border-radius: 1em;

}

예를 든 border-radius의 경우는 현재는 접두사 없이 border-radius를 사용하면 된다.

(최신 버전의 파이어폭스의 경우 -moz-border-radius를 아예 실행하지 않는다.)