벤더 프리픽스 Vendor Prefix 란?

벤더 프리픽스 Vendor Prefix 란?

• 벤더Vendor 는 공급업체이고, 프리픽스Prefix는 접두사이다. 즉, "공급업체접두사"이다.
• 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사이다. 
• HTML과 다르게 CSS는 아직 웹 표준이 정해지지 않았다. 따라서 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해 스타일 속성 앞에 프리픽스를 붙여주어야 한다.
• 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나, 완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어진다. 

브라우저 별 벤더 프리픽스

브라우저	벤더 프리픽스
IE / Edge	-ms-
Chrome	-webkit-
Firefox	-moz-
Safari	-webkit-
Opera	-o-
iOS Safari	-webkit-
Android Browser	-webkit-
Chrome for Android	-webkit-

 

주의할 점

- 브라우저는 계속 버전 업그레이드 중이므로 사용법을 꼭 확인해보고 사용해야 한다！(확인은 Can I Use 에서)

- 표준 속성을 제일 마지막에 적는다!

더 편한 방법은 없을까?

1.  Prefix Free 라이브러리 사용하기!

사용법

1. -prefix-free 에 접속
2. Only 2KB gzipped 파일 저장
3. index.html head 태그 안쪽에 <script src="prefixfree.min.js"></script> 입력

2. CSS 코드를 넣으면 자동으로 벤더 프리픽스를 붙여주는 사이트 사용하기!

---

참조 

https://velog.io/@jjhstoday/CSS-%EB%B2%A4%EB%8D%94%ED%94%84%EB%A6%AC%ED%94%BD%EC%8A%A4Vendor-Prefix-%EB%B2%A4%EB%8D%94-%EC%A0%91%EB%91%90%EC%82%AC

https://poiemaweb.com/css3-vendor-prefix

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