👩🏻💻 벤더 프리픽스(Vender Prefix: 벤더 접두사)란?
- Vendor 는 "공급업체"이고, Perfix는 "접두사"이다. 즉, 벤더 프리픽스(Vender Prefix)는 '공급업체접두사'라고 정의 내릴 수 있다.
- CSS3는 개발 속도가 다르기 때문에 일부는 완성되었고 아직 개발중인 것도 있어 HTML과는 다르게 CSS는 아직 '웹 표준'이 정해지지 않았다. 따라서 우리는 ✨CSS를 모든 브라우저에서 원활히 사용하기 위해 스타일 속성 앞에 프리픽스(Prefix: 접두사) 를 붙여주어야 한다.
💁🏻♀️ 사용법
벤더 프리픽스를 사용하는 방법은 아주 아주 간단하다.
| CSS Sample | rowser |
|---|---|
| -webkit-border-radius: 10px; | 사파리, 크롬 |
| -moz-border-radius: 10px; | 파이어폭스 |
| -o-border-radius: 10px; | 오페라 |
| -ms-border-radius: 10px; | 인터넷 익스프롤러 |
| border-radius: 10px; | 표준 속성 |
하지만, 브라우저는 계속 버전 업그레이드 중이므로 사용법을 꼭 확인해보고 사용해야 한다.
(→ 확인은 Can I Use...에서 😵💫)
⚡️💁🏻♀️⚡️ 더 간편하고 쉬운 사용법
위 사용법은 아주 간단하고 쉽지만, 매번 코드를 입력해야하는 번거러움이 있다. 더 간편하고 쉬운 방법은 없을까? 😵💫
😎 있다!!!!!!!!!!! (→ -prefix-free)
- 사용법
1. -prefix-free에 접속
2. Only 2KB gzipped 파일 저장
3. index.html head 태그 안쪽에<script src="prefixfree.min.js 파일 경로"></script>입력
