여러가지 브라우저 최적화 하기..

Reviews & Design & Swim
About me /Contect/Admin

TISTORY
예전 약 7년전 웹홈페이지를 아주 조금 만들어 본적이 있어서 블로그는 간단하게 할수 있지 않을까 하고 생각을 했는데.. 이건 나의 착각이었다.
 
웹2.0 시대를 맞이 하여 XHTML은 나에게 너무 나도 생소한것이고 익스플로러만 있었던 그당시에는 (물론 있었겠지만 전세계적으로..사실 그때 는 익스플로러만 알았다) 그래서 최적화 하기가 참으로 편했다. 하지만 지금은 브라우저의 종류가 너무나도 많다.

우리나라에서 가장 많이쓰는 마이크로 소프트의 익스플로러 에서부터 구글의 크롬, 애플의 사파리, 그리고 파이어 폭스까지 많다. 아무래도 더 있겠지만 일단 대략적으로 이렇게 많다. 그러다 보니 문제들이 발생이 되었다. 

서론이 너무 길었다. 웹폰트를 사용하고 있어서 익스플로러만을 사용하면 괜찮지만 사파리나 파폭으로 들어오시는 분들은 폰트가 커지거나 맞지 않아 가독성에 문제가 생기는 부분이 생겼었다.
 

파폭에서의 폰트

 

익스플로러에서 폰트


웹폰트는 우리글닷컴에서 판매하고 있는 우리돋음90c1으로 Condense 된 폰트입니다. 그래서 수치가 익스에선 작게 보이지만 파폭에서는 너무크게 보인다. 일단 다른 레이아웃도 잘못되어있었지만 가장큰 문제점이 바로 글씨의 크기였다. (나에게는 말이다.) 그래서 해결법은 다음같다.

스타일시티를 추가해주는것 (잠시 기다리시면 코드가 뜹니다.)

 
  <!--[if lte IE ]>
           
 <![endif]-->

위에 코드는 익스와 다른 브라우져의 차이를 두기 위한것입니다. 익스플로러 버전별로 다른게 해주실려면

 
  <!--[if IE 6]>
           
 <![endif]-->
<!--[if get IE 7]>
           
 <![endif]-->

바로 CSS라고 불리는 스타일시티를 새로 만들어서 적용시켜 주는 것 이다.위의 내용을 스킨의 html에 Link rel 를 찾아서 수정해 주시면 된다. 하지만 따로 CSS 를 만들어 줘야하기 때문에 메모장에서 기존의 스킨부분을 복사해서 복사 넣기 한 후 파일명 뒤에 .CSS 를 꼭 붙여 줘야하고 그것은 업로드 해주면 된다. 그래서 주소가 images 가 된다. 추가한 css 모든 파일들은 절대주소로 고쳐 주는 것이 좋다. 
절대 주소란?
 ./images 와 같이 앞 주소가 변하지 않는 주소로 예를 들어 네이버 로고를 예를 든다면 http://sstatic.naver.com/search/images11/logo_naver.gif 이것이 절대 주소이고 .images11/logo_naver.gif 가 변하는 주소이다(모라고 부르더라...)
브라우저 별루 자신이 적용하고 싶은 부분을 따로따로 설정해 주는 방법을 사용하면 된다. (이 작업이 참으로 고되다.)

많은 분들의 블로그 들을 들어가 보면 사이드 바가 없는 경우가 종종 있다. 그것은 코딩이 잘못되어져서 아래쪽으로 밀려 내려간 것이기 때문에 익스플로러 6.0 사용자에게 종종 나오는 현상이다. 위에 스타일 시티를 하나나 몇 개를 더 만들어서 사용을 한다는 것은 한번 수정할 때 두 번 내지는 3번을 더 수정해야하는 수고가 필요 할 만큼 고되다. 

정확한 코딩은 오류가 없다.

많은 전문가들은 이런 말을 한다. "제대로 된 코딩은 익스플로러나 버전을 따라서 변하지 않고 제대로 보인다."  하지만 우리 가 프로가 아닌 이상 저런 완벽한 코딩을 잘되어지지 않는 것이 보통이지 않은가, 그러니 고되더라도 위에 방법을 사용해서 블로그를 최적화 하는것이 검색최적화 보다 중요하다고 본다 주인장은 말이다. 

연관있는 콘텐츠