2021년 2월 14일 새벽

벤더 프리픽스?

인터넷에서 CSS 코드를 검색할 때면 종종 -webkit- 같은 낮선 접두어가 붙어있을 때가 있었습니다.🤔 생김새가 굉장히 어려워 보여서 처음에는 당황했었는데요, 알고보니 이런 접두사들은 크로스 브라우징을 위해 필요한 벤더-프리픽스라는 녀석이었습니다.

CSS 표준안으로 확정되지 않았거나 브라우저가 실험적으로 제공하는 기능을 쓸 때, 벤더 프리픽스를 사용하면 그 기능이 포함되어 있지 않은 구형 브라우져에서도 쓸 수 있게 해줍니다.

각 브라우저 별 벤더 프리픽스는 다음과 같습니다.

접두어	브라우저
-webkit-	구글, 사파리 브라우저
-moz-	파이어폭스 브라우저
o-	페라 브라우저
-ms-	익스플로러 (대부분 생략함)

대안

그러나 CSS 속성들을 사용할 때마다 매번 지원 범위를 확인하고 벤더 프리픽스를 붙여주는 것은 귀찮을 뿐더러, 나중에 그 속성들이 CSS 표준안으로 채택되면 다시 벤더 프리픽스를 지우는 일도 만만치 않을 것입니다.😐

다행히 벤더 프리픽스를 다는 수고로움을 덜어줄 방법들이 있는데요, 크게 스크립트를 이용한 방법과 CSS 코드를 복사-붙여넣기 하면 자동으로 벤더 프리픽스를 붙여주는 방법이 있습니다.

스크립트 사용하기

Prefix-Free: https://projects.verou.me/prefixfree/

스크립트를 사용하는 방법 중에 가장 간단하게 벤더 프리픽스를 붙여주는 사이트입니다. 사이트에 접속해서 스크립트를 다운로드 받은 후에 HTML head에 연결시켜주면 됩니다.

복사-붙여넣기

Autoprefixer CSS online: https://autoprefixer.github.io/

CSS 코드를 붙여넣으면 자동으로 벤더 프리픽스를 붙여주는 사이트입니다. 말 그대로 굉장히 간단한 방식인데요, 저 같은 경우에는 스크립트를 연결했을 때 벤더 프리픽스가 잘 적용되었을지 걱정하지 않고 결과를 바로 눈으로 볼 수 있어서 더 선호하는 방식입니다.👀

오늘은 생김새와는 달리 그리 어렵지 않은 벤더 프리픽스에 대해 알아보았는데요, 다음에도 다른 주제로 포스팅하겠습니다!