프론트엔드-코드/CSS

-webkit- 접두어 자동으로 붙여주는. autoprefix

sdafdq 2023. 9. 1. 15:47

-webkit-

-moz-

-ms-

-o-

여러가지 브라우저에 대한 지원을 하게 자동으로 붙여주는 거다.

 

예를 들어 익스플로어에서 기본 display:flex; 가 안먹힐 때

display:-ms-flex;

이걸 같이 넣어두면 이 위걸 적용한다.

 

근데 우리가 모든 브라우저에 대해 저걸 일일히 써주기는 너무.. 힘빠진다.

 

이럴 때 자동으로 붙여주는 node.js 플러그인이 있다.

 

 

근데 굳이 벤터 프리픽스 붙이지 말고,

 

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

 

CSS3 Vendor Prefix | PoiemaWeb

CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다.

poiemaweb.com

 

이런 것도 있다.

 

 

npm i -D autoprefixer

 

해서 깔면 된다.

 

근데 우리가 추가적으로 

postcss도 깔아야 된다.

 

둘이 한번에 npm i -D autoprefixer postcss

할 수 있다.