NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


IE6에서 PNG-24의 ‘투명/반투명’ 색을 바르게 표현하기.

본문 건너 뛰기

nmind 님께서 포스팅 해주신 ‘오늘의 링크’ 로부터 ‘IE6에서 PNG파일을 사용할 수 있게 해주는 스크립트‘ 라는 글을 보고 이를 적용하는 방법을 풀어 보았습니다. 이 팁은 IE 6.x 버전의 웹 브라우저에서 PNG-24 파일의 투명/반투명 색을 회색으로 처리해버리는 비표준 렌더링 방법을 개선하기 위한 해결방법 입니다. 기존의 스크립트가 단순하게 <img> 태그에만 적용되는 팁이었다면 이 방법은 CSS 의 Background 속성에도 적용이 가능하다는 점 때문에 높은 점수를 주고 싶습니다. PNG-24 이미지는 GIF와 달리 투명색 뿐만아니라 반투명색의 투과까지 지원을 해주기 때문에 웹 디자이너 입장에서 그 활용가치가 매우 높다고 말씀드릴 수 있겠습니다. 단점은 GIF 이미지보다 PNG-24 파일의 용량이 약 2배정도 증가한다는 점인데 화면을 PNG-24 으로 도배하지 않는 이상 그다지 걱정할 만한 트래픽 증가는 아닌것 같습니다. 하지만 되도록 큰 이미지에는 PNG-24의 사용을 자제하시는게 좋겠지요.

IE 6.x 버전에서 PNG-24 파일의 투명/반투명 색을 바르게 렌더링 하기 위한 CSS/Javascript 적용방법은 다음과 같습니다.

  1. iepngfix.htc 파일을 다운로드 한 다음 웹 서버의 원하는 폴더에 올립니다.
  2. 1*1px 짜리 투명색으로 처리된 blank.gif 파일을 웹 서버의 원하는 폴더에 올립니다.
  3. iepngfix.htc 파일을 열어서 blank.gif 파일의 경로를 바르게 변경합니다. if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif‘; // 1×1px 짜리 투명 이미지(blank.gif)의 경로를 변경.
  4. 모든 페이지에서 참조하는 css 파일을 열고 원하는 class 에 {behavior:url(iepngfix.htc);} 속성을 추가한 다음 iepngfix.htc 의 경로를 바르게 변경해 줍니다. .iePngFix {behavior:url(iepngfix.htc);} /* iepngfix.htc 파일의 경로를 바르게 변경합니다 */
  5. 해당 class가 적용된 PNG-24 이미지의 투명/반투명 색이 IE 6.x 버전 에서도 정상적으로 렌더링 됩니다.

IE 6.x 정식버전에서의 렌더링 테스트 결과는 다음과 같습니다.

예제에 사용된 이미지는 포토샵에서 Alpha 50%가 적용된 것입니다. 이미지의 투명/반투명 영역이 체크무늬패턴의 배경을 어떻게 투과시키는지 확인하시면 됩니다. 특히 그림자 부분을 유의깊게 보시구요. 위아래로 같은 이미지이며 좌우로는 파일 형식이 다릅니다. 아래 화면은 IE 6.x 가 정상적으로 설치되어 있지 않은 분들을 위하여 센스있게 미리 캡쳐된 화면입니다. 정상적으로 설치된 IE 6.x 가 깔려있다면 실제로 코딩된 화면을 직접 확인 해보세요. IE6.x Standalone 버전 에서는 아래 화면 대로 렌더링 되지 않으며 스크립트오류까지 만나게 됩니다.

IE6.x 에서 PNG-24의 '투명/반두명' 색을 바르게 표현하기 렌더링 테스트 결과.

