filter 란 포토샵을 사용해보신
분이라면 바로 이해가 가실겁니다. 그러나
초보분들은 모르시겠죠?^^ 필터는 그림이나
글자에 효과를 주는 겁니다. 무슨 효과냐구요?
그럼 이해를 돕기위해 밑에 그림을 한번 보세요.
위에 맨 왼쪽에 있는 이미지가
원본이미지입니다. 보시는 거와 같이 Filter를
사용하시면 이미지 뿐만 아니라 글자에까지
여러가지 효과를 낼 수 있습니다. (단, 필터는
익스플로워4.0이상에서 적용됩니다.) 알아두면
홈페이지 제작하는데 많은 도움이 되겠죠? 그럼
차근차근 한가지씩 배워보도록 하겠습니다.
※ 필터 명령어와 속성
필터의 기본명령어는 <태그 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=장진영.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)">장진영</div> |
원본 |
변환 |
장진영 |
장진영 |
|
2.
blur
| 속 성 |
기 능 |
| add |
원본이미지를
합칠것인가 결정 합칠경우 1 그렇지 않을
경우 2 |
| direction |
방향설정,
시계방향 각도로 0, 45, 90, 135, 180, 225, 270, 315 값을
설정함 |
| strength |
강도
수치조절, 0~100까지 설정, 수치가 클수록 강도가
높아짐 |
| 역시 예제를 보면
이해가 쉬워집니다. 여기서 주의할 점은
이미지에 add 속성을 사용할 경우 그림의
원형이 거의 보이지 않게 됩니다. |
|
<img
src="장진영.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)">장진영</div> |
원본 |
변환 |
장진영 |
|
|
3. chroma
| 속 성 |
기 능 |
| color=색삭명
or RGB색상코드 |
투명하게
하고자 하는 색을 지정 |
| 자~~
예제를 볼까요? color에 원하는 색만 집어
넣으면 끝납니다. 간단하죠~~^^ |
| <img src="음표.gif"
style="filter:chroma(color=black)"> |
|
원본 |
변화 |
|
|
