웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
IE 에서도 투명 알파값이 적용된 PNG 이미지를 맘껏 활용하자!
2004.12.27 18:28
ㅎㅎ 제목을 좀 도전적으로 바꾸었습니다.
모질라 계열에서는 투명한 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)
모질라 계열에서는 투명한 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)
댓글 8
-
에지
2004.12.27 20:35
PHP 스터디로 가도 될듯; -
THE PAPER™
2004.12.27 21:05
to 에지 : 제가 올릴 곳을 잘못 선택한건 아니죠? ^^ -
무료사이다
2004.12.27 21:20
제로보드와는 별관련이 없는듯;; -
THE PAPER™
2004.12.27 21:26
to 무료사이다 : ㅜ.ㅜ 그렇군요... 전 이걸로 각종 외부로그인 스킨과 게시판 스킨, 플러그인을 만들고 있거든요.
스킨 등을 만들때 필요한 요소로 쓰일 수도 있으니까 팁란에 등록을 했습니다. -
ganji
2004.12.28 06:59
좀더 간단한 방법이라고 할까요,,미니위니에 "무화"님이 올려주신 소스입니다.
출처 / http://miniwini.com/miniwinis/bbs/index.php?bid=share&m=search&mode=read&id=3042&p=1&keyword=png&scale=1&op=and&idx=1 -
ganji
2004.12.28 07:21
테스트 페이지를 한번 만들어 봤습니다.
일단 알파값을 처리하지 않은 페이지
http://ganji.80port.net/png_test/png_test002.php
다음은 출처의 소스를 삽입해서 알파값을 처리하고 레이어를 이용해서 이미지위에
덮어씌운 이미지의 "Opacity" 수치를 포토샵으로 전체적으로 더 낮춘 페이지
http://ganji.80port.net/png_test/png_test001.php -
THE PAPER™
2004.12.28 09:19
to ganji : 원리는 같지만 자바스크립트로 된거네요. 그러나 미니위니의 "무화" 님 경우에는 이미지 태그에만 가능 하군요. 익스플로러에서 png이미지의 경우에 이미지 태그에서 사이즈값을 주어도 지정한 사이즈로 변형이 잘 되지 않는 경우가 있습니다. 이럴 경우에 스타일로 지정된 이미지는 변환이 안되는군요. -
hozz호찌
2004.12.30 22:29
좋은 정보에 감사드려요 ^_^*
제목 | 글쓴이 | 날짜 |
---|---|---|
나만의 미니홈 만들기 ㅡ 간단한 최근글 불러오기 [6] | 예뜨락 | 2005.05.09 |
나만의 미니홈 만들기 ㅡ password.php [8] | 예뜨락 | 2005.05.07 |
winamp 방송정보 읽어오기 심각한 문제해결 | 이승원 | 2005.05.04 |
[초보]아주쉬운 PHP로 그림에 글자 입히기 [11] | 김규백 | 2005.04.04 |
DB에서 각종 기념일을 내용,순서순으로 뽑아 정렬하기.. | 박순영 | 2005.03.17 |
ASC(순차), DESC(역순) 정렬하기. [4] | Xian | 2005.03.03 |
사용자 등록/DB생성/테이블 생성 [3] | QQQ | 2005.03.03 |
[날짜 구하는함수업]내일 날짜와 1년 후 년도 구하기 [8] | ssukai | 2005.02.24 |
자바스크립트 단축키 지정을 쉽게하자. [1] | 권태수 | 2005.02.14 |
내 컴퓨터가 표현할 수 있는 문자들. [6] | 최호성 | 2005.01.30 |
게시판 테이블 생성을 쉽게하자. [2] | QQQ | 2005.01.29 |
날짜 구하는 함수.. ... [3] | 김명현 | 2005.01.24 |
우리가 사랑한지 몇일째 날짜세주는 PHP 소스 [12] | 레드 | 2005.01.16 |
PHP 왕초보 입문기(총괄) [4] | 하나둘 | 2005.01.15 |
퍼미션을 보기좋게 구하자! [4] | 플로렐라 | 2005.01.03 |
나만의 미니홈 만들기 ㅡ delete.php 파일 [2] | 예뜨락 | 2005.01.03 |
"를 그냥 사용하기 [3] | 추천대화상대 | 2005.01.02 |
IE 에서도 투명 알파값이 적용된 PNG 이미지를 맘껏 활용하자! [8] | THE PAPER™ | 2004.12.27 |
4. 쿼리문 [6] | 티다 | 2004.12.11 |
'참조'에 관한 간단한 예제 | 플로렐라 | 2004.12.09 |