웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[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;">
간단합니다.
위의 내용을 제대로 숙지하셨다면 당신은 어느새 필터의 달인![틀려!]
그럼 허접한 팁을 봐주셔서 감사합니다.
이미지까지 넣어서 보여드리고 싶었으나 귀찮은즘으로 인해 이만 사라집니다.
[주석 - 잘못된 내용은 언제나 겸허한 마음으로 받습니다]
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;">
간단합니다.
위의 내용을 제대로 숙지하셨다면 당신은 어느새 필터의 달인![틀려!]
그럼 허접한 팁을 봐주셔서 감사합니다.
이미지까지 넣어서 보여드리고 싶었으나 귀찮은즘으로 인해 이만 사라집니다.
[주석 - 잘못된 내용은 언제나 겸허한 마음으로 받습니다]
댓글 2
-
Root
2004.04.21 22:32
으음... 윈도우용 IE에서만 돌아가나요? Mac용 IE 같은 타 기종의 경우도 안되는건지요.. -
드래군
2004.04.21 23:21
윈도우용에서만 돌아간다고 알고 있습니다.[일단은]