NARADESIGN

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


PNG-24를 배경으로만 사용하려는 경우의 CSS Hack.

본문 건너 뛰기

IE6~5.5에서 PNG-24 이미지를 전경과 배경에 동시에 사용하려는 경우 예전에 포스팅 했던 ‘IE6에서 PNG-24의 투명/반투명 색을 바르게 표현하기‘ 라는 글을 참조하시면 됩니다. 그런데 전경으로는 사용하지 않고 오직 배경으로만 사용하려는 경우 저 팁을 적용하기에 불편함이 예상 됩니다. 별도의 iengfix.htc 파일과 blank.gif 파일을 요구하기 때문이죠. 하지만 PNG-24 이미지를 배경으로만 사용할 것이 확실시 된다면 굳이 저렇게 복잡하게 하지 않아도 됩니다. 이미 널리 알려진 팁인데 제 블로그에 적어두질 않아서 간단하게 포스팅 합니다. IE6~5.5 브라우저에만 대응하는 간단한 코드를 작성하고 CSS Hack으로 처리하는 방법 입니다.

PNG-24 이미지를 배경으로만 처리하려는 경우 CSS 코드를 다음과 같이 작성 하면 IE6~5.5 브라우저에서 PNG-24 배경 이미지를 정상적으로 렌더링 합니다.

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');}

filter에 적용할 이미지의 src 경로를 상대경로로 지정하는 경우 background:url과 같이 CSS 파일을 기준으로 적용하면 안됩니다. filter에 적용하는 이미지의 경로는 HTML 문서를 기준으로 설정하여야 합니다. 즉, background의 이미지와 filter에 적용하는 이미지는 같은 이미지라 할지라도 경로의 기준이 CSS와 HTML으로 각각 서로 다르므로 이점 유의하여 적용하세요.

PNG-24를 정상적으로 렌더링 하는 표준계열 브라우저(Firefox, Opera, Safari, Chrome, IE7~8)에서는 다음과 같이 작용 합니다.

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');}

PNG-24를 정상적으로 렌더링 하지 못하는 IE6~5.5 브라우저에서는 다음과 같이 작용 합니다.

.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');}

언더바 ‘_’ 핵을 사용하여 IE6~5.5 브라우저에만 MS 전용 CSS Filter를 적용하는 방법입니다.

PNG-24 관련 CSS Hack 에 공통으로 발견되는 알려진 버그

이 핵 또한 다른 PNG-24 핵들과 마찬가지로 배경이미지의 배치를 원하는 곳에 할 수 없다는 것과 배경이미지의 반복이 불가능 하다는 문제가 있습니다. 배치는 기본값인 backgroun-position:left top 으로 설정이 되며 반복은 background-repeat:no-repeat 상태가 되므로 참고하세요.

IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.

배경이 적용되는 요소에 haslayout 속성이 없는 경우 filter가 제대로 표현되지 않아 이미지가 보이지 않습니다. 경로는 분명히 맞는데 이미지가 보이지 않으면 width 또는 height 또는 zoom:1 속성을 추가로 적용해 보세요.

분류: CSS,웹 디자인 | 2008년 9월 22일, 15:06 | 정찬명 | 댓글: 63개 |
트랙백URI - http://naradesign.net/wp/2008/09/22/157/trackback/

