벤더프리픽스
세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다. 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.
.box{
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}이렇게 프리픽스를 사용해 웹킷(-webkit-)과 오페라(-o-)) 브라우저를 위한 별도의 트랜지션(Transition) 속성을 추가한 경우, 벤더 프리픽스 "-webkit"을 인식하는 브라우저에서는 앞서 정의된 "-webkit-transition" 속성이 적용되어 0.5초 동안 트랜지션이 적용됩니다.
단, CSS 속성은 속성이 오는 순서에 따라 순차적으로 적용되기 때문에 벤더 프리픽스가 붙은 속성과 표준 속성이 모두 있을 경우 나중에 나오는 속성이 적용됩니다.
벤더 프리픽스를 사용해야 하는 경우, 벤더에 따라 속성 값이 달라지는 경우가 있는데, 일일이 다 외울 수는 없습니다.
벤더 프리픽스가 주로 사용되는 속성은 변형(Transform), 변환(Transition), 애니메이션(Animation), 그라데이션(Gradient) 등 사용 빈도가 낮은 속성들입니다.
이 속성들은 속성 값 자체가 복잡하기 때문에 벤더 프리픽스를 자동으로 추가해주는 서비스를 이용해 사용하는 것을 추천합니다.
