웹접근성 고려한 크로싱 브라우저 CSS 벤더 프리픽스 webkit,o,moz,ms 뜻
CSS3를 배우면서 또 하나 알게된 사실이 있습니다. 바로 "호환성"에 대한 부분입니다. 컴퓨터 하드웨어도 소위 말하는 궁합이라는게 있습니다. 어떤 제품끼리는 잘 맞고, 또 어떤 제품끼리는 극과 극이라는 평가가 있지요. 웹 언어의 세계도 비슷한 상황이 존재합니다. 아시다시피 브라우저의 종류가 생각보다 많습니다. 현재 국내에서는 마이크로소프트 인터넷 익스플로러를 가장 많이 사용하는 브라우저이며 그 뒤를 구글 크롬이 바짝 추격하고 있습니다. 이밖에도 오페라, 파이어폭스, 사파리 등등이 있습니다.
웹언어란 말 그대로 웹페이지를 구성할 때 사용되어지는 프로그래밍 언어입니다. 브라우저 또한 이 웹언어의 영향을 많이 받는데, 버전에 따라서 또는 위에서 언급한 브라우저 프로그램에 따라서 약간씩 차이가 있습니다. 지금은 HTML버전도 5까지 올라왔고, CSS또한 3까지 발전하면서 그 경계가 거의 허물어져가고 있지만, 여전히 미세한 차이는 존재합니다. 그래서 이 경계를 허물어주기 위해 CSS의 요소 중 일부에 webkit, o, moz, ms 같은 접두사를 붙이곤 합니다. 이 접두사를 밴더(밴딩) 프리픽스 라고 하며, 브라우저의 호환성을 위해 밴더 프리픽스로 마크업 하는것을 크로싱 브라우저 (Crossing Browser) 라고 합니다. 그럼 각 밴딩 프리픽스의 의미를 알아보겠습니다.
-webkit- : 구글, 사파리 브라우저
-moz- : 파이어폭스 브라우저
-o- : 오페라 브라우저
-ms- : 익스플로러 (대부분 생략함)
그렇습니다. 각 접두사는 결국 해당 브라우저에서 CSS 스타일 시트 요소를 인식시키게 하기 위한 수단입니다. 꼭 크로싱 브라우저를 해야만 하는건 아닙니다. 혹시라도 싶은 마음에서, 호환성을 위해서 마크업을 하는 것 입니다. 아래의 코드를 봐주시길 바랍니다.
<style>
#bg {
width: 500px;
height: 100px;
background: -webkit-linear-gradient(left, red, yellow);
background: -moz-linear-gradient(left, red, yellow);
background: -ms-linear-gradient(left, red, yellow);
background: -o-linear-gradient(left, red, yellow);
}
</style>
<div id="bg"></div>
예시에서는 백그라운드 그라디언트에 대해서 마크업을 하고 있지만, 접두사를 4개를 마크업 하면서 같은 속성을 4번 반복하고 있습니다. 이렇게 하시면 다양한 브라우저에서 접속해도 div 안의 그라데이션이 정상적으로 출력을 하게 될 것입니다. 물론 모두 최신버전이라면 크게 문제가 될 건 없겠지만, 사용자의 환경은 저마다 다르므로 호환성을 최고로 해두는것이 접근성에서 유리할 것 입니다. 결과 화면은 아래와 같습니다.
See the Pen Crossing Browser : Background gradient (linear,left) by rgy0409 (@rgy0409) on CodePen.
이렇게 정상적으로 그라데이션이 출력이 되고, 여러 브라우저에서 접속을 해도 정상적으로 보여지게 될 것입니다. 하지만 너무 구형의 브라우저에서는 정상 출력이 되지 않을 수 있으며 버전이 낮아도 마찬가지로 정상 출력이 안 될 수도 있습니다. 그러니 우리 모두 최신 버전의 버전을 사용합시다! 기왕이면 크롬을 씁시다. 참고로 밴더 프로픽스를 많이 사용하는 요소가 바로 백그라운드 그라디언트 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
