![[CSS] -prefix-free 사용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlDR3U%2FbtqXN9zPJEu%2FL4hXqBsBTuUADv94gn2fZK%2Fimg.png)
- Vendor Prefix 알아보기 -
[CSS] Vendor Prefix란?
vendor prefix가 무엇일까요? 우선, prefix에 대해 알아보겠습니다 :) Prefix의 뜻 알아보기 우선 prefix를 네이버 사전에서 찾아보면 위와 같이 "접두사"라는 뜻이 나옵니다. 자, 그럼 CSS에서 vendor prefix는.
codingdiary26.tistory.com
Vendor Prefix를 사용할 때,
일일이 CSS 속성에 각 브라우저의 Vendor Prefix를 입력하는 것은 매우 귀찮은 일입니다.
그런데, 마침 이 Vendor Prefix를 작성하지 않아도 알아서 자동으로 Vendor Prefix를 넣어주는 방법이 있습니다 :D
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Test drive Test the prefixing that -prefix-free would do for this browser, by w
projects.verou.me
그 방법은 바로 이 사이트를 이용하는 방법인데요!
사이트에 들어가서,
파일을 다운받아줍니다!
파일을 다운받으셨다면,
적용하고 싶은 웹사이트의 Html 파일 <head>부분에
<script src="prefixfree.min.js"></script> 위 코드를 넣어줍니다!
이 코드는 html에서 "prefixfree.min.js라는 파일을 불러오겠다"라는 의미입니다 :)
(CSS 파일 로드 부분 밑에 넣는 것을 권장합니다!)
이렇게 넣어주면 끝입니다!
(참고로 이 Prefix Free는 IE 9+, 오페라 10+, 파이어폭스 3.5+, 사파리 4+ 그리고 크롬과,
모바일 사파리, 안드로이드 브라우저, 크롬과 오페라 모바일 버전을 지원하고 있으며,
IE 8과 같은 오래된 버전의 브라우저에서는 CSS가 깨지지는 않지만, prefix가 자동으로 적용되지 않는다고 합니다 :)
'배운 것들 > html,css,js' 카테고리의 다른 글
| [Chrome] 구글 크롬 공룡 게임 가지고 놀기 👾 (0) | 2022.04.12 |
|---|---|
| [JS] tilt.js 사용하기 (0) | 2021.02.22 |
| [CSS] Vendor Prefix란? (0) | 2021.02.14 |
| [html] link의 종류 (0) | 2021.02.07 |
| h 태그란? (<h1>, <h2>, <h3>.....) (0) | 2021.02.01 |