CSS 다양한 브라우저에 대응하기(1)

웹 프로그래밍의 재미진 점은 내가 만든 콘텐츠를 사용자가 어떤 브라우저로 접근하게 될지 100% 알지 못한다는 것이 되겠습니다. 개발자의 머리털이 슝슝 빠지게 만드는 부분이긴 한데요. 물론 콘텐츠 특성상 Flex라던지, Unity 같은 것을 이용해서 개발되어 졌다면 사실 브라우저별 특별하게 신경쓸 부분은 없겠습니다만.. 순수하게 HTML을 이용한 콘텐츠라 한다면, 이거슨 상당한 싱경을 써야 하는 부분이 아닐까 싶습니다.

우리가 사용하는 브라우저는 재미지게도 각기 개성이 조금식 다릅니다. 에.. 스톼일~ 이 서로 다르달까요.. 그래서 같은 CSS를 적용해도 미묘하게 다르게 보이는 경우가 종종 있습니다. 초기 셋팅값이 달라서 생기는 문제라던지... 미묘하게 다른 좌표계라던지요.. 이런 문제들을 해결 하기 위해서
CSS를 임의로 재 셋팅하여 초기 값을 동일하게 잡아주는 방법이 있습니다.

이 방법에 대해서는 사람들마다 호불호가 갈리긴 합니다. 굳이 그렇게 할 필요가 있는가, 속도가 느려진다. 내지는 문제가 되는 부분만 따로 잡아서 수정하면 된다. 라고 합니다만, 이게 일이 닥치고 뭔가 여기저기서 브라우저마다 보이는게 미묘하게 다르다는 연락이 날라와서 수정 할때마다 급 넘쳐 흐르는 짜증을 주체하기 어렵더군요...(이미 적용되어 론칭된 콘텐츠는 건들이기가.. @_@;;)

일단은 여러가지 방법이 있는데, 야후에서 공개 해놓은 방식을 하나 소개 해볼까 합니다.

http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css 

/* Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.9.0 */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

CSS 코드를 보시면 알겠지만.. html내에서 사용되는 전반적인 테그의 스타일의 초기값을 리셋 해버리는 방법입니다. 이렇게 모든 브라우저에서 리셋 하고 시작을하면 동일한 CSS 셋팅 상태에서 적용하고자 하는 CSS를 적용 할 수 있으니 손쉽게 CSS를 동일하게 적용 할 수 있게 되겠습니다.

야후에서 제공하는 방법 외에도 에릭마이어의 방식도 있습니다. 두개의 차이점을 자세히 살펴보질 않아서 어떤 차이점이 있는지 잘 모르겠습니다.(아시는 분은 좀 알려주세요 @_@;;)
한번 CSS 코드를 두개다 살펴 보시고 맘에 드는 것을 선택하여 사용 하시면 되겠습니다.