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

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

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

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

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

---

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

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


2. 링크 예쁘게 만들기

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


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

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

---

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



 

투명 PNG를 IE6에서 보이게 하는 방법 소개 #1 : 어려운 방법

IE6에서는 이상하게 나오는 투명 PNG

위의 이미지는 Internet Explorer 6.0에서는 정상적으로 보이지 않습니다.
글자의 주변이 투명한 투명 PNG를 IE6에서는 제대로 그려내지 못하기 때문입니다.
(정확히는 투명 PNG가 아니라 알파채널이 있는 PNG로 불러야 합니다. 각 점별로 불투명도를 0~255 단계로 정할 수 있기 때문입니다)

제 블로그의 헤더도 투명 PNG를 사용합니다.
그런데, IE6에서 PNG를 잘 그리지 못하기 때문에 IE6 이하에서는 투명 PNG 대신에 투명 GIF를 출력하도록 했습니다.
이렇게 브라우저의 버전에 따라 다른 이미지를 출력하게 하려면 쉬운 방법은 없고, 자바스크립트로 떡칠을해야 됩니다.
※ 무조건 투명 GIF를 사용해도 되지만, 알파채널이 적용된 투명 PNG보다 화질이 훨씬 떨어지므로 PNG를 선호합니다

이런 기능을 부여하려면 아래와 같은 절차에 따라서 작업하면 됩니다.

---

1. 우선, IE의 버전을 알려주는 함수를 헤더에 삽입합니다.

<!-- IE 버전 확인 함수 -->
<script type="text/javascript">
<!--
function getIEversion()
{
   var version;
   if (navigator.appVersion.indexOf("MSIE")!=-1)
   { temp=navigator.appVersion.split("MSIE"); version=parseFloat(temp[1]); }
   else version=999.0;
   return version;
}
-->
</script>
<!-- IE 버전 확인 함수 -->

2. 스킨 파일(skin.html)에서 투명PNG를 뿌려주는 코드를 찾습니다

아래와 같은 코드를 찾는 것입니다. testtrans.png가 투명 PNG 파일입니다.

<img src="./images/testtrans.png" width="331" height="69" usemap="#_bnl_title">

3.  이 투명 PNG와 같은 크기의 투명GIF 파일을 만듭니다

Paint.NET 과 같은 프로그램에서 PNG 파일을 읽은 뒤 GIF 파일로 저장하면 투명 GIF로 만들어줍니다.
Paint.NET에서는 기본적으로 투명도가 128 이상이면 투명으로, 128 이하면 불투명으로 만듭니다.
여기서는 testtrans.gif를 만든 것으로 가정하겠습니다.


4. 투명 GIF를 업로드합니다


5. <img> 코드를 아래와 같이 고칩니다.

<script type="text/javascript">
<!--
document.write('<img src="./images/');
if (getIEversion()<=6.0) document.write('testtrans.gif');
else  document.write('testtrans.png');
document.write('" width="331" height="69" usemap="#_bnl_title">');
-->
</script>

---

많이 복잡하죠? 복잡하기만 할 뿐 아니라 느리기까지 합니다.
자바스크립트는 클라이언트 쪽에서 동작되기 때문에, 이런 식으로 구현하면 PC의 속도가 조금만 느려도 버벅거리는 현상이 비일비재합니다.

물론, 복잡하기 때문에 변환하는 과정도 어질어질하고, 버그가 발생할 가능성도 높습니다.

훨씬 쉽고 간결한 방법은 #2 : 쉬운 방법에서 소개하겠습니다.