웹마스터 팁

[tip]간단한 반투명 필터 적용법

2004.04.21 20:12

드래군

간단하게 본문을 시작하기 전에 몇가지 알아두셔야 할 사항입니다.


CSS의 필터는 인터넷 익스플로러가 독자적으로 확장하여 웹페이지에 보여주는 것이므로

window판 인터넷 익스플로러에서만 보여지게 됩니다.

또한 필터 중에서는 익스플로러 4.0 이상에서 적용되는 필터가 있는거 하면

다이렉트X가 필요한 익스플로러 5.5 이상에서 표시되는 필터들이 있습니다.

글에서는 간단한 팁만 설명하므로...[그리고 제가 잘 아는 것도 아니므로]

이 팁은 익스플로러 6.0에서 제작되었습니다.

대략 이정도에서 본문으로 넘어 갑니다.



1. 텍스트에 이미지 같은 그라데이션을 주고 싶다!

- <font size="7" style="filter:alpha(opacity=100,finishopacity=0,style=1);height:10">Document example</font>

아주 간단합니다. <font>태그 내에 style="filter:alpha(opacity=100,finishopacity=0,style=1);height:10" 이 부분만

넣어주면 되는 것으로 스타일 부분에 대해 약간의 설명을 하도록 하겠습니다.


filter:alpha - 반투명효과의 필터를 적용합니다.

opacity=100 - 시작지점의 반투명도를 지정합니다. 이 때에 100은 100%를 의미하므로 투명도가 0% 입니다.

finishopacity=0 - 종료지점의 반투명도를 지정합니다. 0이므로 투명도 100% 겠지요.

style=1 - 반투명 필터의 종류를 지정합니다. 0 부터 3 까지 있으며, 0은 기본값이므로 지정하지 않으셔도 되며,

1은 부채꼴 모양, 2는 방사선꼴 모양, 3은 직사각형 모양으로 그라데이션을 지정합니다. 스타일을 1부터 3 중 한개를

설정하시면 시작 지점과 종료지점의 반투명도를 각각 지정해주셔야 하며, 기본값 0을 지정 시 시작지점의

반투명도만을 지정해주시면 됩니다.


간단히 이정도만 하겠습니다.

그리고 height:10 를 넣지 않으면 필터 적용이 되지 않습니다. height 내에 숫자는 관계없지만(0을 넣으도 무방)

높이를 지정하지 않으면 필터 적용이 되지 않습니다.

[정확히 말해서 크기지정을 하지 않으면 적용되지 않는다 입니다.]



2. 그럼 이미지에는 어떻게 필터를 적용하는가!

<img src="http://img.ragnarok.co.kr/download/wallpaper/wallpaper_64_1024.jpg" style="filter:alpha(opacity=100,finishopacity=0,style=1);width:1024;height:768;">

간단합니다.

위의 내용을 제대로 숙지하셨다면 당신은 어느새 필터의 달인![틀려!]


그럼 허접한 팁을 봐주셔서 감사합니다.

이미지까지 넣어서 보여드리고 싶었으나 귀찮은즘으로 인해 이만 사라집니다.


[주석 - 잘못된 내용은 언제나 겸허한 마음으로 받습니다]
제목 글쓴이 날짜
iframe 그때그때 달라요 ~ [높이자동변경] [15] kim's 2005.02.18
[기초]홈페이지의 프레임 나누기 입니다. [5] piasol 2004.12.10
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] 편입성공기 2004.12.06
도메인 포워딩 즉 페이지 자동이동하기 [6] 편입성공기 2004.12.06
페이지 회색스크롤바로 바꾸기 편입성공기 2004.12.06
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] piasol 2004.12.03
최근게시물의 폰트크기와 링크색상 바꾸는 방법 LUFFY 2004.11.20
웹폰트사용에 대한 실체를 밝힌다!! [22] Multi_Taeji 2004.11.13
웹문서 검색을 대비한 헤더,푸터 나누기. [4] 그럴까? 2004.10.29
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] canelia 2004.10.29
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] file Multi_Taeji 2004.10.13
테이블 주위에 점선효과!!!~~(초간단팁!) [6] 초라 2004.09.25
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] 詩와언어™ 2004.08.27
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
플래시 swf파일 배경 투명하게 하기 ~~~ [8] kim's 2004.05.09
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] file 남규성 2004.05.05
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] kim's 2004.04.29
[tip]간단한 반투명 필터 적용법 [2] 드래군 2004.04.21
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01