Vender Prefix(공급 업체 접두사)

1. 터미널에서 패키지 두개를 설치한다. npm i -D postcss autoprefixer

2. package.json 파일에 browserslist 옵션을 추가한다. "browserslist": [ "> 1%", "last 2 versions"]

(browserslist 옵션은 현재 npm 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도이다. 그 명시를 autoprefixer 패키지가 활용하게 된다)

( "browserslist": ["> 1%", "last 2 versions"]는 전세계에 점유율이 1% 이상인 모든 브라우저의 마지막 두개의 버전까지는 지원을 하겠다는 말)

3. 루트경로에 .postcssrc.js 파일을 작성한다. 해당 파일 안에 아래 내용 입력한다.

module.exports = {

  plugins: [

    require('autoprefixer')

  ]

}

(뒤에 rc(Runtime Contiguration의 약어)가 붙은 파일은 구성 파일을 의미한다.)

4. 터미널에 npm run dev 작동시킨다. /만약 이때 에러가 난다면 보통 autoprefixer와 postcss 패키지 버전에서 충돌이 일어난거라 autoprefixer의 버전을 한단계 아래로 낮춘다. 예: npm i -D autoprefixer@9

5. 브라우저 확인 시 최상단 이미지와 같이 보여질 것이다.