IE 5.x 까지 하위버전 호환되지는 않습니다. IE 6.x 버전만을 위한 것이지요. IE 7.x 부터는 이딴짓(?) 안해도 PNG 파일의 투명/반투명 색을 표준에 맞게 렌더링 해줍니다. 따라서 이 팁은 어디까지나 IE 6.x 의 브라우저 호환성을 유지하기 위한 방법이며 IE6.x 브라우저의 하위 호환성을 위하여는 IE8.x 버전이 나오기 전까지 이딴짓을 계속 해야 할 것으로 생각됩니다.

IE 6.x 렌더링 테스트 결과 발견된 문제점

  1. ‘회선속도가 느리거나 웹 문서의 용량이 커지는 경우’ 페이지가 완전히 로딩되기 전까지 투명/반투명 색이 잠깐동안 회색으로 나타나는 증상이 있습니다. 따라서 ‘저회선 사용자의 인터넷 환경’ 을 고려해야 한다거나 ‘포털’ 규모의 웹페이지에 사용하려는 경우 이를 심사숙고 해보아야 합니다. 한편 Apple Mac Pro, Mac OS X Leopard Sneak Peek 페이지 에서도 이 코드를 사용하고 있는것을 보면 그다지 Critical 한 측면은 아닌가 봅니다.
  2. .iePngFix 라는 class 가 적용된 배경이미지의 반복(repeat, repeat-x, repeat-y)과 위치값(left, right, top, bottom & offset value) 적용되지 않습니다.(위 background 렌더링 테스트 결과 참조)
  3. <img> 태그에 padding 값을 주게 되면 padding 값 만큼 PNG 이미지의 크기가 늘어나는 형태로 잘못 렌더링 됩니다. (위 <img> 렌더링 결과 참조)
  4. 2~3번 같은 경우 때문에 공용선택자 ‘*’ 에 behavior 를 적용하는 방법은 지양할 수 밖에 없습니다. repeat 시킬 필요가 없고 padding 값을 줄 필요가 없는 PNG-24 이미지에만 class 를 주어서 현재의 스크립트를 개별적으로 적용 하는 방법을 권장합니다. 사실 PNG-24를 이용하여 투명한 영역을 제대로 렌더링 시켜야 하는 경우는 많지 않으므로 역시 class 를 이용하는 방법을 권장합니다. (X) * {behavior:url(iepngfix.htc);} (O) .iePngFix {behavior:url(iepngfix.htc);} 그럼에도 불구하고 이를 공용선택자 ‘*’ 에 일괄 적용하는 것이 나은 케이스라고 판단되면 이 속성을 상속받을 필요가 없는 PNG-24 이미지에는 다음과 같은 class 로 처리하십시오. 이 코드는 공용선택자 ‘*’ 보다 아래쪽에 코딩되어야 우선순위를 갖습니다. 당연하죠. .iePngUnFix {behavior:none;}
  5. IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.
  6. behavior 라는 속성은 IE 전용 속성입니다. 이러한 속성을 다른 브라우저는 오류로 처리하지 않고 그냥 무시해 버리기 때문에 전혀 문제가 되지는 않습니다.

참조문서

관련 포스트

분류: CSS,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2006년 12월 15일, 20:51 | 정찬명 | 댓글: 57개 |
트랙백URI - http://naradesign.net/wp/2006/12/15/100/trackback/

