블로그 팁 - 브라우저 호환성 확인 하시나요?
브라우저 시장이 마이크로 소프트의 인터넷 익스플로러 위주에서 파이어 폭스나 구글의 크롬, 사파리, 혹은 다른 모바일 웹 브라우저로 많이 옮겨 가고 있습니다. 그러면서 인터넷 익스플로러가 지배하고 있던 웹 세계의 문제점이 드러나고 있습니다. 참고로 저도 올해부터 파이어 폭스라는 다른 웹 브라우저를 쓰고 있습니다. 그러다가 오늘에서야 문제가 있다는 것을 발견하게 되었네요.
 (photo of Stormtroopers watching a photo of Stormtroopers)² by Stéfan    |
다르게 보이는 스킨
얼마전에 블로그 하단의 추천 버튼을 정리했습니다. 재아님의 포스트를 응용해서 블로그 하단의 다음뷰 추천, 믹시 추천 위젯을 정리하고 빈 공간에 링크프라이스 CPC 광고를 게재했습니다. <fieldset> 태그를 이용해서 다음뷰 구독 버튼도 추가 했구요. 나름 깔끔하게 정리해 놨었습니다.
파이어 폭스에서는 이렇게 보이거든요. ㅎ 그래서 만족스럽게 몇 일을 달고 있었습니다. 그러다가 오늘 인터넷 익스플로러 8을 이용해서 블로그에 접속해보니..
이 따위로 깨져 있었떤 것입니다. 황당했죠 ㅋㅋ
제가 주로 사용하는 웹 브라우저인 파이어 폭스에서는 깔끔하게 안쪽의 내용들의 사이즈에 맞게 겉을 둘러싸고 있는 테두리를 확장시켜 줬지만 이 놈의 인터넷 익스플로러는 지정해 준 사이즈 그대로 반영하고 있었습니다. 안에 뭐가 들어 있던 상관안하고 말이죠 ㅎ
크롬이나 사파리, 혹은 모바일 웹 브라우저에서는 어떻게 보일지 잘 모르겠지만 당황 스러웠습니다.
스킨 편집으로 다시 들어가서 <fieldset> 태그의 속성을 조금 조절해 준 뒤에야 파이어 폭스와 똑같이 보이게 되었습니다. 인터넷 익스플로러로 무심결에 들어와 보지 않았더라면 흉물스럽게 계속 남아 있을 뻔 했습니다. 크롬이나 사파리도 확인해 봐야겠네요.
 |
왜 그럴까?
이런 브라우저 간의 차이는 왜 발생 할 까요? 여기에는 사연이 있는데, 우리가 배우고 있는 HTML의 표준과 관계가 있습니다. 넷 스케이프와 인터넷 익스플로러가 서로 싸우던 고대의 웹 브라우저 시대에는 표준이 없었습니다. HTML 파일을 어떻게 표현 해야 한다는 표준이 없었기 때문에 같은 HTML 파일을 가지고 두개의 브라우저가 서로 다르게 표현 하는 상황이 계속 되었죠. 후에 웹 표준이 제정되어, 웹 브라우저간의 해석 차이가 줄어들긴 했지만 아직도 남아 있습니다.
똑같은 HTML 코드를 두 웹 브라우저가 다르게 해석하는 것 때문에 웹 프로그래머들이 골치를 썪고 있는 상황이 많은데요. 특히 인터넷 익스플로러는 버전 6까지 웹 표준과 다소 다른 동작을 해서 문제가 있었습니다. 웹 프로그래머들이 인터넷 익스플로러에 맞춰야 할 지 웹 표준에 맞춰야 할 지를 두고 많이 고민을 했었는데요. 우리나라 같은 경우엔 웹 표준이고 뭐고 무조건 인터넷 익스플로러에 맞춰야지요 ㅎ
인터넷 익스플로러의 버전이 높아짐에 따라 이런 차이는 거의 없어졌지만 아직도 있을 줄은 몰랐네요. ㅎ
 Un Indizio ! - A Clue by mastrobiggo |
블로그 스킨을 바꿀 때에 적어도 한 두번은 여러분의 웹 브라우저가 아닌 다른 웹 브라우저로 보시기 바랍니다. ^^ 특히 우리나라를 점령하고 있는 인터넷 익스플로러는 꼭 확인해야 할 부분인 것 같습니다. 블로그는 내가 보기 위한 것이기도 하지만 그 보다 방문자에게 보여 주기 위한 공간이기도 하니까요 ㅎ