웹마스터 팁

[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;">

간단합니다.

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


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

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


[주석 - 잘못된 내용은 언제나 겸허한 마음으로 받습니다]
제목 글쓴이 날짜
동영상과 함께 자막 재생하기. [4] 세강:D 2004.08.16
도메인 포워딩 하기 [4] 나준혁 2004.07.27
이미지에 필터만으로 그림자주기.. [15] Simsim 2004.07.07
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] ☺심심 2004.06.06
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] 올리못™ 2004.05.30
아이프레임 가로스크롤바 없애기 [3] 백승창 2004.05.28
아기창 뜨고 부모창 닫기 [6] 임소식 2004.05.19
플래시 swf파일 배경 투명하게 하기 ~~~ [8] kim's 2004.05.09
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] kim's 2004.04.29
[tip]간단한 반투명 필터 적용법 [2] 드래군 2004.04.21
제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] Danggn™ 2004.04.17
(For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] 쉬드 2004.04.10
모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] 학몽 2004.03.09
스타일 시트파일을 만들기 .. [4] 박종익 2004.03.07
간단하게, 색깔있는 밑줄 긋기. [4] naughtykidd 2004.02.27
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] naughtykidd 2004.02.26
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] 01CODE.com 2004.02.26
전송버튼의 테두리를 없애 BoA요 >_< [7] 플로렐라 2004.02.14