라인 중학교 1학년 코딩반

벤더 프리픽스란?

벤더 프리픽스(vendor prefix)란 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.

즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.

 

크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다.

<style>
    .button {
        background: red;               // gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드
        background: -webkit-linear-gradient(red, yellow); // 크롬과 사파리 4.0 이상을 위한 코드
        background: -moz-linear-gradient(red, yellow);    // 파이어폭스 3.6 이상을 위한 코드
        background: -ms-linear-gradient(red, yellow);     // 익스플로러 10.0 이상을 위한 코드
        background: -o-linear-gradient(red, yellow);      // 오페라 10.0 이상을 위한 코드
        background: linear-gradient(red, yellow);         // CSS 표준 문법 코드
    }
</style>