vendor prefix란?

vendor prefix

이전 버전의 웹 브라우저에 포함되어있지 않은 기능을 사용하게 할 때 그 사실을 알려주기 위해 사용하는 접두사(prefix)이다.

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

그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 된다.

하지만 매번 스타일을 정의 할 때마다 벤더 프리픽스를 설정하면 코드가 너무 길어진다.

해서 프리픽스를 지원하는 -prefix-free 플러그인을 연결해주기만 하면 ie9+, opera 10+, firefox3.5+, safari 4+, chrome, mobile safari, android browser 등 이상의 버전에서 지원이 가능하다.

-prefix-free 적용 방법

1. https://projects.verou.me/prefixfree/ 방문 후 왼쪽 버튼을 눌러 소스 코드를 복사 후 js 파일로 저장한다.

2. html head태그 안에 다음과 같이 넣어준다.

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

3. 끝!🐰