57개의 댓글이 있습니다.

  1. 이흥섭 댓글:

    filt(src, ‘scale’); 이 부분에서 ‘scale’을 ‘image’로 바꾸면 늘어나지 않을 것 같은데. 확실치는 않아요.

  2. 정찬명 댓글:

    오~ 정말이네. 그런데 image 으로 변경하는 경우 다시 border 표현에 문제가 생기는구나. 이 부분을 주석으로 설명 추가해 두었다. Thank you very much!

  3. 신현석 댓글:

    우리나라면 클라이언트가 랜더링 중간에 회색으로 깜빡이는 이미지를 그냥 두지 않을 겁니다. :(

  4. 정찬명 댓글:

    그럼 그냥 뭐 회색으로 보이도록 냅두죠 뭐. ^^a

  5. hooney 댓글:

    해당 사이트에도 의견을 남겼지만, 웹디자이너에게 희소식이 될 내용입니다.

    다만, IE의 버그를 위해 IE 전용 스크립트로 해결하는 게 맞는 방법인지 고민되더군요.

    저는 IE6 이하 버전 전용 CSS에 IE 필터를 직접 적용하고 있습니다. IE 필터의 사용법이 어렵지 않고, 알파필터처럼 유용한 게 몇몇 있기에, IE 필터를 알아보는 것도 좋을 것 같아요.

    다만, 이런 류의 ie png hack들이 모두 배경 반복을 지원하지 않는 점이 아쉽습니다. 그라데이션 외곽선을 갖은 박스의 좌우측 이미지를 png로 반복시킬 수 있으면 정말 편할테니깐요~

  6. 정찬명 댓글:

    hooney 님 블로그에서 관련글이 있을꺼라고 생각하고 링크하기 위해 검색을 시도했는데 검색기능이 없더군요 ㅡㅜ; 너무 과감하신것 아닌가요.^^; 한 가지 궁금한건 IE 전용 CSS filter 적용시 한 가지 색으로만 처리된 투명영역이라면 그것을 보존해 줄것으로 추측(chroma filter 가 그런 식이죠. 특정색을 투명하게 만드는…)되는데 반투명(Alpha 50%) 영역까지 보존해 주는지 궁금합니다. 예를들면 ‘불투명-반투명-투명’ 으로 이루어진 그라디언트(또는 Anti-Aliasing) 에서 반투명 된 부분을 투과해주는지의 여부가 궁금합니다. 관련 포스트가 있다면 링크해주시면 좋겠습니다.

  7. 정찬명 댓글:

    참, 그리고 IE의 버그를 개선하기 위해 IE전용 속성을 사용하는 방법은 접근성에 문제가 없기 때문에 나쁘지 않다고 생각 합니다. 웹 표준을 지키려는 상위의 목적 가운데 하나가 바로 접근성(여기서는 Vendor간 호환)이기 때문에 접근성을 위해서라면 웹 표준을 위한 ‘Validation 검증’ 을 잠깐 희생시켜도 좋다는 생각입니다. 다시말해 ‘표준을 지키기 위한 표준이 아닌, 접근성을 지키기위한 수단으로서의 웹 표준’ 으로서 만족해야 하지 않을까 라는 생각을 가지고 있습니다. 이런 맥락에서 ‘hack 을 절대로 쓰지 마세요’ 라고 말했지만 Vendor 간 호환성을 보장해주는 hack 이라면 어쩔 수 없는 경우에는 사용해도 좋다고 생각합니다. Vendor 간 호환성을 높이는 것이 웹 표준보다 상위의 목적인 접근성을 높여주니까요. 논란의 여지가 있긴 합니다만 뭐 제 생각은 그렇습니다.

  8. nmind 댓글:

    역시 찬명님:-) 깔끔한 정리 감사합니다!

  9. hooney 댓글:

    제가 ie는 ie를 위한 comment 핵[if IE]을 권장한답니다. ie의 css 랜더링 버그나 기타 png 버그 같은 것들을 해결하는데 ie 전용 css로 해결하는 게 깔끔하다고 생가해요. 다른 일반적인 modern 브라우저들을 위한 css에 이런 hack들을 안쓰려고 한답니다.

    이는 제가 vaild css에 대한 강박관념일 수 있어요. 나만 이런 강박관념에 빠져있나 싶었더니, 위에 비헤비어를 만드신 분의 블로그에 답글을 써주신분 중에서 저와 같은 의견을 갖는 분이 상당히 있더라구요~

    어디까지나 기호의 선택이라고 봐요. css에서 중요한 건 vaild 보단 최적화라고 생각합니다. ㅎㅎ

  10. 정태영 댓글:

    png 가 gif 보다 나은 점은 알파채널만은 아닙니다. gif 는 256 color 밖에 지원하지 않지만 png 는 true color 를 지원하죠.

  11. 정찬명 댓글:

    훈님의견에 저도 공감합니다.
    IE 전용 property 와 CSS hack 의 사용에 대하여 더 많은 견해가 궁금한 분들이 계시다면 아래 글타래를 참조해 주세요.

    제목 : IE전용 CSS property 와 CSS hack 어떻게 생각하세요?
    http://forum.standardmag.org/viewtopic.php?pid=5089

  12. 정찬명 댓글:

    태영님, 부족한 글을 채워주셔서 감사합니다.^^a

  13. 김주원 댓글:

    위 소스를 사용할 경우에 문제점은…

    배경이 png일 경우 배경위로 form 태그등…input,check박스위로 마우스의 text 커서가
    나타나질 않네요. tab키로 이동할수밖에 없습니다.
    7.0에서는 문제없이 작동합니다만…어차피 7.0에서는 핵이 필요없으니
    제길슨 MS….

  14. 정찬명 댓글:

    김주원님께, 새로운 문제점이네요. Report 감사합니다.

  15. 정찬명 댓글:

    이 팁을 배경이미지 방식으로 사용하는 경우 배경이미지의 위치 값이 적용되지 않는다는 사실을 추가로 발견하였습니다. 이런 된장 이군요 ㅡㅜ;

  16. 문영신 댓글:

    PNG 에 클라이언트 이미지맵 링크를 적용할려고 했는데, (반)투명 부분에 링크가 제대로 안걸리는군요

  17. 정찬명 댓글:

    리포트 감사합니다. 아직 PNG에 이미지맵 걸어본 적이 없어서 모르고 있었습니다. 좋은 하루 되세요 ^^a

  18. freeism 댓글:

    “IE6.x Standalone 버전 에서는 아래 화면 대로 렌더링 되지 않으며”… 털썩;;;
    IE6 때문에 이걸 사용하려고 하고 있는데요… ㅠㅠ
    Standalone 버전에서는 확인 할 수 있는 방법이 없을까요?
    (VPC를 돌리기엔 집 컴은 리소스사 부족할 듯 하여 말이죠. ㅠㅠ 흑흑)

  19. 정찬명 댓글:

    freeism님, Multiful IE 에서는 정상적으로 렌더링 됩니다.

    Multiful IE 소개(IE 3~6 버전을 선택적으로 설치할 수 있는)
    http://tredosoft.com/Multiple_IE

    Download Multiple IE installer
    http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

  20. 조상현 댓글:

    개발자들이 모두 동참해서 IE를 지원하지 않는다면
    IE만 패치돼면 그만일텐데..
    ie가 참 사람 힘들게 하네요;;

  21. 조상현 댓글:

    로딩시에 잠깐보이는 회색바탕이 문제가 되는군요.
    처음에 아래처럼 display:none으로 두고
    img src=”/img/target.png” style=’display:none’

    behavior로 htc파일을 처리한후에

    javascript로
    img.style.display=’inline’;
    이렇게 할순 없을까요?

  22. 정찬명 댓글:

    조상현님 안녕하세요? 한번 적용해 보시고 저좀 알려주세요 ^^; 잘하면 훌륭한 팁이 될 수도 있겠네요~ 즐거운 주말 되세요 ^^

  23. 타나토스 댓글:

    참 좋은 소스를 잘 사용하고 있습니다.
    보여지는 것에 대한 문제는 전혀 없고 아주 잘됩니다.
    그런데 버튼으로 사용할려니까 버튼이 안잡히네요.
    png 배경 위의 png 버튼을 클릭할려면 안잡힙니다.
    이것 좀 해결 해주시면 정말 정말~ 고맙겠습니다 ^^

  24. 정찬명 댓글:

    타나토스님, 안녕하세요? IE에서는 png배경이 사용된 엘리먼트에 position 속성이 들어가게 되면 자식요소의 a에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position 속성을 제거하거나 또는 a요소에 position:relative 또는 position:absolute 속성을 부여해 보세요. 그래도 문제해결이 안되실때엔 URL을 공개해 주시면 한번 확인해 보겠습니다. 감사합니다.

  25. 김세민 댓글:

    저도 이 핵을 쓰고 있는데요…다른건 다 좋은데 반복이 안되는게 참 …
    이건 그렇다고해도 벡그라운드로 적용시 포지션 지정도 안되는건지? …
    아시는분 있을까요?

  26. 정찬명 댓글:

    김세민님, 안녕하세요.^^; 네, 반복도 안되고 배경이미지 위치도 지정이 안됩니다. ㅡㅡ;

  27. 김세민 댓글:

    허허 빠르게 답변글이 올라오네요
    감사합니다
    뭐하는 사이트인지도 몰르고 들어왔는데…(아직도 잘 모르지만)
    앞으로 자주 들어와야겠네요.
    반갑습니다

  28. 이원민 댓글:

    얼마전 봄눈님의 도움으로 새로운 IE6 버그 해결법 영문사이트 출처를 찾았습니다. IE6브라우저에 PNG이미지를 올바르게 표시하지 않는 버그를 간단하게 자바스크립트 호출만해도 해결가능하다는 얘기입니다. 더 기쁜 것은 백그라운드와 이미지둘다 적용이 된다 라는 점입니다. 테스트를 해봤지만 css 백그라운드 처리할 때 repeat-x, repeat-y 속성을 지원하지 않는 것 같군요. 구글키워드는 “Unitpngfix” 이겁니다. 이 것에 대한 추가적인 내용과 간단한 리뷰와 속도 테스트를 감히 부탁드려봅니다..^^

  29. 정찬명 댓글:

    소개해주신 PNG 기법은 얼마전에 ‘웹 초보의 Tech 2.1(http://www.choboweb.com/348)’ 이라는 블로그를 통해서 저도 접했습니다. 소스코드를 제공하는 곳은 ‘유닛인터렉티브, http://labs.unitinteractive.com/unitpngfix.php‘ 라는 곳이었구요.

    간단하게 살펴본 결과 MS 전용 filter를 사용하는 것과 투명한 gif 이미지를 하나 사용한다는 점 그리고 배경이미지의 반복과 배경이미지의 포지셔닝을 제어할 수 없다는 점이 동일했습니다.

    다른점은 iepngfix.htc 파일이 IE 6.0~5.5 버전을 모두 지원하는데 반해 최근 소개된 Unit PNG Fix는 IE 6.0 만을 지원하고 있다는 점이 달라서 저로서는 실무에 사용할 수 없었고 리뷰하지 않았습니다.

    또한 iepngfix.htc 파일의 경우 필요한 곳에만 적용하지만 unitpngfix.js 파일은 png 이미지가 사용된 모든(전경이든 배경이든) 엘리먼트에서 코드를 실행하기 때문에 미세하겠지만 속도차이는 발생할 것으로 추측됩니다.

    타겟 브라우저로서 IE 5.5를 고려하지 않아도 된다면 iepngfix.htc 방식보다 사용이 편리하기 때문에 꼭 나쁘다고 말씀드리기도 어렵네요 ^^

  30. 김도훈 댓글:

    글만 읽다가 혹시 몰라 글을 남겨봅니다.
    png활용을 해서 백그라운드를 이용하면 클릭이 정말 안되더군여 ㅜㅜ
    이런 부분이 안되서 백방소문해서 임시방편일지는 모르겠지만
    우선 a { position: relative } 를 사용하면 클릭이 되더군여
    아시겠지만…이것도 약간의 문제는 있는 것 같습니다.
    확인한 결과 모든 브라우저에서 적용이 되긴 하는게 아주 가끔 클릭이 안될 경우와
    레이어의 중첩일 경우 난감합니다.

  31. 정찬명 댓글:

    김도훈님, 코멘트 감사합니다. 말씀하신 PNG문제는 이 포스트의 본문에 언급되지 않았지만 댓글 http://naradesign.net/wp/2006/12/15/100/#tpg-comment-33207 부분에 한번 언급이 되었습니다. 말씀하신 대로 a 엘리먼트에 position:relative | absolute 를 부여해서 해결되는 경우도 있고 png 배경이 삽입된 엘리먼트에 position:relative | absolute 속성을 제거하면 해결되기도 합니다.

  32. 김도훈 댓글:

    앗 죄송합니다. 답글을 처음부터 읽는 버릇을 들여야겠습니다. ㅡㅡ;;
    감사합니다. ^^

  33. 정찬명 댓글:

    아이쿠, 죄송까지는 안하셔도 됩니다 ㅡㅡ; 이렇게 중요한 내용은 사실 본문에 수록되어 있어야 하는것이 맞는것 같습니다. 이 내용을 본문의 마지막 부분 ‘발견된 문제점 5번’으로 옮겼습니다. 감사합니다.

  34. 괄리자 댓글:

    검색해서 이렇게 저렇게 여기까지 왔네요.
    좋은 글 감사합니다.
    블로그에 링크만 살짝 걸을게요.

  35. […] 이미지를 전경과 배경에 동시에 사용하려는 경우 예전에 포스팅 했던 ‘IE6에서 PNG-24의 투명/반투명 색을 바르게 표현하기‘ 라는 글을 참조하시면 됩니다. 그런데 전경으로는 사용하지 않고 […]

  36. CEO 댓글:

    사이트 신규 개편중에있습니다.

    메뉴에 png 이미지를 사용하여 한 100여개의 png 이미지를 사용합니다.
    익스6에서는 png 이미지 로딩후 투명하게 처리하는과정에서 익스플로러6이 1초에서 길게는 5초정도가 멈춥니다.
    한번로딩이 된후에는 문제없이 잘 페이지가 표시되고 작동합니다.

    프레임구조에서야 한번만 로딩하면된다치지만 노프레임 구조에서는 계속하여 로딩하여야하기 때문에 해결이 불가능한것같습니다.

    혹시 좋은 팁 있으시면 알려주세요. ^^

  37. 정찬명 댓글:

    IR(Image Replacement) 기법을 추천 드립니다.
    어떤 구조로 되어 있는지 제가 알 수가 없기 때문에 딱 맞는 처방이 될런지는 확신할 수 없지만 한번 설명드려 보겠습니다.

    첫째, 해당 이미지를 모두 병합 한 다음 하나의 파일로 만듭니다. 일단 http 요청이 확연히 줄어들게 되어 조금 더 빨라질 것을 예상할 수 있습니다. 이게 첫 번째 핵심 입니다.

    둘째, 메뉴 항목을 [li][a][span]…[/span][/a][/li] 이렇게 마크업 합니다.

    셋째, a 엘리먼트에는 position 값을 기본값(static)으로 두고 병합된 이미지들을 배경으로 삽입합니다. background-image 및 background-position 속성을 이용하여 각각의 메뉴에 해당하는 이미지 부분이 배경으로 배치될 수 있도록 처리 합니다.

    넷째, span 엘리먼트에 각 이미지의 대체 텍스트에 해당하는 메뉴 텍스트를 넣고 position:relative; z-index:-1 속성을 부여합니다. a 엘리먼트 뒤로 span 엘리먼트와 텍스트가 숨을 것입니다.

    다섯째, 이 포스트 본문에서 제시한 iepngfix.htc 파일은 버리고 png를 배경으로만 처리하려는 경우에 필요한 팁을 찾아 사용하세요. ‘PNG-24를 배경으로만 사용하려는 경우의 CSS Hack’ http://naradesign.net/wp/2008/09/22/157/ 이게 두 번째 핵심 입니다.

    부디 성공하시길 빕니다. 다음부터는 예제 페이지도 링크해 주세요. ^^

  38. CEO 댓글:

    표로 레이아웃구성한데다 비표준 투성이인 페이지라 예제페이지 남기기가 부끄럽네요. ㅠ
    혹여나 다른분이 보실까 더더욱 부끄럽고,

    그래도 확실한건 png 이미지를 30개 이상사용하고 알파값이 적용되는 어떠한 소스를 사용하여도 익스6에서는 좋은컴퓨터에서도 1~2초의 브라우저 정지현상이 생기네요.
    지식인부터해서 반나절 넘게 찾아봤지만 다운걸린다는 글은 없는것같습니다.

    개인적으로 몰래 페이지 한번보여드려보겠습니다. ^^

    오버시 레이어로뜨는 숨겨진 부메뉴에 플래쉬로 메뉴(이것도 50여개정도)를 넣었더니 크롬에서는 잘되고 익스플로러에서는 흰색으로 나오다가 마우스를 올려야지 뜨고 파이어폭스 , 사파리에선 멈추어버리는현상때문에 그나마 이쁜 PNG 이미지를 사용하려고 해봤는데 PNG 역시 보통놈이 아니군요. ㅎ

  39. 정낙훈 댓글:

    반복되지 않는다는게 문제네요. 다른 스크립트를 보다가 그게 반복이 안되서 이 곳에 오면 그 해결법을 찾을 수 있을 것 같았는데 찬명님께서 딱 알려주시네요. 반복이 안되는 게 문제점이라고. OTL

  40. 정찬명 댓글:

    네, 반복이 안되는 것도 문제지만 큰 사이트에서는 저 htc 파일이 유발하는 트래픽도 문제랍니다. 되도록 아껴 쓰는게 좋을 것 같습니다. ㅡㅡ;

  41. 한준호 댓글:

    png파일이 배경으로 사용된 엘리먼트에서 absolute | relative 를 사용하여
    a 요소의 마우스 접근이 안될때는 absolute | relative 함께 주어 보라는
    팁을 보고 그대로 해봤는데

    그래도 링크가 먹질 않네요

    이런식입니다

    [div style=’position:relative;’]
    [ul style=”position:absolute; background:url(‘/image/test.png’);”]
    [li] [a href=’test.html’] t e s t [/a] [/li]
    [/ul]
    [/div]

    이런형태에서 a 요소에 css 상에서 absolute 나 relative 를 줘봐도 링크가 여전히 먹통인데
    혹 해결 방법아시는지… (png배경 사용한곳에 absolute나 relative 를 빼주고 a에 absolute | relative를 주면 링크가 먹히긴 먹히는데 말이죠….)

  42. 정찬명 댓글:

    제 경험으로는 a 요소에 position 속성을 제거했음에도 클릭이 안된다면 png 배경이 적용된 요소에서 position 속성을 제거하는 수 밖에 없는 것으로 알고 있습니다. 혹시 적당한 다른 방법을 발견하시면 저도 좀 알려주세요. ㅜㅜ;

  43. 나에 댓글:

    회색이 잠깐 나왔다가 사라지는 건 selectbox htc를 쓰는 것
    또는 js의 window.onload = function() 를 썼을 때 발생하는 문제들은
    해결방법은 모르지만 페이지 로딩이 다 끝나고 나서야 스크립트가 먹기 때문일 겁니다.
    (시도해보진 않았지만) 스크립트를 이용해서 잠시 display: none을 적용했다가
    모든 내용이 다 뿌려지면 다시 display: none 된걸 풀어주는 방식을 쓰면 되지 않을까, 하는 생각이 드네요.
    (display: block 하라고 말을 못하는 이유가 inline 요소일 수도 있으니까…)

  44. 가인 댓글:

    좋은정보 감사합니다.
    제 블로그에 담아가겠습니다.

  45. 방랑시인 댓글:

    좋은 정보 감사합니다.
    스크랩해놓고 두고두고 보려고 퍼갑니다.
    복 많이 받으실겁니다.ㅎㅎ

  46. 태엽 댓글:

    백그라운드위에(png) 버튼(gif)을 올렸는데 ie7/8에서 클릭이 안되서리~
    위의 방법대로 했는데도 적용이 안되 주소 함 올려봅니다.~ㅠ

    http://youriweb.cafe24.com/site/pages/main/main1.html

  47. 마약 댓글:

    태엽님 : unitpngfix.js 이 친구가 문제예요^^ 딱히 js를 어떻게 수정하라고는 말씀을 드릴수가 없고, 그냥 그 스크립트를 지우면 잘 될텐데, 다른데서 문제가 생기겠죠?^^;

    아, 찬명님께 여쭙고 싶은게 있어서 들어왔다가,

    누군가가 해결이 안되는 문제를 안고 있으면 그냥 지나치지 못해서 소스 뜯어보고 앉았네요..ㅠㅠ;
    결국 역량이 부족하여 해결방안은 못찾아드렸지만;;;

    다름이 아니라, 여쭙고 싶은 부분은 무례함을 무릅쓰고, 메일로 드릴께요…

  48. 정찬명 댓글:

    @태엽
    제가 코드를 못봤지만 아마도 position 속성이 문제가 되고 있는것 아닐까 생각됩니다. 이 포스트 하단에 적혀있는 문제죠.

  49. […] 나라디자인의 정찬명 님의 블로그에서 볼수있는 htc 파일을 이용한 방법 http://naradesign.net/wp/2006/12/15/100/ […]

  50. 성지애 댓글:

    iepngfix.htc 다운이 안되는데요..어디서 다운 받아야 하는건가요??

  51. 정찬명 댓글:

    @성지애
    링크가 깨졌군요. 명절 지난 후에 복구하겠습니다.

  52. 고갱님 댓글:

    iepngfix.htc 다운이 안됩니다.. 요런 Error 404 – Not Found 에러 뜨네요~
    전 이 내용을 이제 보고 찾아왔습니다만~
    2010년도 명절도 지나고..2011년도 5월인데..
    복구에 힘써주시지 않으시겠습니까~ ^^;

  53. 정찬명 댓글:

    @고갱
    외부 링크를 복구 했습니다. 단 현재 시점에서 외부 링크된 파일은 갱신이 많이 되었기 때문에 본 블로그 설명과 사용방법이 다를 수 있습니다.

  54. […] http://naradesign.net/wp/2006/12/15/100/ 를 참조하여 일단은 이미지가 표현되었으나차후 스크립트 적용시 잘 될지 걱정임… […]

  55. 랭커 댓글:

    좋은 글 잘 읽었습니다. 근데 본문내용과는 크게 상관이 없지만 이미지(파일)명 작성에 대해서 궁금한 사항이 있어 질문을 드립니다.

    보통 이미지 태그는 alt 속성을 이용해서 해당 이미지에 대한 설명을 하면 되지만, 파일명은 어떤 식으로 지어야 되는지 좋은것인지 궁금합니다.

    예를 들어 정확한 파일명을 한글로 적다보니 alt 속성과 중복이 되어서요. 예를 들면 아래와 같이요.
    [img alt=”이쁜집” src=”/이쁜집.jpg”]

    계속 이런식으로 하다보니… 중복되는 글도 많고 괜히 쓸데 없이 전체 HTML 용량만 늘어나는 것 같아 파일명을 그냥 대충 숫자로 적을까 하는데, 이런 경우에 웹 접근성이나 SEO 측면에서 나쁜 점이 있는지 궁금합니다.

  56. 정찬명 댓글:

    @랭커
    이미지 파일 명은 접근성이나 SEO와는 아무 관계가 없습니다. 다만 개발 편의를 생각한다면 의미 있게 지어주는 것이 좋겠지요. ^^

  57. 랭커 댓글:

    아… 그렇군요. 별 것 아닌것 같은데도 꽤나 신경이 쓰였었는데… 명확한 답변을 들으니 궁금증이 해소되었습니다. 감사합니다. ^^

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님