Section 08 필터효과, 이미지 맵, 애플릿
Section 08 필터효과, 이미지 맵, 애플릿
필터는 이미지나 글자에 효과를 주는 방법을 말합니다. 포토샵에서의 filter와 비슷한 효과를 나타낼 수 있는데 이미지에 필터효과를 사용할때는 <img>태그와 함께 사용하고, 글자에 필터 효과를 주기 위해서는 <font>태그, <div>태그, <hn>태그 등 문자를 출력하기 위해 사용했던 태그와 함께 사용하면 됩니다.
- 방향전환
이미지를 상.하로 뒤집거나 좌.우로 뒤집에 주는 효과입니다
기본 형식
<img src="파일경로" width="너비" height="높이" style="filter:필터효과"> <font size="글자크기" color="글자색" style="height:높이; width:너비; filter:효과"> |
필터효과 | 설명 |
Filter:fliph() | 이미지를 좌.우방향으로 뒤집습니다 |
Filter:flipv() | 이미지를 상.하방향으로 뒤집습니다 |
Height | 필터효과가 나타나게 될 높이입니다. 문자에 필터효과를 나타내기 위해서는 반드시 지정해야 하는 속성입니다 |
width | 필터효과가 나타나게 될 너비입니다. Height와 마찬가지로 문자에 필터효과를 나타내기 위해서는 반드시 지정해야 하는 속성입니다 |
- 투명도 조정(style)
이미지 또는 글자에 투명도를 조절하는 필터효과 입니다
기본 형식
<img src="파일경로" width="너비" height="높이" style="filter:alpha(style=유형, opacity=n, finishopacity=n)"> <font size="글자크기" color="글자색" style="height:높이; width:너비; filter:alpha(style=유형, opacity=n, finishopacity=n)"> |
필터효과 | 설명 |
Filter:alpha(style=1) | 이미지에 선형으로 투명도를 줍니다 |
Filter:alpha(style=2) | 이미지에 원형으로 투명도를 줍니다 |
Filter:alpha(style=3) | 이미지에 사각형으로 투명도를 줍니다 |
Opacity | 불투명도를 조절합니다. 0~100까지의 수치를 사용하여 작아질수록 투명해집니다 |
Finishopacity | 불투명도를 조절합니다. 0~100까지의 수치를 사용하여 작아질수록 투명해집니다 |
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>무제 문서</title> </head>
<body> <table border="0" align="center" cellpadding="0" cellspacing="5" <tr><th colspan="4" align="center"> <font color="#FF4500" size="5" > 이미지 필터 투명도<p/></font> </th></tr> <tr><th align="left">원본</th> <td colspan="2" align="center"> <img src="SDC11738.JPG" width="100" height="75" /> </td> <td colspan="2" align="center"><font>이미지필터</font></td></tr> <tr><td align="left"> </td><th align="center">기본</th> <th align="center">Opacity 적용</th><th align="center">기본</th> <th align="center">Opacity 적용</th></tr> <tr><th align="left">선형</th> <td align="center"><img src="SDC11738.JPG" width="100" height="75" style="filter:alpha(style=1)"></td> <td align="center"><img src="SDC11738.JPG" width="100" height="75" style="filter:alpha(style=1,opacity=0,finishopacity=100)"></td> </tr> </table>
</body> </html> |
내일은 추가적인 효과 필터기능에 대해서 작성하도록 할게요 ~