HTML-Filter Tag

F I L T E R   태 그

 

                filter 태그란 포토샵 처럼 글자나 이미지에 여러 가지 효과를 주는 것으로 익스플로 4.0 이상에서만 적용 됩니다.

             자 그럼 밑에 예제를 먼저 보시고 시작 해볼까요.

OXTAG	OXTAG	OXTAG	OXTAG	OXTAG

                 윗 줄의 맨 왼쪽이 원본입니다. 이와 같이 그림이나 글자에 여러 가지 효과를 주는 것이 filter tag입니다.
             이밖에 몇가지가 더있는데 차근차근 배워 보도록 합시다.

 

 

☞ 필터 명령어와 속성

필터의 기본명령어는 <태그 style=filter:필터속성> 입니다.

이미지	<img src=이미지파일 style="filter:필터속성">
글자	<div style="width:글자넓이; height:글자폭; font-size:글자크기pt; filter:필터속성">

앞에 "태그"라고 적혀 있는 부분에는 BODY, DIV, IMG, INPUT, MARQUEE, SPAN, TABLE, TD, TEXTAREA, TH 등의 태그명령어가 들어갈 수 있습니다. (단, dropShadow는 DIV, MARQUEE, SPAN, TABLE, TD, TH 의 태그에서만 적용됨)   그리고 "필터속성"이란 부분에 여러가지 명령어가 들어갑니다.  alpha blendTrans blur chroma dropShadow flipH flipV  glow gray invert light mask redirect revealTrans shadow wave xray 등등.....

 

 

                 1. alpha 태그는 그림이나 글자에 투명도를 나타내는 명령어 입니다.

태  그   속   성	설                      명
opacity (불투명도)	기본값은 100 이며 0~100까지 수치조절, 숫자가 작을수록 투명해짐
style (모양)	0~3까지 선택, 0은 단일, 1은 선형, 2는 타원형, 3은 직사각형
finishOpacity	style 1,2,3 의 경우 불투명도에 영향을 줌, 0~100 까지 수치조절
모델 사진을 가지고 예를 들어 보겠습니다.  첫번째가 그림의 경우고, 두번째가 글자의 경우입니다.
① <img src=model.jpg" style="filter:alpha(opacity=100, style=2, finishopacity=0)">
② <div style="width:100; height:18; font-size:18pt; filter:alpha(opacity=50, style=1,                      finishopacity=0)">OXTAG</div>
원              본	실    행    화    면	원              문	실   행   화   면
		OXTAG	OXTAG

 

 

                 2. blur 태그는 흐리게 하는 효과를 나타내는 명령어 입니다.

태 그  속   성	설                      명
add	원본이미지를 합칠것인가 결정 합칠경우 1 그렇지 않을 경우 2
direction	방향설정, 시계방향 각도로 0, 45, 90, 135, 180, 225, 270, 315 값을 설정함
strength	강도 수치조절, 0~100까지 설정, 수치가 클수록 강도가 높아짐
모델 사진을 가지고 또 연습해 볼까요. 여기서 주의할 점은 이미지에 add 속성을 사용할 경우 그림의 원형이 거의   보이지 않게 된답니다.
① <img src="model.jpg" style="filter:blur(direction=135,strength=100)">
② <div style="width:100; height:18; font-size:18pt;                      filter:blur(add=1,direction=135,strength=10)">OXTAG<div>  원              본 실    행    화    면 원              문 실   행   화   면  OXTAG   OXTAG

 

 

                  3. chroma 태그는 지정된 특정색을 투명하게 만들어 줍니다

태   그   속    성	설                      명
c o l o r = 색 삭 명 o r R G B 색 상 코 드	투 명 하 게 하 고 자 하 는 색 을 지 정
이것두 직접 해봐야겠죠. 투명하게 하고자 하는 color에 원하는 색만 집어 넣으면 끝납니다. 간단하죠~~^^*
<img src="ex3.gif" style="filter:chroma(color=black)">
원            본	실     행    화    면

 

         스크롤 바가 상당히 내려왔네요. 하지만 끝까정 해볼랍니다. 열분더 지루하다거 하지마시거 열띠미 해봐요....^^*

 

 

                  4. dropshadow 태그는 특정위치에 그림자를 만들어 줍니다. 한가지 주의점은 dropShadow는
                           DIV, MARQUEE, SPAN, TABLE, TD, TH에만 적용됩니다

 

태  그  속   성	기     능    설    명
color=색명 or RGB색상코드	그림자의 색상을 지정
offx=수치 offy=수치	대상으로부터 그림자의 x,y좌표
positive=0 or 1	0 이면 투명필셀, 1 이면 불투명픽셀로부터 그림자를 만들어 줌
dropshadow명령어는 이미지에서는 적용이 되지 않습니다. 글자에서만 적용이 되죠. <div style="width:100; height:35; font-size:18pt; filter:dropshadow(color=#cccccc, offx=10, offy=10, positive=1)"> 파란하늘 </div> 파란하늘 파란하늘 파란하늘 파란하늘 파란하늘 파란하늘 파란하늘 파란하늘

 

 

                  5. fliph , flipv 태그는 수평이미지와 수직이미지(반전)를 만들어 줍니다. 

 

