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

정찬명가 만듬

정찬명 — Thu, 11 Mar 2010 06:47:51 +0000

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

맹랑천사가 만듬

맹랑천사 — Thu, 11 Mar 2010 06:00:31 +0000

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

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

정찬명가 만듬

정찬명 — Wed, 03 Feb 2010 11:21:50 +0000

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

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

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

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

김종호가 만듬

김종호 — Wed, 03 Feb 2010 03:14:16 +0000

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

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

ㅠㅠ

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

정찬명가 만듬

정찬명 — Tue, 02 Feb 2010 04:23:56 +0000

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

김종호가 만듬

김종호 — Mon, 01 Feb 2010 02:39:13 +0000

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

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

김종호가 만듬

김종호 — Mon, 01 Feb 2010 02:25:00 +0000

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

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

정찬명가 만듬

정찬명 — Fri, 29 Jan 2010 01:11:20 +0000

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

쭈가 만듬

Thu, 28 Jan 2010 12:15:40 +0000

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

정찬명가 만듬

정찬명 — Tue, 22 Dec 2009 08:28:57 +0000

Dark Devil님,

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

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