친절한효자손 취미생활

CSS3를 배우면서 또 하나 알게된 사실이 있습니다. 바로 "호환성"에 대한 부분입니다. 컴퓨터 하드웨어도 소위 말하는 궁합이라는게 있습니다. 어떤 제품끼리는 잘 맞고, 또 어떤 제품끼리는 극과 극이라는 평가가 있지요. 웹 언어의 세계도 비슷한 상황이 존재합니다. 아시다시피 브라우저의 종류가 생각보다 많습니다. 현재 국내에서는 마이크로소프트 인터넷 익스플로러를 가장 많이 사용하는 브라우저이며 그 뒤를 구글 크롬이 바짝 추격하고 있습니다. 이밖에도 오페라, 파이어폭스, 사파리 등등이 있습니다.


웹언어란 말 그대로 웹페이지를 구성할 때 사용되어지는 프로그래밍 언어입니다. 브라우저 또한 이 웹언어의 영향을 많이 받는데, 버전에 따라서 또는 위에서 언급한 브라우저 프로그램에 따라서 약간씩 차이가 있습니다. 지금은 HTML버전도 5까지 올라왔고, CSS또한 3까지 발전하면서 그 경계가 거의 허물어져가고 있지만, 여전히 미세한 차이는 존재합니다. 그래서 이 경계를 허물어주기 위해 CSS의 요소 중 일부에 webkit, o, moz, ms 같은 접두사를 붙이곤 합니다. 이 접두사를 밴더(밴딩) 프리픽스 라고 하며, 브라우저의 호환성을 위해 밴더 프리픽스로 마크업 하는것을 크로싱 브라우저 (Crossing Browser) 라고 합니다. 그럼 각 밴딩 프리픽스의 의미를 알아보겠습니다.


-webkit- : 구글, 사파리 브라우저

-moz- : 파이어폭스 브라우저

-o- : 오페라 브라우저

-ms- : 익스플로러 (대부분 생략함)


그렇습니다. 각 접두사는 결국 해당 브라우저에서 CSS 스타일 시트 요소를 인식시키게 하기 위한 수단입니다. 꼭 크로싱 브라우저를 해야만 하는건 아닙니다. 혹시라도 싶은 마음에서, 호환성을 위해서 마크업을 하는 것 입니다. 아래의 코드를 봐주시길 바랍니다.


    
    
    크로싱 브라우저
    


    

예시에서는 백그라운드 그라디언트에 대해서 마크업을 하고 있지만, 접두사를 4개를 마크업 하면서 같은 속성을 4번 반복하고 있습니다. 이렇게 하시면 다양한 브라우저에서 접속해도 div 안의 그라데이션이 정상적으로 출력을 하게 될 것입니다. 물론 모두 최신버전이라면 크게 문제가 될 건 없겠지만, 사용자의 환경은 저마다 다르므로 호환성을 최고로 해두는것이 접근성에서 유리할 것 입니다. 결과 화면은 아래와 같습니다.


See the Pen Crossing Browser : Background gradient (linear,left) by rgy0409 (@rgy0409) on CodePen.


이렇게 정상적으로 그라데이션이 출력이 되고, 여러 브라우저에서 접속을 해도 정상적으로 보여지게 될 것입니다. 하지만 너무 구형의 브라우저에서는 정상 출력이 되지 않을 수 있으며 버전이 낮아도 마찬가지로 정상 출력이 안 될 수도 있습니다. 그러니 우리 모두 최신 버전의 버전을 사용합시다! 기왕이면 크롬을 씁시다. 참고로 밴더 프로픽스를 많이 사용하는 요소가 바로 백그라운드 그라디언트 입니다. 끝.




이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.