ㅎㅎ 제목을 좀 도전적으로 바꾸었습니다.

모질라 계열에서는 투명한 PNG 파일을 웹 페이지에 사용해도 별 무리 없이 사용이 가능 하지만,

IE 에서는 투명값의 적용이 되지 않아서 24bit RGBA PNG 파일을 사용하지 못합니다.

아니 사용하지 못하는 건 아니라 사용하기가 좀 까다롭습니다.

예를 들어,
[1번]


이 것은 모질라 계열에서는 아무 이상없이 보여지지만, 익스플로러 계열에서는 투명한 배경에 회색의 배경이 보여지게 됩니다.

그러나 위의 코드를 다음과 같이 바꾸면 익스플로러에서도 배경의 투명도가 그대로 적용된 이미지를 볼 수 있습니다.
[2번]

이렇게요.....

보시면 아시겠지만, 익스 전용의 스타일 시트를 사용한 겁니다. 그리고 이미지 태그에 사용된 spacer.png파일은 24bit RGBA 이미지가 아니라 배경이 투명한 8bit indexed 파일을 사용한 겁니다. 즉 배경이 완전히 투명한 정보를 가지는 1px * 1px 짜리의 png 그림파일 입니다.
스페이서 그림은 배경이 투명한 gif를 써도 됩니다.

그런데 문제는 두 번째와 같이 이미지 태그를 모두 바꾸면 익스플로러에서는 잘보여도, 모질라 계열에서는 또 이상하게 보인다는 겁니다. 그리고 이미지 하나 넣는데 너무 복잡하기도 하구요.

그래서 태그는 위의 1번과 같이 쓰고 브라우저가 익스플로러 일때는 전체 페이지를 읽어 PNG 이미지가 들어간 부분의 코드를 2번 처럼 바꾸어 주도록 했습니다. 물론 모질라 브라우저가 접속하면 아무런 수정 없이 그대로 보여 주구요.

파일은 PNG24.php 파일 하나와 spacer.png 파일 하나로 구성 됩니다.

우선 PNG24.php 파일을 열어,

코드 시작 부분에, function PNG24($x,$img_path='/_MODULE/PNG24/',$sizeMeth='scale')
이 부분을 수정해 줍니다.

$img_path 는 spacer.png 이미지가 있는 절대 경로 입니다.
$sizeMeth 는 파일내에 설명이 되어 있습니다.

수정을 다 하시면,

이 파일 두개를 계정의 적당한 위치에 업로드 합니다.

적용하고자하는 페이지의 소스 가장 상단에
◀? ob_start(); ?▶
를 넣고,

페이지 소스의 가장 하단 마지막에

◀?
include_once '경로/PNG24.php';
echo PNG24(ob_get_clean());
?▶
를 넣습니다.

이 파일은 이미지 태그와 스타일 시트의 background-image: url('이미지 경로'); 이 두가지에 적용이 됩니다.

페이지의 내용에서 png 이미지가 들어간 부분의 코드를 찾아서 변환을 해주는 것이므로
멸가지 주의 사항이 있습니다.

이미지를 그대로 사용하고자 한다면,
◀IMG▶ 태그에서는,

◀IMG SRC="그림"  BORDER="0" HEIGHT="100" WIDTH="100"▶

위에서처럼 이미지태그에서 각각의 값들에 반드시 따옴표를 넣어주어야 하며, 사이즈 값의 뒤에 px를 붙이지 말아야 합니다.

또한 패턴 형식의 백그라운드 이미지로 사용하고 싶다면,

background-image: url('이미지 경로'); 등의 스타일로 사용하는데,

반드시 url 부분을 작은 따옴표로 묶어주며, 적용하고자 하는 영역의 사이즈 정보가 있어야 합니다.
즉. 태그에 가로 세로 크기가 있던지, 스타일에 가로 세로 사이즈 정보가 있어야 합니다.
그래야 배경 전체에 이미지가 적용이 됩니다.

원래 스타일로 백그라운드의 패턴을 정할때 background-repeat 로 정의를 해서 반복의 여부를 정하는데 png파일을 사용할 때에는 background-repeat를 적용하면 안됩니다. png파일을 사용할 때에는 배경이미지를 반복으로 보여주는 것이 아니라 늘려서 보여주기 때문 입니다.

적용하기 같단하니까 한번씩들 해 보시기 바랍니다.

이걸 이용해먹을 만한 곳이라면,

아바타를 그림으로 뿌려줄 때, 대부분 투명한 GIF를 써서 표현을 하는데 그럴경우 좀 거칠고, 투명한 부분의 알파값을 조절하기가 불가능 하지만, png 파일을 쓰면 투명한 부분에 투명도를 조절 가능해 지니까 보다 이쁜 아바타 시스템을 만들수도 있겠구요.

아니면 웹 페이지의 테두리나 레이아웃에 적용을 해서 사용을 해도 될 것이고....

암튼 활용은 여러분이 알아서 하시길...

제 홈에 오시면 죄측의 로그인 부분에 각종 버튼, 회원 사진, 회원 아이콘, 회원 이름대신 보이는 그림, 사이트의 테두리에 그림자 등이 모두 투명한 PNG 파일로 되어 있습니다. 소스 보기로 보시면 더 잘 이해가 가실 겁니다.

제 홈의 임시게시판에도 이 파일을 욜려 놓았으니 필요하시면 받아 쓰세요.
* DeX™님에 의해서 게시물 이동되었습니다 (2004-12-29 16:51)