63개의 댓글이 있습니다.

  1. Mr.Unknown 댓글:

    왓, _ 핵은 몰랐군요…
    어려운 방법으로 핵 해서 사용했었는데 ㅠㅠ
    좋은 정보 감사합니다.

  2. 꿈트리 댓글:

    위의 경우는 dtd에 따라서 문제가 있을 수 있겠네요.
    filter의 경우 ie의 모든 브라우저에서 지원하게 됩니다.
    Xhtml이나 loose.dtd 의 경우 ie에서 background를 제거 하기 위하여 사용하신 ‘_background:none’의 부분이 ie7 이상 에서는 background가 제거 되지 않아 filter와 background가 두번 겹쳐져서 보여 지게 됩니다.
    이 경우 hack을 ‘_background:none’ 이 값이 아닌 ‘*background:none’ 이 값으로 변경한다면 dtd에 영향을 받지 않고 사용할 수 있을 듯 합니다.^^
    그럼 오늘도 좋은 하루 되세요~^^

  3. 꿈트리 댓글:

    아~~~~필터에 언더바를 쓰셧네요? 헐~ -_-
    저건 그냥 언더바 하나 줄이는 팁으로 알아주세요 .-_-
    엉엉 ㅡㅜ

  4. 정찬명 댓글:

    꿈트리님, 코멘트 감사해요. 하지만 꿈트리님이 제안주신 ‘*’ 스타핵 방법을 사용하는 경우 IE7이 PNG를 정상적으로 출력함에도 불구하고 IE7의 배경을 제거하고 Filter를 사용하는 방법이라서 더 좋은 방법은 아니라고 생각해요. ^^; 언더바 하나 줄이자고 IE7에도 핵을 사용하기에는 IE7이 너무 억울할듯 해요. ㅎㅎ.

  5. 윤좌진 댓글:

    다른 이야기이긴 한데 ie8에서는 ie전용 속성으로만 알고있었던 filter속성이 제대로 작동하지 않고 있습니다.
    ie속성을 ie에게 배신당한 기분이랄까..-_-;;
    때문에 png야 어차피 ie7부터 지원 되기때문에 문제 없다지만 filter를 이용해서 opacity속성을 가능하게 했던 부분에 대해서 문제가 있지 않을까 싶네요..

  6. 정찬명 댓글:

    제가 제안드린 코드에서 filter와 핵은 IE6~5.5 에만 적용되고 있습니다. 좌진님 뭔가 착오가 있으신게 아닌가요? 속성 앞에 ‘_’ 언더바가 있잖습니까. ㅜㅜ; 이 코드들은 IE7 이상의 브라우저들이 filter 속성을 무시하도록 작성되어 있습니다.

  7. 꿈트리 댓글:

    좌진님 역시도 저와 같은……..보고싶은 것만 보는? ㅋㅋㅋ

  8. 윤좌진 댓글:

    ㅋㅋ 댓글에 까지 _ 핵이라고 말하고 있는데 제가 못볼리 없잖아요~
    저는 IE8 버그에 대해 말씀드릴려고 한겁니다. 오해마시길.. ㅎㅎ

  9. 윤좌진 댓글:

    제가 댓글 처음에 다른이야기라고 말한건 내용은 알고있고 그 IE8 버그를 말할려고 한 것 뿐입니다. ㅜㅜ 제 글도 봐주세욤~

  10. 정찬명 댓글:

    때문에 png야 어차피 ie7부터 지원 되기때문에 문제 없다지만 filter를 이용해서 opacity속성을 가능하게 했던 부분에 대해서 문제가 있지 않을까 싶네요.

    라는 문장에서 문제가 된다고 말씀하신 부분이 정확히 무엇인가요? PNG-24 표현은 IE 7~8에서 모두 문제가 되지 않으므로 해당사항이 없고, IE 5.5~6은 filter와 핵을 이용해서 표현이 되고 다른 버전이나 다른 벤더 브라우저에서는 무시하기 때문에 이것도 전혀 문제가 없다고 생각하는데요.

  11. 윤좌진 댓글:

    마찬가지 말이였어요
    그 내용은 네이버 카페같은데는 태그에 filter를 사용해서 태그내에 모든 컨텐트의 투명도를 조절하고 있는데 IE8에서는 그 부분이 적용 안되고 있어서요
    결론은 IE8에서는 아직(?) filter 속성이 적용 되지 않을거라는 이야기를 해드릴려고 한거였어요…

  12. 정찬명 댓글:

    IE8에서 반투명 효과를 표현할 때 filter를 지원 않는다면 CSS3 속성인 opacity 속성은 어떤가요? 지원 하나요? 참고로 다른 대중적 브라우저들은(FF, OP, SF, CR) opacity 속성을 벌써 지원하고 있지요.

  13. 윤좌진 댓글:

    네이버카페를 보면 filter를 지원하지 않는 브라우저들 때문에 css3속성인 opacity속성을 별도로 주고 있는데요 IE8이 opacity를 지원했다면 이 속성이 적용됐어야 했겠지만 안되고 있더라구요 그리고 IE8이 출시될때 일부 css3속성만 지원한다고 했는데 opacity는 해당사항이 없었나봅니다..
    css지원에 대한 IE지원현황이 css3가 추가되면서 조금 업데이트 된거 같은데요 아래 링크 참고해보세요~^^
    http://msdn.microsoft.com/en-us/library/cc351024(Vs.85).aspx

  14. 정찬명 댓글:

    네, IE8이 확실히 Opacity를 지원하지 않는군요.
    http://www.css3.info/css3-features-in-ie8/
    http://www.css3.info/preview/opacity/

    결국 MS에서는 다른 브라우저들과 마찬가지로 비표준 속성에 -MS- 를 붙여서 사용할 수 있도록 방법을 제공 했네요.
    http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

    예를 들어 반투명 효과를 모든 브라우저에서 동일하게 표현하려면 #selector {opacity:0.5; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)";} 이렇게 동일한 효과에 대하여 세번 선언해야 합니다.

  15. 윤좌진 댓글:

    글을 읽어보니 기존에 사용하던
    filter:alpha(opacity=50);
    방식은 약식이였나 봅니다. (그래도 7까진 잘 돌아가던데 말이죠..)
    IE8에서
    -ms-filter:alpha(opacity=50);
    로 해도 적용되지 않더라구요…

    맨 아래 코드 예제를 보내 아래 코드처럼 사용해야 크로스브라우저가 가능하겠네요..

    #selector {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: .5;
    }

    찬명님 덕분에 좋은정보 얻고 갑니다. ^^

  16. 정찬명 댓글:

    확인해 보니 약식은 IE8에서 여전히 유효 합니다. 다만 -ms- 속성을 사용할 때에는 값을 “따옴표”로 감싸줘야 하네요. 고로 다음과 같이 작성하면 됩니다.

    #selector {opacity:0.5; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)";}

    따옴표로 속성의 값을 감싸야 한다는 규칙을 좌진님 코멘트 덕분에 발겼했네요. 감사해요. ^^

  17. 윤좌진 댓글:

    쌍따옴표는 저도 먼가 했습니다 헐..
    또 하나 얻어갑니다. ㅎㅎ

  18. limnetworks 댓글:

    a 요소 뿐만 아니라
    서시 제어 요소에도 이러한 핵을 쓴다면 마우스로 클릭이 안되더군요 ㅠ_ㅠ;
    FF에서는 클릭으로 이동 할 수 있지만, IE에서는 Tab키로 이동해야지 블랭크가 깜빡여요 후..

  19. 이흥섭 댓글:

    아쉽게도 InternetExplorer 6.0.2900.2180.xpsp_sp2_gdr.070227-225에서 PNG 핵 때문에 브라우저가 다운되는 현상이 있습니다. 이걸로 피 본 이후로 쓰지 않고있습니다 ㅠㅠ

  20. 정찬명 댓글:

    저런, 그런 문제가 있었어? 이걸 증명만 할 수 있다면 좋은데…

  21. 김기현 댓글:

    png24 파일을 익스에서 배경으로 쓸때 repeat-x 같은 반복 속성을 주려면 어떻게 해야돼나요.

    위방법은 repeat 는 안돼는거 같아서요…

  22. 정찬명 댓글:

    png24 Hack을 사용하는 모든 방법은 background-repeat 속성을 사용할 수 없습니다. 본문 하단에도 적혀 있습니다. ^^

  23. BNU 댓글:

    배경의 repeat, position을 해결한 IE PNG Fix 버전이 있더군요.
    아직 알파버전이지만, 테스트한 결과 별다른 문제점은 없는 것 같았습니다. 끝에 말씀하신 a 태그에 마우스가 접근 불가한 문제는 테스트 해보질 못했습니다.

    XE코드에도 넣어두었습니다. 꽤 오래전에 추가했는데 아직 사용하는 분은 없어보이지만요^^;
    common/js/iepngfix_tilebg.js

    한 번 테스트 해주세요. :)

  24. BNU 댓글:

    아이고, 링크를 안남겼네요.
    http://www.twinhelix.com/css/iepngfix/

  25. 정찬명 댓글:

    와우! 이런게 있었군요. 시간날때 테스트 해보고 포스팅 해야겠는데요. 감사합니다. 굿잡! ^^;

  26. 박철웅 댓글:

    질문좀 드려도 될까요?
    제가 모 게임사에서 제공해주는 길드홈페이지를 꾸미고 있는데요.

    배경을 넣을 table의 class명을 알고 잇고, css파일을 링크시는 방법을 알고 있어서.. 해당 태이블에 배경화면을 넣어서 꾸미는데.. png파일의 반투명도는 적용이 안되더라구요. 네이버 지식인을 통해서 이 싸이트를 방문해서 해결방안을 찾았다 했는데..

    위에 나온대로 css파일에 코딩하고 링크를 시켰는데.. 배경이 아예 안나오네요..
    작성한 코드 그대로 올릴께요.. 문제점점 알려주세요.

    위 본문의 코드소스부분 하단 설명글.. 아무리 읽어봐도 무슨말인지 이해를 못하겠어요.
    그냥 인터넷에서 배운 짧막한 지식이라.. ;

    .if-bc
    {
    background:url(‘http://seraphim01.com.ne.kr/Image_File/left_bg/left_bg0.png’);
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://seraphim01.com.ne.kr/Image_File/left_bg/left_bg0.png’, sizingMethod=’crop’);
    }

    부탁점 드리겠습니다. ㅠㅠ

  27. 진석태 댓글:

    onmouseOver나 onmouseOut 등 마우스이벤트도 안먹던데요?
    방법이 없는가요??

  28. 정찬명 댓글:

    박철웅님께,
    제가 댓글을 놓쳤군요. 너무 늦게 답변드리게 되어 죄송하네요. 배경이 적용되는 요소에 haslayout 속성이 없는 경우 filter가 제대로 표현되지 않아 이미지가 보이지 않습니다. 경로는 분명히 맞는데 이미지가 보이지 않으면 width 또는 height 또는 zoom:1 속성을 추가로 적용해 보세요. 박철웅님 덕분에 본문 하단에 설명을 추가할 수 있게 되었습니다. 감사합니다.

  29. 정찬명 댓글:

    진석태님께,
    코드를 보여주지 않으시면 원인을 파악하기 어렵습니다.

    일단 png배경이 사용된 엘리먼트에 position:relative | absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative | absolute 속성을 제거하거나 또는 a요소에 position:relative | absolute 속성을 함께 부여해 보세요.

  30. 가인 댓글:

    제 블로그에 담아가겠습니다.

  31. 윤재민 댓글:

    IE6.0에서 a태그가 안먹네여..
    말씀하신것처럼 스타일 주었는데도 그럽니다
    이건 뭔가여;;;

  32. 윤재민 댓글:

    http://motion.mine.nu:9104/main.aspx

    이곳에서 맨 우측에서 날개배너 세로로 3개의 이미지 있는곳인데[

    첫번째 이미지에만 링크를 임시로 걸어봤습니다…

    안되네여 ㅠㅠ

  33. 정찬명 댓글:

    expression을 이용해서 해결하셨군요. ^^; 제 답변이 필요 없죠?

  34. 윤재민 댓글:

    지금 해결이 안되고 있습니다..
    이미지 문제가 아니라 a태그 요소에 접근이 안되는거에여.. IE6.0에서 말이죠..
    position을 주었는데도 그럽니다…ㅠㅠ

  35. 정찬명 댓글:

    로컬에서 관련(html/css/js)파일을 모두 내려받아 테스트 해봤는데요. 로컬에서는 잘 되네요. img, object 파일들은 로드하지 않았구요. 해당 png 파일만 절대경로로 삽입해서 테스트 했을 때 IE6에서 클릭이 되었거든요.

    일단 CSS expression 속성을 주석처리 해 보세요. expresstion 속성을 제거했음에도 클릭이 안된다면 expression 문제는 아니겠지요.

    expression 문제가 아니라면 다른 HTML 요소들을 하나씩 주석처리 하면서 클릭이 되는지 확인해 보세요. 다른 레이어보다 z-index가 낮거나 투명한 요소에 의해서 가려진 상태일 수도 있겠네요.

    쉽지 않군요. ㅎㅎ.

  36. 윤재민 댓글:

    아~ 쉽지 않아요 ㅠㅠ
    expression 은 그 엘리먼트에 들어가있지도 않은데..ㅠㅠ
    문제는 그 이미지가 보이고 안보이고에 문제가 아니라
    클릭이 안되는건데 ㅠㅠ 아~~ IE6 진짜 폭파시키고 싶네여 ㅋ

  37. Junevere 댓글:

    으앗,
    텍스트큐브닷컴에서 이상하게 트랙백이 잘 안쏴지네요;ㅂ ;
    png24를 사용할 요소가 hasLayout속성이 있어야 한다는 것 큰 도움이 되었습니다 >_ <

  38. 정찬명 댓글:

    앗, 들어온 엮인글이 없는데요? 필터링된 글들 사이에도 없었습니다. 안되면 수동이라도 괜찮습니다. ^^ 감사합니다.

  39. Dark Devil 댓글:

    저 안녕하세요~~~
    크게 세가지 질문이 있습니다.
    첫번째. 플래시에 스크린리더기가 읽어주는 영역이 Accessbility에서
    Name과 Description중에서 어느 영역을 읽어주는지 궁금합니다.
    Name과 Description을 같은 이름으로 기재를 했거든요,
    그런데 문제는 저희쪽에서 보유하고 있는 스크린 리더기는 한번만 읽히는데 다른 리더기에는 두번 읽힌다고 합니다.
    그래서 어떤게 읽히는지 만약 그런 문제가 아니라면 다른 문제인지 궁금합니다.

    두번째. 플래시를 Tabindex영역을 지정하고 있습니다.
    그런데 Main메뉴의 1Depth메뉴와 2Depth메뉴를 별도로 구분하는 형식이 있는지 궁금합니다. 별도의 구분방법이 있을까요??

    마지막으로 플래시내에서 Tab으로 Tabindex값을 넣어서 이동은 가능한데 그움직임의 형태를 키보드의 화살표키로 움직이게 하고 싶습니다. 플래시를 다 읽은 후 컨텐츠로 빠져나오게 하는 방법이 있는지 궁금합니다.

  40. 정찬명 댓글:

    Dark Devil 님 답변이 많이 늦어 죄송합니다. 이론상으로는 Name과 Description을 모두 읽어주게 되어 있습니다. 그런데 시각장애인들이 가장 많이 쓴다는 ‘센스리더’ 제품으로 테스트 해봤을 때 Name은 읽어주지만 Description은 읽어주지 않더라구요.

    그 두 가지 항목은 각각 ‘짧은 대체 텍스트’와 ‘긴 대체 텍스트’로써 역할이 다르기 때문에 실제로 긴 대체텍스트가 아니라면 Name 항목에만 작성하시는 것이 좋을 것 같습니다.

    1 Depth와 2 Depth 메뉴를 별도로 구분하는 형식이 구체적으로 무엇인지 잘 이해를 못하고 있습니다. Tabindex는 Depth와 관계없이 지정할 수 있는 것으로 알고 있는데요. 예를 들면 1 Depth에 Tabindex 1을 지정했다면 2 Depth 첫 번째 메뉴에 Tabindex 2를 지정하는 것이죠.

    플래시에서 키보드 포커스를 받는 버튼심볼이나 무비클립심볼들은 별도의 스크립트 없이도 방향키를 이용해서 Tab 키처럼 포커스 이동이 가능합니다. 플래시를 다 읽은 후 컨텐츠로 빠져나오는 것도 당연히 그렇게 되구요. 만약 이게 되지 않는다면 플래시를 잘못 설계한 것으로 추정 됩니다.

  41. Dark Devil 댓글:

    답변에 감사합니다…
    플래시 다 읽은 후 컨텐츠로 빠져나올때, 스크립트를 이용하는지 아니면 다른 방법이 있는지요??
    암튼 답변에 감사합나디..

  42. 정찬명 댓글:

    Dark Devil님,

    포커스가 플래시에서 빠져나오지 못하는 것은 제 추측으로 Tabindex 지정과 관계가 없고 액션스크립트를 잘 못 작성했기 때문이 아닌가 생각됩니다. 본래는 별도의 스크립트나 고려가 없는 상황에서 자연스럽게 빠져나오게 되어 있습니다. 간단한 플래시 네비게이션을 제작해서 테스트 해보세요.

    참, 지금 제 이야기는 IE 기준입니다. IE를 제외한 브라우저들은 본래 플래시 object 자체에 포커스가 들어가고 나오는 것에 문제가 있기 때문에 키보드만으로 빠져나오지 못할 수 있습니다. 물론 들어가는 것 또한 안되구요.

  43. 댓글:

    검색하다 좋은 정보가 있어 바로 적용을 시켜봤는데..
    a태그 속성 링크 문제요… 저도 이거 해결이 안되는데.. ie6에서 투명 배경이 되는걸 보고 올레를 외쳤으나.. 이게 링크가 되질 않네요.. 말씀하신데로 position:absolute;를 상위와 똑같이 줬거든요.. 이거 어떻게 해야하나요.. ;;;
    저는 메뉴 배경이 투명이미지여야 해서… 메뉴가 다 링크가 안되고 있습니다.. T.T

  44. 정찬명 댓글:

    쭈님 안녕하세요? 그런 경우 부모 또는 자식 요소의 position 값을 빼거나 바꿔보시고 그래도 해결이 안되면 어쩔 수 없이 부모자식 관계를 형제관계로 구조를 바꾸면서 해결하셔야 할 것 같습니다.

  45. 김종호 댓글:

    정찬명님 안녕하세요 매번 좋은 팁 얻어갑니다만 궁금한 사항이 있어서 문의드립니다.

    저는 png를 아주 여러개를 사용합니다.. 물론 bg로 말이죠.
    그렇다면 각 bg마다 위의 클래스를 사용하여 핵을 넣어야 하는건가요?

  46. 김종호 댓글:

    아… 각각의 png 배경 selector마다 지정해줘야 하는거군요^^

    위의 핵은 no-repeat일 경우 같은데요 repeat-y나 repeat-x의 경우에는 어떻게 해야 할지요? 초보적이지만 부탁드립니다.^^

  47. 정찬명 댓글:

    김종호님,
    IE에서 png를 배경으로 사용하는 모든 팁들은 png의 반복이 원래 불가능합니다. 왜냐하면 IE에서는 png를 전경 이미지 처럼 사용하기 때문인데 전경이미지는 원래 반복이 불가능 하기 때문이죠.

  48. 김종호 댓글:

    아아아 감사합니다^^ 한방에 이해가 되네요^^ 그렇다면 한가지 더 물어봐도 될까요~ ie6.0과 모든 브라우저에서 현재 크로스 브라우징이 되는 사이트를 제작중인데요

    위 소스를 사용했을 때에는 png에 swf파일이 덮혀서 정상적으로 보여지기는 하지만 액션이 취해지지 않습니다..

    ㅠㅠ

    플래시에 z-index를 사용해도 그러네요… 문제점을 혹시 아시는지 해서요^^

  49. 정찬명 댓글:

    김종호님,
    플래시 오브젝트는 HTML에 삽입될 때 wmode 라는 속성이 있고 기본값이 window 인데요. 이것은 다른 어떤 HTML 요소보다도 z-index와 무관하게 플래시를 맨 앞으로 가져오는 결과를 만듭니다. HTML 요소 가운데 플래시 오브젝트를 덮을 수 있는 것은 iframe 뿐입니다. 이런 문제점 을 해결하는 방법은 두 가지가 있는데요.

    첫째, png 배경 뒤쪽에 빈 iframe을 깔아서 플래시보다 앞으로 가져오는 방법.
    둘째, wmode를 window 아닌 다른 값(opaque, transparent)으로 지정하는 방법.

    두 번째 방법은 상황에 따라 피해야 할 방법 입니다. 왜냐하면 wmode가 window 일 때에는 시각장애인이 사용하는 화면낭독기가 플래시 콘텐츠에 접근해서 플래시 안쪽에 포함된 static text 또는 버튼이나 무비클립에 포함된 문자(대체 텍스트)를 읽을 수 있지만 wmode가 opaque 또는 transparent 일 때에는 불가능하기 때문에 접근성을 해칩니다.

    결국 플래시 콘텐츠가 오직 비주얼한 목적으로만 사용된 경우라면 두 번째 방법을 사용해도 괜찮지만 그렇지 않은 경우라면 첫 번째 방법(꼼수긴 하지만)을 사용할 수 밖에 없습니다.

  50. 맹랑천사 댓글:

    #contents{background:url(../images/main/body_bg.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/main/body_bg.png’, sizingMethod=’crop’);}

    이렇게 쓰면 안되는건가요?
    왜 안나올까요….ㅜ.ㅜ ie6에서만 배경이 안나와용..ㅠㅠ

  51. 정찬명 댓글:

    @맹랑천사
    이게 아마도 _filter 에서 지정한 이미지의 경로 문제 일껍니다.
    background url 이라면 CSS 문서를 기준으로 이미지 경로를 작성해야 하는데요.
    알파 이미지 로더용 filter의 src 경로는 CSS 문서 기준으로 적는 것이 아니라 이 CSS를 참조하는 HTML 경로 기준으로 설정해야 합니다.
    즉, 이미지 경로를 CSS 문서가 아닌 HTML 문서에서 참조할 수 있는 경로로 변경해 보세요.

  52. 이혜란 댓글:

    [!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”]
    [html xmlns=”http://www.w3.org/1999/xhtml” lang=”ko” xml:lang=”ko”]
    [head]
    [meta http-equiv=”Content-Type” content=”text/html;” /]
    [title][/title]
    [/head]
    [style]
    li {list-style:none;}
    li{padding-left:20px;background:url(http://naradesign.net/ouif/uio/navigation/horizontal/bar/iconSetup.png) no-repeat 0 2px;*background:none;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://naradesign.net/ouif/uio/navigation/horizontal/bar/iconSetup.png’, sizingMethod=’crop’); width:100% }
    ul li ul li {;background:url(http://naradesign.net/ouif/uio/navigation/horizontal/bar/iconSub.gif) no-repeat; }
    [/style]
    [/HEAD]
    [BODY]

    [ul]
    [li]fdf[/li]
    [li]
    [ul]
    [li]depth2222[/li]
    [li]depth2222[/li]
    [li]depth2222[/li]
    [/ul]
    [/li]
    [li]4433[/li]
    [/ul]
    [/BODY]
    [/HTML]

    ietester 로 ie6,7.8 을 비교하는데 ie6에서만 해당 블릿아이콘이 겹칩니다.
    위의 *background:none;_background:none 도 해보고 저것도 해봤지만 6에선 겹칩니다.
    도와주세요ㅜ_ㅜ 참고로 캡쳐화면과 파일 멜로도 보냈어여ㅜ_ㅜ

  53. 정찬명 댓글:

    @이혜란

    li 요소에 적용된 *background:none 속성은 필요가 없는 속성이네요.
    ul li ul li 요소에는 _filter:none 속성을 추가해야 하구요.

    li 요소에 background:none 속성은 IE6에만 적용해야 하는 속성입니다. background를 금지하고 대신 filter를 사용하기 때문이죠. 그런데 지금 코드는 스타 * 핵을 사용해서 IE7에서도 background 속성을 금지 시켰네요. 따라서 IE7 에서도 배경이 보이지 않을 껍니다.

    그리고 filter 속성은 png를 사용하는 li 요소에만 필요한데 지금 혜란님이 작성한 코드는 ul li ul li 요소에도 filter 속성이 상속되기 때문에 배경 이미지가 마치 두 개 인것 처럼 보이는 것이구요. 사실은 IE6 에서 ul li ul li 요소에 filter와 background 속성이 동시에 적용되고 있는 중입니다.

    일단 li 요소에 *background:none 을 삭제 하시고
    ul li ul li 요소에 _filter:none 을 추가해 보세요.

    P.S. 메일은 안 왔던데요. ㅎㅎ

  54. 이혜란 댓글:

    답변 너무 고맙습니다. 하지만 2뎁스에 _filter:none 를 줬더니
    1뎁스의 png가 투명처리가 안됩니다.
    전 왜 안될까여 기본브라우전 ie8이고 버전테스트는 ietester 0.4.2로 하고있거든여
    근데 ieteter의 ie6으로 보면 안되여.

    파일과 캡쳐 dece24@gmail.com루 멜 보냈어여 귀찮게해서 죄송해여 ㅜ_ㅜ

  55. 정찬명 댓글:

    @이혜란

    아래 코드를 li 요소에 추가해 보세요.

    li { _background:none; _zoom:1; }

    일단 filter를 사용하는 요소에는 background를 금지시켜야 하는데 배경 금지 코드가 빠져있네요. 그리고 filter가 적용되지 않았던 원인은 filter와 무관한 IE 버그 때문입니다. 이렇게 무엇인가 보여야 할 것이 보이지 않으면 position 값을 변경해 보거나 width 또는 height 값을 부여해 보거나 또는 zoom:1 속성을 부여해 보세요.

  56. 이혜란 댓글:

    됐습니다!!!!
    1뎁스 li에 백그라운드 사라지는건 _zoom:1;이 해결해줬고
    2,3뎁스 li에 백그라운드겹치는건 _filter:none;이 해결해줬습니다~~!~!~!
    어떻게 너무너무 감사드려여 이게 나오면 저게나오고 저게안나오면 이게 안나왔던 상황이 드디어 종료됐습니다~!~!~!
    6 7 8에 같은 화면이 나오는 순간 감동의 눈물이
    너무 고맙습니다~~!

  57. 정찬명 댓글:

    @이혜란
    축하드려요! ㅎㅎ

  58. 정찬명 댓글:

    @이혜란

    보내주신 커피 저희 랩 동료들과 사이좋게 나누어 먹었습니다. 주소를 또 어떻게 아시고 보내셨나요? 너무 감동 받았습니다. 고맙습니다. ^^

    인증샷
    http://me2day.net/naradesign/2010/04/15#11:27:12

  59. 이혜란 댓글:

    인증샷까지 올려주시고 ㅎㅎ
    나라디자인에서 늘 도움만 받아가는데 커피가 싸게 먹히져~~~
    감사는 실천해야 제 맛 ^____^

  60. 정찬명 댓글:

    @이혜란
    게다가 다른 분들께 좋은 본보기가 되어 주셔서 얼마나 감사한지요. ㅎㅎㅎ

  61. Solis 댓글:

    어찌보면 너무 간단한 표현 방식이지만, 주축이되는 브라우저의 문제로 많은 분들이 시간과 땀을 쏟아 부어야되니… 답답한 심정이 없지 않아 있습니다.

    그나마, 종합적인 사례를 보고 참고할 수 있어서, 오류를 사전에 방지할 수 있었습니다. 좋은 정보 감사합니다.

  62. 정찬명 댓글:

    @Solis
    도움을 드릴 수 있어서 기쁩니다. 좋은 주말 되세요. ^^

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

댓글 쓰기

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

필수 아님

필수 아님