2008년 4월 13일 일요일

IE6에서 아무런 문제 없도록 블로그 약간 리뉴얼 + α

원래 블로그 헤더 이미지로 투명 PNG를 사용했습니다.
IE6에서는 투명 PNG를 엉망진창으로 표시하는 문제가 있기는 했지만, ie7-js를 활용해서 IE6에서 투명 PNG를 IE6에서 보이기를 이용해서 무난히 표시했다고 생각했습니다.
(이 방법을 사용하면 화면의 출력은 깨끗하지만, 출력이 약간 느려지는 문제가 있습니다)

하지만, CSS Naked Day에 참가하면서 CSS를 제거한 상태에서 IE6에서 띄워보니 문제가 컸습니다.
네. CSS를 제거했으면 데이터만 빨라당 출력되어야 하는데, 느린 출력이라뇨…

아직까지도 (특히 우리나라에서) 압도적으로 높은 IE6의 점유율을 생각해보면  출력이 늦다는 것은 심각한 문제인데 말이죠.

그리고, 이미지를 바꾸는 김에 몇 가지 생각한 기능들을 추가하기로 했습니다.





1. 헤더 이미지를 투명 GIF로 교체

사용자 삽입 이미지

간결하고 명확한 글꼴을 고민하던 중 스타워즈 글꼴을 이용하기로 했습니다.
위 아래 STARWARS를 넣을까도 했지만, 스타워즈 전문 블로그가 아니라 그건 하지 않았습니다. -.-;;;


2. 링크 예쁘게 만들기

사용자 삽입 이미지

예전부터 LoveBe.Net궁극의 힘을 보면서 언젠가는 훔쳐오려고 노리던 무공비급을 드디어 훔쳐왔습니다.
(아이콘 파일은 약간 바꿨는데, 다행히 주화입마는 피한 것 같습니다. ^^;;;)
상세한 설명은 LoveBe.Net - Tistory 링크 이쁘게 만들기를 참고하시면 됩니다.


3. 이모티콘 삽입기능 보강

사용자 삽입 이미지

역시 LoveBe.Net궁극의 힘을 통해서 알게 되고, 훔쳐온 비급입니다.
이 비급을 적용한 후에 댓글/방명록 이모티콘 표시 플러그인을 적용하면 깜찍한 효과를 볼 수 있습니다.
역시, 상세한 설명은 LoveBe.Net - 이모티콘 삽입 기능을 참고하시면 됩니다.





전세계의 웹에서 널리 사용되고 있는 투명 PNG가 유독, 우리나라에서만은 아직 시기상조인 것 같습니다.
빨리 IE6이 멸종(?)되는 날이 오기를…



 

댓글 4개:

  1. 투명이미지는 아직 gif로 많이 만드는 것 같습니다.

    특허권문제와 256색의 제한 때문에 png가 호평을 받고 있긴 한데 우리나라의 웹디자이너들은 아직도 gif를 많이 사용하는 것 같습니다.

    답글삭제
  2. @이정일 - 2008/04/13 23:27
    가장 큰 문제는 투명 PNG(정확히는 알파채널 PNG)를 IE6에서는 정상적으로 렌더링하지 못한다는 점입니다.

    (IE7, FF, 사파리, 오페라 등등 대부분의 브라우저는 별 문제 없이 렌더링해줍니다 --; )

    몇가지 꼼수가 있기는 하지만, 어느것이나 속도 문제가 크기 때문에 적용하기는 불편하고 그러다 보니까 웹디자이너 분들은 투명 GIF에 올인하시는 것 같습니다.



    MS는 강제로 IE7 업뎃을 실시하라! (참, 하고 있던가요?)

    답글삭제
  3. :) 맞아요. IE6이 참 문제가 많죠.ㅋ 웹표준도 엉망이고 지원못하는 기능도 많고...

    GIF는 투명이긴한데 완전한 투명이 아니더라구요.

    얼렁 완전한 투명을 지원하는 PNG가 널리 쓰여야될텐데...ㅎㅎ

    답글삭제
  4. @궁극의힘 - 2008/04/16 16:29
    헉 --; 찔려...

    지금 이모티콘 색깔 바뀌는 것 연구하면서

    궁극의힘 블로그를 분석(--; )하고 있었습니다.



    끝나면 자수하려고 했는데, 마침 글 주시니 여기서 자백합니다.

    답글삭제