벤더 프리픽스(Vendor Prefix) , 딱 정리하자

 

벤더 프리픽스..? 처음 들어보는데 뭐지?

일단 TCP스쿨에 써있는 개념을 잠깐 살펴보자 !

 

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다

응..응.... 웹..브라우저가 .. 또 문제라는거지? 그런거지? 뭐라는거야..?

 

💢 그래서 벤더 프리픽스가 뭔데?

 

웹 관련 기술들은 계속 보완되면서 발전중이다.

그런데 이 웹! 이라는 게 쓰는 사람들이 있다보니깐,,,갑자기 확! 모든걸 바꿀 수가 없다는 특징이 있다. 

예를 들어 내가 마요브라우저 버전1을 사용 중인데 버전2에서만 쓸 수 있는 기술이 생기면?

2만 지원하는 기술이 생기면? 1을 쓰는 나는... 버려지는건가 ? 

 

ㄴㄴ 아니다. 

벤더 프리픽스 때문이구나! 

 

ㅇㅇ 맞음 

자 다시. 프리픽스란.

이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다

즉, 이전 버전의 웹 브라우저에게 아직 완벽하지 않은 기능을 알려주면서 사용하게 하는 것. 

 

알려주면서 사용하게 하는 것. !!! 오..

브라우저별로 다양한 형태의 벤더 프리픽스가 존재한다. 

모양이 다 다름. 

<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>

CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다. 먼저 알려주고. 그 다음에 우리가 작성된 CSS가 나오는 원리겠지..?

이런 벤더 프리픽스는 권고안에 포함되어지거나 완벽하게 제정되면 사용할 필요가 없어진다. 

 

벤더 프리픽스가 주로 사용되는 속성들에는 변형(Transform), 변환(Transition), 애니메이션(Animation), 그라데이션(Gradient) 등 사용 빈도가 낮은 속성들이 있다. 

 

그럼 이걸 우리가 다 외워서 작성하느냐? ㄴㄴ 아님. 

 

https://autoprefixer.github.io/

Autoprefixer CSS online

이 사이트를 이용하면 벤더 프리픽스가 붙은 css를 반환해준다. 유용! VSC에 플러그인도 있음 

 

 

 

 

 

reference

http://www.tcpschool.com/css/css3_module_vendorPrefix

https://blogpack.tistory.com/771