벤더 프리픽스가 뭔가요?

벤더 프리픽스는 브라우저마다 따로 놀던 CSS3의 속성을 각각의 브라우저들이 인식할 수 있게 해주기 위해서 만들어졌습니다.

CSS 표준안으로 확정되지 않았거나 특정 브라우저에서만 지원되는 CSS 속성을 사용하고싶을 때, 벤더 프리픽스를 사용하면 그 기능이 포함되어 있지 않은 브라우저에서도 사용할 수 있게 해줍니다.

벤더 프리픽스의 미래?

웹 브라우저 시장의 경쟁이 구글 크롬 중심으로 정리가 되고, 주요 웹 브라우저들이 최신 CSS 표준을 빠르게 지원하면서 벤더 프리픽스의 필요성이 점점 줄어들고있습니다. 하지만 CSS는 HTML과 달리 아직 웹 표준이 정해지지 않았고, 모든 브라우저가 같은 방식으로 지원하는 것이 아니기 때문에 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해 아직 벤더 프리픽스에 대해 알고있어야 할 필요가 있습니다.

벤더 프리픽스를 사용하는 방법

벤더 프리픽스를 사용하는 방법은 간단합니다. 아래 예제 처럼 속성 앞에 브라우저의 접두어를 넣은 코드를 추가해주면 됩니다.

-webkit-border-radius: 10px; //크롬, 사파리
-moz-border-radius: 10px; // 파이어폭스
-o-border-radius: 10px; //오페라
-ms-border-radius: 10px; //인터넷 익스플로러
border-radius: 10px;

CSS 속성은 속성이 오는 순서에 따라 순차적으로 적용되기 때문에 벤더 프리픽스가 붙은 속성과 표준 속성이 모두 있을 경우 나중에 나오는 속성이 적용됩니다.

표준 속성을 가장 마지막에 둔다는 것 정도는 주의하셔도 좋을 것 같습니다.

하지만 CSS 속성들을 사용할 때마다 매번 벤더 프리픽스를 붙여주는 것은 귀찮을 뿐더러, 그 속성들이 추후에 CSS 표준안으로 채택되면 다시 벤더 프리픽스를 지우는 일도 만만치 않기 때문에 CSS 코드를 넣으면 자동으로 벤더 프리픽스를 붙여주는 사이트를 소개해드리려고 합니다.

Autoprefixer CSS online: https://autoprefixer.github.io/
벤더 프리픽스를 적용한 결과를 바로 눈으로 볼 수 있어서 유용하게 사용할 수 있습니다.