글자태그

 

 자...이번에는 목록 만들기에 대해서 배워보도록 하겠습니다.  여러분...목록이 뭔지는 아시져? 잉..? 몰라요? 흠....모르시는 분들을 위해 직접 보여드리져^^

※ 글자태그의 기본  글자태그는 기본적으로 입니다. 그런데 ☜이것만 있어서는 아무런 효과를 나타낼 수 없구요....단지 기본적인 뼈대이며...☜이것에 각각의 기능을 나타내는 속성이 붙는 겁니다.  예를 들자면  녹색 이런식 이져^^      ※ 글자색 조정 (   )  제일 먼저 글자의 색을 조정하는 방법입니다. 색을 영어로 color 라고 하죠?^^ 모르시는 분들은 없겠져?^^ 그대루 써주시면 됩니다. 단, 태그를 사용하는데 있어서 글꼴을 제외하곤 한글을 쓰지 못합니다. 전부다 영어나 기호를 사용해야 하죠. 그러기 때문에 색명을 적을 때도 영어로 "red" , "green" , "yellow" ☜이런 식으로 적어 주어야 합니다.   태그 변화 이건 빨간색 이건 빨간색 이건 파랑색 이건 파랑색 이건 녹색 이건 녹색 이건 빨간색 　이건 빨간색 이건 노랑색 이건 노랑색  위에 표를 보니 이해가 되시져....^^ 뒤에 두개는 RGB색상코드를 넣은 겁니다. RGB색상코드를 알고 싶은 분은 ☞[이곳을 클릭] 하시면 RGB색상코드표가 있으니 거길 참조하시길 바랍니다.  ※ 글자 크기 조정 ( 혹은 혹은 ~ )    글자 크기를 조절하는 방법입니다. 컬러와 마찬가지로 크기는 영어로 size 져..^^ 그리고 태그 안에 수치나 숫자가 커질 수록 글자크기가 커집니다.(주의 : 의 경우숫자가 작을 수록 커짐) 단, font size의 경우 최대 7까지 밖에 크게 할 수 없구요...h의 경우도 최대 h1까지가 한도이죠. 예제를 한번 볼까요?^^ 　태 그 변 화 글씨 크져^^ 글씨 크져^^ 이건 더 크져^^ 이건 더 크져^^ 더욱 크져 더욱 크져    아시겠져^^ 마지막에 가장 큰 글씨는 스타일 이용한 건데요....이건 수치를 넣은 만큼 크기가 무한대로 커지기 때문에 사용하실 때 조심하시도록.......그리고 앞에 ☜이 부분에 font 대신 다른 태그가 들어갈 수도 있습니다. 다른 태그를 집어 넣으면 해당태그에 속하는 글자의 크기가 지정된 수치만큼 커집니다.^^  ※ 글꼴 조정 ( )    이번에는 글꼴 조정하는 방법입니다. 글꼴이 뭔지는 아시져? ^^ 우리가 "돋움체","궁서체","바탕체" 등...뭐 이런 글자의 모양을 말하는 거죠^^ 이러한 글꼴도 역시 태그를 이용해서 조정할 수 있습니다.   태 그 변 화 이건 궁서체네용^^ 이건 궁서체네용^^ 이건 돋움체이구용^^ 이건 돋움체이구용^^ 이건 바탕체입니다^^ 이건 바탕체입니다^^ 이건 Arial 체입니다.^^ 이건 Arial 체입니다. <!-- 2003/05/15 추가내용 --> 참고적으로 돋움체 궁서체 바탕체 Arial 등의 글씨체들은 컴퓨터에 윈도우를 설치하면 자동으로 같이 설치되도록 되어 있는 기본폰트입니다. 때문에 위에 표에서처럼 사용해도 다른 사람들 역시 윈도우가 설치되어 있기때문에 지정해준 돋움체 궁서체 등등으로 보여지게 되는거죠. 만약에 여러분께서 "산돌광수체" 를 사용했다면 다른사람들의 컴퓨터에 "산돌광수체"가 설치되어 있다면 보이겠지만 "산돌광수체" 는 윈도우 기본폰트가 아니기때문에 "산돌광수체"가 설치되어 있지 않은 대부분의 사람들에게는 산돌광수체가 아닌 그냥 일반폰트로 보여지게 되는 겁니다. 즉, 글씨태그를 사용하는 사람뿐만 아니라 그걸 보는 사람의 컴퓨터에도 같은 폰트가 존재해야만 제대로 보여진다는 것이죠. 여기까지 이해되셨나요? ^^; 그렇게 어려운 말은 아닌데... 정 이해가 안되신다면 다음페이지로 넘어가셔도 좋습니다.  ※ 움직이는 글자 ( 글자)    여러분들 웹서핑하면서 글자나 이미지가 혼자서 움직이는 걸 보고 처음 보신 분들은 참 신기하다고 생각을 하셨을 텐데요....바로 마퀴태그를 이용한 것입니다....여기서는 marquee 태그의 기본원리만 알아보고 상세한 건 ☞[춤추는글자] 부분에서 기술하도록 하겠습니다. 　 이게 마퀴태그의 기본이져^^ 이게 마퀴태그의 기본이져^^  ※ 문장정렬    글자의 정렬 방식을 정해주는 태그입니다.   오른쪽정렬 오른쪽 정렬 가운데 정렬 가운데 정렬 왼쪽 정렬 왼쪽 정렬  ※ text 태그 예제 빨간색 오랜지색 연한파란색 핑크 연한핑크색 금색 연한녹색 투명한논색 핑크 빨간색 연한핑크색 금색 오렌지색 연한녹색 투명한녹색 연한파란색  ※ 글자태그 틱  ① 를 하면 글자가 쓰러집니다.  모든 글자체 앞에 @ ☜골뱅이 마크를 붙이면 글자가 쓰러집니다.  ② 글자 를 사용하면  글자 --> 글자    해당 글자가 두꺼워 집니다.  ③  글자 주위에 이렇게 ☞ 색을 넣는 것 은 글자를 사용하면 됩니다.    ※ 총정리    총정리 총정리   이제 text 태그에 대해서는 다 배웠네용^^ 어때요? 어려운 것은 없죠?^^ text 태그는 쉬울 겁니다. 기억하기도 쉽고...한번 보면 절대 잊을 일은 없을 겁니다. 하지만 쉽다고 우습게 보면 안됩니다. 어떤 일이든지 기초없이는 완성할 수 없듯이 태그도 마찬가지로 기초를 잘 아셔야 만히 나중에 가더라도 쉽게 쉽게 배울 수 있답니다. 그럼 여기까지 봐주신거 감사드리고요.....오늘도 좋은 하루 되시길 바라겠습니다. ~~m^_^m~~ 나는야 슈포맨~날자이눔아  ☜ 옆에 보시다시피 슈퍼맨이 날아 다니고 있네요^^ 이걸 전문용어로 marquee 태그라고 합니다. text 에 관한 태그 중 유일하게 글자를 움직일 수 있게 하는 태그죠^^ marquee태그는 여러분들이 사용하기 따라서 얼마든지 응용가능합니다.   마퀴태그는 주로 대화방에서 많이 사용하는데요......홈페이지에서도 잘만 사용한다면 얼마든지 멋진 홈페이지를 만들 수 있습니다. 하지만 너무 과도하게 사용하거나 남용하면 홈페이지가 지저분해지 때문에 너무 무리하게 사용하는지 않는게 좋습니다. 이제부터 마퀴태그에 대해서 자세히 알아보도록 하죠^^ ※ 마퀴태그의 기본사용법 ( 내용)    마퀴태그의 기본 사용방법은 text 태그 부분에서 설명드렸다시피 내용☜ 이러한 형태입니다. 한번 예제를 볼까요?^^ 아래를 보시죠^^ 내용부분에는 아무 글자나 넣어도 됩니다.   참고적으로 말한다면 "내용" 부분에는 글자, 이미지 등이 들어갈 수 있습니다. 마퀴태그안에 글자부분에 링크도 걸 수도 있구요^^ 이미지에 마퀴태그를 걸면 ☜이런 식으로 할 수 있습니다.  만약 마퀴태그가 이게 전부라면 사람들에게 그렇게 많이 사용되지는 않을 겁니다. 마퀴태그가 여러분들에게 많이 사용되는 이유는 바로 여럭가지 속성을 가지고 있기 때문이져^^ 그럼 속성에 대해서 하나 하나 배워보도록 하겠습니다.  ※속성1 :  behavior=scrol>내용    이건 그냥 일정방향 스크록 속성입니다.^^    ※속성2 :  behavior=slide>내용    이건요^^ 마퀴태그가 한번 반복 후 화면 끝에서 정지되는 속성입니다. 이런 건 직접 봐야 압니다. 아래 예제를 보시면 벌써 왼쪽에 정지되어 있을 텐데...다시 reload(새로고침)를 해서 봐보세요....^^  ☜ 잘 오다가 마지막에 닿으면 멈추게 되져^^  ※속성3 : behavior=alternate>내용   behavior=alternate 속성은 좌우왕복하는 기능을 합니다. 마퀴태그내의 내용을 좌우왕복시켜주져^^ ☜ 좌우왕복 ☞  ※속성4 :  scrolldelay="수치">내용  scrolldelay="수치"  속성은 스크롤 지연값을 정해줍니다. 수치를 크게 할 수록 마퀴태그의 스크롤 속도가 늦어집니다. 값을 많이 주면 점프하듯 스크롤을 한다는뎅.... 글쎄....^^  scrolldelay="100" 의 경우 값이 100  scrolldelay="300" 의 경우 값이 300  scrolldelay="1000" 의 경우 값이 1000  ※속성5 :  scrollamount="수치">내용  scrollamount="수치" 속성은 스크롤의 속도(이동량)를 조절해주는 속성입니다. scrolldelay 속성이 수치가 클수록 속도가 느려지는 반면 scrollamount 속성은 수치가 클수록 속도가 빨라집니다.^^   scrollamount="3" 의 경우 거북이  scrollamount="6" 의 경우 토끼  scrollamount="10" 의 경우 치타 ※ 속성5 :  loop="수치/infinite">내용    loop 속성은 주어진 수치 값 만큼 반복횟수를 정하는 속성입니다. 그리고 무한반복을 하고 싶으면 infinite 를 사용하면 되져^^ 　 3번 반복 무한반복 3번반복 무한반복  근뎅...그냥 마퀴태그만 쓸때는 무한반복의 의미가 별루 없겠져^^ 왜냐면 굳이 infinite 속성을 안 해줘도 계속 반복 되기 때문에......^^  ※ 속성6 : bgcolor="색명/RGB색상코드">내용    마퀴태그 부분에 배경색을 정해주져.... span style 태그하고 비슷한 기능이네용^^ 파랑색 노랑색 파랑색이죵^^ 노랑색이네용^^  ※ 속성7 :  width="가로수치" height="세로수치">내용    말 그대로 마퀴태그가 적용되는 스크롤부분의 가로와 세로 너비를 정해주는 속성입니다.  아래 예제는 스크롤 되는 영역을 더 잘 보여주기 위해 위에서 배운 배경색 속성을 이용해서 배경색을 넣어 주었습니다.^^ 내용 내용 내용 내용  ※ 속성8 : direction="left,right,up,down">내용    스크롤 되는 방향을 정해주는 속성입니다. 왼쪽(left), 오른쪽(right), 위쪽(up), 아래쪽(down) 이져^^ direction="left" direction="right" direction="up" direction="down" 내용 내용 내용 내용  지금까지 marquee 태그의 속성을 배워봤는데요.....이제 마퀴태그는 다 배웠습니다. 근뎅....그냥 이렇게 끝나면 뭔가 허전하죠?^^  이제부턴 지금까지 배웠던 마퀴태그의 속성을  응용해 보도록 하져^^    ※ 마퀴태그의 응용  처음에도 언급했다시피 마퀴태그는 대화방에서 많이 사용됬고 지금도 사용되기 때문에 주로 대화방에서 사용할 수 있는 마퀴태그를 응용해보도록 하겠습니다.  ☞응용1  반복(behavior=alternate)과 상단 스크롤(up)    마퀴태그를 응용할 때 거의 빠지지 않고 들어가는게 반복속성입니다. 아마 반복해서 계속 보여줄 수 있기 때문에 많이 사용하는 것이 아닌가 생각되는데.....^^ 하여간 한번 만들어 보져^^  ① 하핫☜ 이 소스를 태그연습장에서 실행시켜보세요..실행시켜 보면 상단스크롤이 위아래로 계속 반복되는 것을 볼 수 있을 겁니다......^^ 어때요? 되져?^^ 여기다가 한가지더 bgcolor 속성을 넣어보세요.  ② >하핫☜ 배경색 속성을 첨부시켜서 해보면 스크롤 되는 영역에 배경색이 들어 가 있는 걸 볼 수 있을 겁니다. 근뎅...보기가 조금 그렇죠?^^ 별루 멋이 없는 거 같아 보여서리..... 그럼 이번에는 스크롤 영역을 가로세로 너비를 조정해주져^^  ③ >하핫☜ 가로와 세로 너비를 조절해주니까 어때요? 조금 전 보다는 나은 거 같죠?^^  그런데 아직도 뭔가 허전하져?^^ 그럼 여기서 지금까지 만들었던 마퀴태그를 하나 더 만들어서 두개를 이중으로 해보져^^  ④ 하핫☜ 기존에 마퀴태그에 같은 마퀴를 하나 더 넣은 거져.....한번 실행시켜보세요.....어때요? 잼있져?^^ 응용2   화살쏘기(단순 마퀴태그)    이건 응용1 보다 훨씬 쉬운건데요....효과는 더 만빵이랍니다.^^  ① 우선 화살을 쏠려면 활과 화살이 있어야 겠져^^ ←♡--<  ☜어때요? 화살 같죠?^^ 활은 {>☜조금 어설프지만 활이라고 봐주시길...^^ 자...활과 화살을 만들었으니 이제 마퀴태그를 이용해서 쏘는 일만 남았군요^^  ② ←♡--<☜이걸 실행시켜보면 화살이 날아가는 걸 볼 수 있습니다.^^ 그럼 여기서 조금 더 그렇듯 하게 꾸며 보면......  ③ 큐피트의 화살 ←♡--<{> ☜ 어때요? 그렇듯 하져?^^  응용3 반짝반짝 (좌우반복과 속도)  ① 반짝☜ 좌우 반복과 너비조절, 이동량을 조절해서 만들어준 건데요.....scrollamount 속성을 잘 이용해서 만든 예제네요^^  응용4  도리도리 (좌우반복과 너비)  ① ( @^.^@)도리 ☜ 초보분들이 지금껏 가장 많이 물어봤던 것 중 하나인데요....채팅방에서 사용해보면 재미있져^^ 도리도리 흔드는 걸 봐서는 어려울 것 같지만 그 원리는 아주 단순하답니다.^^ 그냥 좌우 왕복과 그에 맞게 너비조정만 해준거죠^^  응용5  한줄 쓰기 (방향)  ① 여러분~~ 안녕하세요^^ 만나서 방갑습니다. - 태그매니아-☜ 단순히 방향조절만 해주면 이렇게 멋진 마퀴태그 효과를 나타낼 수 있습니다. 신기하져?^^  응용 6  달팽이 (방향과 속도)  ① __@/``☜ 달팽이 입니다...--;;;  대충 응용하는 거에 대해서 배워봤는데요....마퀴태그는 여러분들이 어떻게 응용하느냐에 따라서 무한한 효과를 나타낼 수 있습니다.^^ 심심할 때 한번씩 만들어 보세요^^ 그럼 여기서 마퀴태그에 대한 강의를 완죤히 마치겠습니다. 그럼 이만....^^ ★ 모두즐팅하소^^* 왜그라요. ^^"아니라니까올라내라 하핫~ 토커 ←♡-<{> 정신없당~  ★★★tester☆☆☆☆☆ 사랑이란.... 끝없는 기다림의 연속이다....   ⓘ ⓛⓞⓥⓔ♡ ⓨⓞⓤ <!-- 내용 -->

이게 목록이져^^ 이것두 목록..... 역시 목록

이건 네모목록 네모모양이넹^^ 역쉬..네모..--;;

이건 속빈 동그라미 목록이져^^ 하핫^^

 어때요? 목록이 먼지 아시겠져?^^  목록도 위에서 보시다시피 한가지만 있는게 아니라 여러가지 종류가 있져....크게 분류해본다면 순서 없는 목록과 순서 있는 목록으로 나누어 집니다.  갑자기 "순서" 라고 하니깐 처음 목록 배우시는 분들은 무슨 순서를 말하는 건가??? 할텐데..... 보통 우리들이 "순서를 지켜라! " 라고 할때 그런 순서를 말합니다. 다른 말로해서 차례라고도 하져^^
  순서없는 목록은 위에 예제에서도 보시다시피 그냥 순서없이 같은 동그라미나 네모, 속빈 동그라미, 그리고 이미지를 이용해서 나타내는 걸 순서없는 목록이라 합니다. 순서없는 목록에는 종류가 4가지져^^ 순서없는 목록을 나타낼땐 태그를 사용합니다.
  순서있는 목록은 숫자나 영문대소문자, 로마자 대소문자 등으로 순서있게 나타내는 것을 순서있는 목록이라 합니다. 총 5가지 인가요? ^^ 숫자, 영문대문자, 영문소문자, 로마자 대문자, 로마자 소문자 하니깐 다섯가지네용^^ 순서있는 목록은 태그를 사용합니다.

  이제 목록태그의 속성을 알아보도록 하져...^^

속 성	기 능
type="기호,문자"	OL의 경우 UL의 경우
src="이미지주소"	순서없는 목록의 경우 이미지를 목록으로 사용가능함
start="연결되는 번호"	순서있는 목록의 경우에 중단된 번호를 연결해줌
	목록 하나하나를 만들어 주는 기능을 함

 자...그럼 순서없는 목록부터 하나씩 배워볼까요?^^
 ※ 순서없는 목록
  순서없는 목록은 태그를 사용합니다. 근뎅   ☜ 이것만 딸랑 적으면 목록이 아니라 목록의 비스무레한 것 조차도 절대 나타니지 않습니다. 목록을 하나하나 만들어 주는 속성인

태그명령어를 만들고픈 목록의 숫자만큼 넣어 주어야 하죠.  여기서 주의 할 점은

속성은 가 필요없습니다. 자기는 꼭 써야겠다 하시는 분들은 써두 상관은 없는데....굳이 손 아프게 쓸필요가 있을 까요?^^ 잘 알아두시길..... 또한 아무리 순서없는 목록이라도 무려 4가지 종류(동그라미, 네모, 속빈동그라미, 이미지)가 있기 때문에 그걸 선택을 해줘야 하죠. 이럴때 사용하는 게 type="disc,square,circle" 속성입니다.   disc(검은동그라미) , square(네모), circle(속빈 동그라미) 이져^^  이미지의 경우는 imagesrc="이미지주소" 속성을 이용해야 합니다.  그럼 본격적으로 만들어 볼꺄요?^^

disc	square	circle	이미지
동그라미목록 목록 목록	네모목록 목록 목록	이미지목록 목록 목록
동그라미목록 목록 목록	네모목록 목록 목록	속빈 동그라미 목록 목록	이미지 목록의 경우 브라우저에서 아직 인식을 하지 않는 것 같군요...

※ 순서 있는 목록
   순서 있는 목록 만들때는 태그를 사용합니다.  이거 역시

속성을 사용해서 목록을 나타내주어야 하구요....type="1, A, b, i, I" 을 사용해줍니다. 1(숫자), A(영어대문자), a(영어소문자), i(로마자소문자), I(로마자대문자) 를 나타내어 줍니다.  순서없는 목록하고 비슷하죠?^^ 그럼 직접 해볼까요?^^

숫자	영어대문자	영어소문자	로마자소문자	로마자대문자
숫자목록 목록 목록	영어대문자 목록 목록	영어소문자 목록 목록	로마소문자 목록 목록	로마대문자 목록 목록
숫자목록 목록 목록	영어대문자 목록 목록	영어소문자 목록 목록	로마소문자 목록 목록	로마대문자 목록 목록

  어때요? 간단하져?^^ 여기서 주의 할 점은 저기 로마자 대문자 type 속성을 지정해줄 때 I(영어 대문자 아이) 입니다. 가끔씩 ㅣ(영어 소문자 엘) 로 착각 하시는 분들이 있더라구요........착오 없으시길...^^
 그리고 전 페이지 처음 부분에 속성을 설명할 때 start 속성을 잠깐 설명드렸는데....start="연결되는 번호" 속성은 중단된 순서있는 목록의 목록 번호를 이어서 계속 해줄 수 있게 해주는 속성입니다. 이렇게 말로만 하니깐 뭔지 이해가 안되시져? ^^ 직접 예제를 보여드리져^^

소 스	변 환
숫자 목록이져^^ 숫자대로... 쭉~ 헉..근뎅... 여기서 번호가 끝겼네요?^^ 하지만 계속 이어서... start="4"> 숫자목록을 이을 수 있져.. 이게 start 속성 입니다.	숫자 목록이져^^ 숫자대로... 쭉~ 헉..근뎅... 여기서 번호가 끝겼네요?^^ 하지만 계속 이어서... 숫자목록을 이을 수 있져.. 이게 start 속성 입니다.

 위에 보시는 바와 같이 3으로 목록이 끝났을 때는 start="4" 로 이어줌으로서 숫자의 끝김없이 연속해서 이어줄 수 있져...이해 되시져?^^ 여기서 알아두어야 할 점은 start 속성은 순서있는 목록에서만 적용됩니다. 순서없는 목록에서는 해봤자 소용이 없겠죠^^ 

<!-- 내용 -->[응용 1] 목록의 여러가지 형태를 같이 사용하는 방법입니다.   소 스 예 제     오늘 밤에는 별이   뜨지 않았다......   별 볼일 없는 밤이다...-_-;;;   </body> 예제보기  스타일 시트의 list-style 속성을 이용해서 목록을 이미지로 나타내어 주는 것이죠. <!-- 내용 -->

filter 란 포토샵을 사용해보신 분이라면 바로 이해가 가실겁니다. 그러나 초보분들은 모르시겠죠?^^ 필터는 그림이나 글자에 효과를 주는 겁니다. 무슨 효과냐구요? 그럼 이해를 돕기위해 밑에 그림을 한번 보세요.

철도원	철도원	철도원	철도원	철도원

  위에 맨 왼쪽에 있는 이미지가 원본이미지입니다.  보시는 거와 같이 Filter를 사용하시면 이미지 뿐만 아니라 글자에까지 여러가지 효과를 낼 수 있습니다. (단, 필터는 익스플로워4.0이상에서 적용됩니다.) 알아두면 홈페이지 제작하는데 많은 도움이 되겠죠? 그럼 차근차근 한가지씩 배워보도록 하겠습니다.
 ※ 필터 명령어와 속성
 필터의 기본명령어는 <태그 style=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 까지 수치조절
간단한 예제를 한번 해볼까요? 이쁜 장진영씨군요. 첫번째가 그림의 경우고 두번째가 글자의 경우입니다.     장진영 원본 변환 장진영 장진영

 2. blur

속 성	기 능
add	원본이미지를 합칠것인가 결정 합칠경우 1 그렇지 않을 경우 2
direction	방향설정, 시계방향 각도로 0, 45, 90, 135, 180, 225, 270, 315 값을 설정함
strength	강도 수치조절, 0~100까지 설정, 수치가 클수록 강도가 높아짐
역시 예제를 보면 이해가 쉬워집니다. 여기서 주의할 점은 이미지에 add 속성을 사용할 경우 그림의 원형이 거의 보이지 않게 됩니다.  장진영 원본 변환 장진영 장진영

 3. chroma

속 성	기 능
color=색삭명 or RGB색상코드	투명하게 하고자 하는 색을 지정
자~~ 예제를 볼까요? color에 원하는 색만 집어 넣으면 끝납니다. 간단하죠~~^^   원본 변화

  <!-- 내용 -->

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

속 성	기 능
color=색명 or RGB색상코드	그림자의 색상을 지정
offx=수치 offy=수치	대상으로부터 그림자의 x,y좌표
positive=0 or 1	0 이면 투명필셀, 1 이면 불투명픽셀로부터 그림자를 만들어 줌
dropshadow명령어는 이미지에서는 적용이 되지 않습니다. 글자에서만 적용이 되죠^^ 장진영 장진영 장진영 장진영 장진영 장진영 장진영 장진영 장진영

 5. fliph , flipv
 수평이미지와 수직이미지를 만들어 줍니다.

명령어	기 능
fliph	이미지나 글자의 좌우가 바뀌게 되죠
flipv	이미지나 글자에 상하가 바뀜니다
이미지나 글자에 상하좌우를 바꿔줍니다. 간단하죠   장진영 원본 fliph flipv 장진영 장진영 장진영

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

명령어	기능
glow	글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다
color=색명 or RGB색상코드 , strength=1~100 번지는 강도를 조절
gray	이미지를 흑백으로 나타냅니다
장진영   장진영 장진영 장진영 장진영

 7. invert , mask
 밑에 예제를 보시면 압니당~~!!!^^

명령어	기 능
invert	색도, 채도, 밝기를 반대값으로 나타나게 합니다
mask	불투명한 픽셀은 투명마스크를 씌우고 투명픽셀은 지정된 색으로 마스크를  씌웁니다.  color=색명 or RGB색상코드
장진영 원본 invert mask(아무것도 안보임) 장진영 장진영

  <!-- 내용 -->

8. shadow
 dropshadow와 비슷한 명령어지만 약간에 다른 효과를 내는군요

속 성	기 능
color=색명 or RGB색상코드	효과를 나타낼 색상을 지정합니다
direction	나타나게될 그림자의 방향을 결정, 시계방향으로 0 45 90 135 180 225 270 315의 값을 지정
이것도 마찬가지로 이미지에서는 적용이 잘 되지 않습니다. 글자에서 주로 사용할 수 있는 필터입니다   장진영 원본 장진영 장진영 장진영 변환 장진영 장진영 장진영

 9. wave
 물결모양으로 효과를 주는 역할을 합니다

속 성	기 능
add=0 or 1	원본이미지를 합칠경우 0, 그렇지 않을 경우 1
freq=수치	wave의 개수를 결정
lightstrength=0~100	wave에서 빛의 강도 %
phase=0~100	웨이브 효과의 시작위치를 나타냅니다
strength=1~100	웨이브의 강도를 지정합니다
원본 음....--; 누구??? 장진영

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

속 성	기 능
xray	이미지를 흑백으로 나타냅니다
원본 xray

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