[CSS] Vendor Prefix란?

vendor prefix가 무엇일까요?

우선, prefix에 대해 알아보겠습니다 :)

 

Prefix의 뜻 알아보기

 

우선 prefix를 네이버 사전에서 찾아보면

위와 같이 "접두사"라는 뜻이 나옵니다.

 

자, 그럼 CSS에서 vendor prefix는 

영어의 un-, pre-처럼 앞에 붙여 쓸 수 있을 것 같다는 생각이 드실겁니다!

그럼 이제 한번 vendor prefix가 뭔지 알아봅시다!

 

Vendor Prefix 알아보기

Vendor Prefix

Vendor(판매 회사, 즉 브라우저 공급업체) Prefix(접두사)

 

 

CSS에서 vendor prefix는 

-moz-, -webkit-과 같이 쓸 수 있습니다.

 

그런데, 이게 무슨 역할을 하는 걸까요?

 

Vendor Prefix는 실험적인 CSS 기능을 사용할 수 있게 도와줍니다.

 

최신 브라우저들에서는 CSS 기능을 따로 vendor prefix를 작성하지 않아도 많은 기능들을 지원하지만,

오래된 버전의 브라우저들에서는 지원하지 않는 기능들이 있습니다.

 

그렇다면,

CSS 코드를 열심히 작성했는데 오래된 버전의 브라우저에서는 그 CSS 코드가

제대로 적용되어 나타나지 않을 수가 있겠죠?

 

그래서 이러한 것을 방지하기 위해

Vendor Prefix라는 것을 사용합니다.

 

브라우저별 Vendor Prefix

 

이 Vendor Prefix는 각 브라우저에서 제공하는데,

주요 브라우저들의 Vendor Prefix

이렇게 브라우저마다 -webkit-, -ms-, -moz 등 각각의 vendor prefix를 갖고 있습니다.

 

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

실제로는 이렇게 활용할 수 있습니다.

 

이렇게 각 속성들에 브라우저들의 vendor prefix를 추가하면

페이지의 호환성을 높일 수 있습니다 :)

---

참고한 사이트

Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms | MDN