필터 속성

Filter 속성 이 번에는 태그중에서 filter 효과를 내는 태그에 대해서 알아 보겠습니다. 이 효과를 알아 둔다면 굳이 포토샵을 쓰지 않더라도 포토샵에서 자주 쓰는 필터의 효과를 충분히 낼 수 있으리라고 생각을 합니다. 기본 형식 기본 형식 <태그 style=filter:필터속성(속성값)> 이미지 <img src=이미지의 경로와 이름 style=filter:필터속성(속성값)> 글자 <div style=width:글자넓이 height:글자높이 font-size:글자크기 filter:필터속성(속성값)> 필터효과를 내는데 쓰이는 태그 ● body / div / img / input / marquee / span / table / td / th / textarea ● 예외적으로 dropshadow에서 쓸 수 없는 태그    body / img / input / textarea 는 dropshadow 에서는 쓸 수 없다. 필터 태그에 쓰이는 속성 alpha / blendTrans / blur / chroma / dropShadow / filpH / filpV / glow / gray / invert / light / mask / redirect / revealTrans / shadow / wave / xray  1. alpha 글자나 이미지에 투명도를 조절하는 속성입니다. opacity 불투명도를 조절하는 역할을 하며, 기본값은 100입니다. 0 ~ 100 까지를 쓸수 있으며 숫자가 작을수록 투명해지며 0 이면 완전 투명입니다. style 모양을 나타내며, 0 ~ 3 까지의 값을 가집니다. 1은 선형, 2는 타원형, 3는 직사각형 finishOpacity 0 ~ 100 까지의 값을 가지고 있습니다. [예] 원본 변환 송파나루터 송파나루터 <img src=images/bear.jpg style=filter:alpha(opacity=100,style=2,finishopacity=0)> <img src=images/ingan.jpg style=filter:alpha(opacity=40,style=3,finishopacity=0)> <div style=width:200;height:20;font-size:20;filter:alpha(opacity=40,style=1)>송파나루터</div>  2. blur 글자를 흐려지게 하는 속성입니다. add 효과를 준것과 원본을 합칠것인지를 결정. 1이면 합치는 것이고, 2이면 합치지 않는것입니다. direction 방향설정, 시계방향으로 0 / 45 / 90 / 135 / 180 / 225 / 270 / 315 strength 강도를 결정. 0 ~ 100, 수치가 높을수록 강도가 높음 . [예] 원본 변환 송파나루터 송파나루터 <img src=images/ingan.jpg style=filter:blur(direction=135,strength=15,add=1)> <img src=images/img37.gif style=filter:blur(direction=225,strength=13,add=2)> <div style=width:200;height:20;font-size:20;filter:blur(direction=135,strength=7)>송파나루터</div>

3. fliph / flipv 글자의 상하와 좌우가 바뀌게 됩니다. fliph flip horizon. 글자의 좌우를 바꾸어 주는 속성입니다. flipv flip vertical. 글자의 상하를 바꾸어 주는 속성입니다. [예] 원본 변환 송파나루터 송파나루터 <img src=images/bear.jpg style=filter:fliph()> <img src=images/ingan.jpg style=filter:flipv()> <div style=width:200;height:20;font-size:20;filter:fliph()>송파나루터</div>  4. invert / mask 글자를 흐려지게 하는 속성입니다. invert 색상, 채도, 명도를 반대값으로 나타내는 속성입니다. mask 불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다. color="색상명 이나 grb 16진수" [예] 원본 변환 여기는 투명마스크를 씌웠기 때문에 아무것도 안보이지만 여러분의 이해를 돕기위해 빨간 테두리를 넣었습니다. 송파나루터 송파나루터 <img src=images/woman.jpg style=filter:invert()> <img src=images/woman.jpg style=filter:mask(color=red);> <div style=width:200;height:20;font-size:20;filter:mask(color=green)>송파나루터</div>  5. chroma 지정된 특정 색을 투명하게 만들어 줍니다. color=색상명이나 RGB 16진수 투명하게 하고자 하는 색깔을 넣으면 됩니다. [예] 원본 변환 <img src=images/img39.gif style=filter:chroma(color=black)> <img src=http://studyho.com/img/userimage/title-movi.gif style=filter:chroma(color=black);>  5. wave 물결모양으로 효과를 주는 역할을 합니다. add 원본 이미지를 합칠경우는 0, 그렇지 않을 경우 1 freq wave의 갯수를 결정 lightstrength 0 ~ 100 / wave 에서 빛의 강도를 결정합니다. phase 0 ~ 100 / 웨이브 효과의 시작위치를 나타냅니다. strength 1 ~ 100 / 웨이브의 강도를 지정합니다. [예] 원본 변환 송파나루터 송파나루터 <img src=images/bear.jpg style=filter:wave(strength=7,freq=30,lightstrength=10,phase=1,add=0)> <img src=images/ingan.jpg style=filter:wave(strength=15,freq=5,lightstrength=25,phase=11,add=1)> <div style=width:200;height:20;font-size:20;filter:wave(strength=3,freq=5,lightstrength=2,phase=4,add=0)>송파나루터</div>  6. xray x-ray 사진과 같은 이미지 효과를 줍니다. xray xray 사진처럼 이미지를 흑백으로 나타냅니다. [예] 원본 변환 <img src=images/woman.jpg style=filter:xray()> <img src=images/ingan.jpg style=filter:xray()>  7. shadow 글자에 쓰이는 효과로써, 특정위치에 그림자를 만들어 줍니다. color=색상명이나 RGB 16진수 효과를 나타낼 색상명을 지정합니다. direction 그림자의 방향을 결정. 시계방향으로(0 / 45 / 90 / 135 / 180 / 225 / 270 / 315)설정 [예] 원본 변환 송파나루터 송파나루터 운영자 : 강상호 운영자 : 강상호 <div style=width:200;height:30;font-size:20pt;filter:shadow(color=green,direction=135>송파나루터</div> <div style=width:200;height:30;font-sizw:20pt; filter:shadow(color=deepskyblue,direction=225)>운영자 : 강상호</div>    8. glow / gray 색상효과를 나타내는 속성입니다. glow 지정된 색을 번지게 하는 효과를 나타냅니다. color=색상명이나 RGB 16진수 strength=1 ~ 100 / 번지는 강도를 조절. gray 이미지나 글자를 흑백으로 나타낸다. [예] 원본 변환 송파나루터 송파나루터 송파나루터 송파나루터 <img src=images/bear.jpg style=filter:gray()> <div style=width:200;height:20;font-size:20;filter:glow(color=red,strength=2)>송파나루터</div> <div style=width:200;height:20;color:green;font-size:20;filter:gray()>송파나루터</div>  9. dropshadow 글자에만 사용하는 속성으로 특정위치에 그림자를 만들어 줍니다.     단 div / marquee / span / table / td / th 태그에만 적용 color 그림자의 색상을 지정. 색상명 또는 RGB 16 진수 offx / offy 대상으로 부터 그림자의 좌표 position 0 이면 투명픽셀, 1 이면 불투명 픽셀로 부터 그림자를 만들어 줍니다. [예] 원본 변환 송파나루터 송파나루터 운영자:강상호 운영자:강상호 <div style=width:200;height:40;font-size:20;filter:dropshadow(color=skyblue,offx=9,offy=9,position=1)> <div style=width:200;height:40;font-size:20;filter:dropshadow(color=steelblue,offx=5,offy=5,position=0)>