명    령    어	기        능       설       명
flIph	이미지나 글자의 좌우가 바뀌게 되죠
flIpv	이미자나 글장에 상하가 바뀜니다
이미지나 글자에 상하좌우를 바꿔줍니다. 간단하죠  <img src="model.jpg" style="filter:fliph()"> <div style="width:100; height:25; font-size:15pt; filter:flipv()">OXTAG</div> 원본 fliph flipv OXTAG OXTAG OXTAG

 

 

                   6. glow, gray 태그는 글자나 이미지에 색상효과를 나타내는 명령어입니다.

명   령   어	기         능        설        명
glaw	글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다
color=색명 or RGB색상코드 , strength=1~100 번지는 강도를 조절
gray	이미지를 흑백으로 나타냅니다
<div style="width:100; height:25; font-size:18pt; filter:glow(color=red, strength=10)">OXTAG </div>  <img src=model.jpg style="filter:gray()"> OXTAG OXTAG OXTAG OXTAG

 

 

                    7. invert, mask 태그

명  령  어	기    능   설   명
invert	색도, 채도, 밝기를 반대값으로 나타나게 합니다
mask	불투명한 픽셀은 투명마스크를 씌우고 투명픽셀은 지정된 색으로 마스크를 씌웁니다.  color=색명 or RGB색상코드
<img src=model.jpg style="filter:invert()"> <div style="width:100; height:25; font-size:18pt; filter:mask(color=blue)">oxtag world</div> 원본 invert mask(아무것도 안보임) oxtag world oxtag world

                     위 mask 부분은 아무 것도 안보이죠. 그러나 이미지가 불러와져 있답니다. 마우스로 드래그 한 번 해보세요.
                          그럼 아실듯.........^^*

                     훔냐리~~~ 한참을 내려 왔네요...ㅎㅎ 그러나 아직도 더 남았답니다. 그럼 커피 한잔 마시고
                     다시 시작해 볼까요. 지루하지는 안쵸???

 

                     8. shodow 태그는 dropshadow와 비슷한 명령어 같죠. 하지만 눈을 동그랗게 뜨고 비교해보세요.

명   령   어	기   능   과   설  명
color=색명 or RGB색상코드	효과를 나타낼 색상을 지정합니다
direction	나타나게될 그림자의 방향을 결정, 시계방향으로 0 45 90 135 180   225 270 315의 값을 지정
이것도 마찬가지로 이미지에서는 적용이 잘 되지 않습니다. 글자에서 주로 사용할 수 있는 필터입니다  <div style="width:100; height:25; font-size:18pt;  filter:shadow(color=#cccccc,direction=45)">태 그 세 상</div> 원  문 태 그 세 상 태 그 세 상 태 그 세 상 변  환 태 그 세 상 태 그 세 상 태 그 세 상

 

 

                      9. wave 태그는 물결 모양의 효과를 나타내는  것입니다.

 

태  그  속  성	기 능  및  설  명
add=0 or 1	원본이미지를 합칠경우 0, 그렇지 않을 경우 1
freq=수치	wave의 개수를 결정
lightstrength=0~100	wave에서 빛의 강도 %
phase=0~100	웨이브 효과의 시작위치를 나타냅니다
strength=1~100	웨이브의 강도를 지정합니다
<img src=model.jpg style="filter:wave(strength=8,freq=3,lightstrength=10,phase=25,add=0)"> 원      본 푸힛! 쭈그리다. 얼뤠 물결이 파도를 치네 모  델

 

 

                                      드디어 마지막입니다.... 필터 태그는 이것만 하고 끝내겠습니다.......^^*

                     10. xray 태그는 엑스레이 화면처럼 이미지를 나타나게 해줍니다

속         성	기 능  및  설  명
xray	이미지를 흑백으로 나타냅니다
<img src="model.jpg" style="filter:xray()"> 원본 xray

 

 
                     11. light, redirect, revealtrans, blendtrans 
                           이 필터태그 들은 단독으로 사용되지 않고 자바스크립트와 어울려 갖가지 효과를 나타냅니다.
                         revealtrans,blendtrans는 transition(변환) 효과를 가져다 주는데 revealtrans를 xmeta 태그에
                         사용하면 page transition 효과를 얻을 수도 있습니다.

 

                             지금까지 필터 태그 공부 하시느라 수고하셨습니다. 해보시니까 포토샵과 같은 효과를 주죠.
                             이제 폼태그로 넘어 갈까요....^^*