포토샾 태그

[박상순]

◈ 포토샵 태그

이 강좌에서는 포토샵 효과를 내게 할 수 있는 태그를 설명하겠습니다...포토샵 해 보신 분은 아시겠지만 필터와 레이어라는 요소가 있을겁니다...물론 그것말고 다른 요소들도 있지만 여기 포토샵 태그 강좌에서는 필터와 레이어 태그에 대해 설명하겠습니다...포토샵에 대해 자신있으신 분은 이해가 빨리 되실겁니다...^^

▣ 필터 태그란?
필터란...무엇을 걸러주는 것을 말합니다...정수기에도 필터가 들어가구요...포토샵에도 필터가 들어갑니다...포토샵에서 필터를 말하자면 그림을 어떤 색만 걸러서 별 엽기적인 효과가 나도록 한건데요...태그에서도 그 포토샵 필터와 유사하다고 생각하시면 됩니다...그림에 별별 효과를 나도록 한 것이 바로 필터 태그입니다...

용우네집	용우네집	용우네집	용우네집

필터 태그는 대부분의 태그에 속성으로 적용됩니다...무슨 말인고 하면 저기 이미지와 글자에도 붙었져? 나중에는 배경이나 표에도 속성으로 붙여넣으면 다양한 효과가 나게 해 줍니다...아니면 맨위 스타일 서식으로 따라붙어 그 페이지 모두에 필터 효과를 내줄 수도 있습니다...(단, 필터는 익스플로러 4.0이상에서 실행됩니다.)

필터의 기본명령어는 <태그내용 style=filter:필터속성;filter:필터속성>입니다...글자태그를 제외한 태그에서는 독립적으로 쓰이지 않고 속성으로 달라 붙는데요...또 앞에 태그의 종류에 따라 속성이 다를 수 있습니다...이미지와 글자에 넣는 필터태그를 대조해보져...^^ 

이미지

<img src=이미지파일 style="filter:필터속성">

글자

<div style="width:글자넓이; height:글자폭; font-size:글자크기pt; filter:필터속성">
<span style="width:글자넓이; height:글자폭; font-size:글자크기pt; filter:필터속성"></span>

일단 저 태그가 먹히는 태그들에는 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 등등.....속성만 해도 엄청나져...지금부터 제가 대충아는 것만 abcd 순서대로 나열해 보겠습니다...^^ 참고로 일부 속성설명들은 다른 사이트에서 조금씩 참고했음을 미리 밝혀 둡니다...
 

▣ 필터태그 속성설명

▷alpha - 투명하게 만듭니다 (포토샵의 opacity 조절기능과 유사한 기능입니다)

opacity (불투명도)

0에서 100까지 조절할 수 있고 숫자가 작을수록 투명해집니다

style (모양)

0은 기본, 1은 선, 2는 타원, 3은 직사각형 모양입니다

finishOpacity

0에서 100까지 불투명도를 조절합니다...

저 태그를 사용해서 이미지와 글자를 만들어 봅시다...왼쪽 2개가 사진이고 오른쪽 2개가 글자입니다...^^ 차이점을 잘 살펴보세요~
<img src="acbus.jpg" style="filter:alpha(opacity=20, style=2, finishopacity=50)">
<div style="width:50; height:20; font-size:9pt; filter:alpha(opacity=20, style=2, finishopacity=0)">용우네집</div>
		용우네집	용우네집

▷blur - 뿌옇게 합니다 (포토샵의 blur 필터와 유사한 기능입니다)
direction	방향각도설정, 1도에서 360도까지...
strength	0에서 100까지 강도조절
<img src="acbus.jpg" style="filter:blur(direction=135,strength=80)">
<div style="width:50; height:20; font-size:9pt; filter:blur(direction=135,strength=10)">용우네집<div>

용우네집

용우네집

▷dropshadow - 그림자를 넣습니다
color=색명 or RGB색상코드	그림자의 색상을 지정
offx=수치 offy=수치	대상으로부터 그림자의 x,y좌표
positive=0 or 1	0 이면 투명픽셀, 1 이면 불투명픽셀로부터 그림자를 만들어 줌
<div style="width:50; height:20; font-size:9pt; filter:dropshadow(color=#cccccc, offx=10, offy=10, positive=1)">용우네집</div>
용우네집

▷fliph , flipv - 이미지나 글자를 뒤집어 줍니다
fliph	이미지나 글자의 좌우가 바뀝니다
flipv	이미자나 글장에 상하가 바뀝니다
<img src="acbus.jpg" style="filter:fliph()">
<img src="acbus.jpg" style="filter:flipv()">
<div style="width:50; height:20; font-size:9pt; filter:flipv()">용우네집</div>

용우네집

▷Wave - 물결모양이 나오게 합니다.
freq=수치	물결모양의 개수를 결정
lightstrength=0~100	wave에서 빛의 강도 %
phase=0~100	웨이브 효과의 시작위치를 나타냅니다
strength=1~100	웨이브의 세기를 지정합니다
<

용우네집

용우네집

▷xray - 이미지를 흑백으로 만들어줍니다 (포토샵의 그레이스케일과 비슷한 기능입니다) 이건 이미지에만 적용되는거 같네요^^
<img src=acbus.jpg style="filter:xray()">

▣ 필터를 응용한 예쁜 글자

 ☆멋진 글자만들기^^
이런 글자~멋있지요?
저런 글자는 어떻게 만들까요? 저것도 바로 필터 태그를 여러 가지로 응용한 거랍니다...소스는 아래와 같구요...저 속성은 위에서 다루지는 않았지만 대충 글자 저렇게 바꿔주는거다...라고 알아 두세요^^ 역시 저 글자 색을 바꿔주려면 저기 color=색상표 부분을 바꿔주시면 되겠져...^^

이런 글자~멋있지요?

 그림자가 생겼지요?

저런 글자는 그림자를 넣었네요...^^ 잘 보시면 shadow 속성을 주신 것을 보실수 있습니다. 위에서 배운 dropshadow와 유사한 속성이라고 볼 수 있겠지요...^^

<span style="color:white;width:100%;height:20;Filter: shadow(color=3399ff,direction=135)">그림자가 생겼지요?</spen>

글자어떤가요?

저거는 파스텔톤 글씨네요...Font와 DIV를 합쳐 놓은거랍니다^^

<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=0000FF, strength=8)"><font color=FF1493>
글자어떤가요?
</font></Div>

역시 저것도 색을 바꿔 주시려면 색 부분을 바꿔주시면 되지요...^^ 태그에 대해 잘 아시는 분은 저 코드가 색깔을 지정하는 코드이며, 마음껏 바꿔도 된다는 사실을 알고 계시져??^^  그것대로 해주시면 됩니다...이렇게요...

color=FFFFFF>글자어떤가요?

 <DIV style="width:320; height:50; font-size:20pt; filter:glow(color=000000, strength=8)"><font color=FFFFFF>
글자어떤가요?
</font></Div>

그리구 글자태그들은요...제가 인터넷에서 이곳저곳 돌아다니다가 퍼 온 것들이 글자태그자료강좌에 있거든요...거기에 보시면 더 멋지고 더 까리한 글자 태그 자료강좌에 있답니다^^ 참고로 저 글자에 쓴 태그들은 포토샵의 blanding 옵션과 유사한 기능을 가지고 있습니다...주로 storke나 grow,shadow 옵션과 많이 유사합니다...

▣ 필터태그를 응용한 배경/표/기타 객체
 

▷배경화면/표 까리한 그라이데이션 넣기

style="background color:3399ff ; filter:alpha(opacity=0, style=1, finishopacity=100);"

다음 스타일 서식 있져? alpha 스타일 속성을 이용해서 어떻게 한건데요...저걸 배경이나 표에 활용하면 상당히 까리한 그라데이션 효과를 얻을 수 있답니다^^

<body style="background color:3399ff ; filter:alpha(opacity=0, style=1, finishopacity=100);" >
 <td width="500" style="background color:3399ff ; filter:alpha(opacity=0, style=1, finishopacity=100);">

이것말고도 다른곳에 응용이 되는지 않되는지 모르겠네요...^^ 어쨌든 위와 같이 그라이데이션 효과를 낸답니다^^ 아쉽게도 포토샵처럼 다양한 색상의 그라디언트는 불가능할거 같네요...(흰색과 임의의 색깔의 그라이던트 기능밖에 없는거 같습니다)
 

▷ 반투명표

말그대로 표를 반정도 투명하게 한다는 겁니다...아래의 예제를 보시면 아시겠지만 저 표에서 아래의 이미지가 반 정도 투과되어 보이는 것을 알 수 있습니다...즉 셀로판지 역할을 한다고 해야 할까요...^^

 

<Body background="http://my.dreamwiz.com/jungahn4ever/tag/Image1.gif">
<table border="1" style="background color:3399ff; filter:alpha(opacity=50);">
<tr>
<td width="964">뒤에 배경이 비쳐보이져?</td>
</tr>
</table>
</body>

▷배경 뽀샤시하게 하기

<body bgcolor="#E0E0E0" background="" style="filter:alpha(opacity=100, style=2, finishopacity=0)" bgproperties="fixed>

 

배경이 뽀샤시하게 변했져? alpha속성을 잘 응용한 결과랍니다...^^ 그냥 저기 진하게 된 속성 부분만 복사해 붙여도 화면 전체가 뽀얗게 된답니다^^ 참고로 저 위에 반투명 표와 같은 속성을 사용했습니다...

 이것 외에 여러 스타일 예제들은 입수 되는대로 바로 강좌 업뎃하겠습니다...^^

▣ 레이어 태그

이것도 포토샵의 한 요소인 레이어를 대상으로 만들어진 태그입니다...아래 태그를 보시면 위에서 보셨던 태그라던지, 속성 등에서 약간의 유사함을 발견할 수 있을 겁니다...^^어차피 레이어라 해 봤자 제가 알고 있는 것들로는 레이어 크기 조정밖에 모르는데 참고로 알아 두셨으면 해서요...^^ 그냥 표 대용으로 한번씩 쓰는거라고 생각하시면 조금이라도 이해에 도움이될듯^^

<div id="layer" style="width:300px; height:300px; position:absolute; left:30px; top:30px; z-index:1;">

저게 레이어의 기본 형식입니다...글자태그에 스타일 준거하고 약간 비슷할 겁니다...^^ 그럼 저 레이어 태그를 한번 분석해 볼까요?

맨처음 분홍색으로 id="layer" 해놓은 것은 레이어의 이름을 지정하는 겁니다...지금부터 제가 설명하는 내용은 포토샵 좀 다뤄 본분께서는 이해하기가 약간 쉽겠으나 포토샵에 대해 기본이 없으신 분은 좀 힘들겁니다...잘따라오세요^^ 레이어가 이것저것 섞이면 좀 헤깔리겠져?? 따라서 레이어의 이름을 처음부터 못박아 두는겁니다...id="layer" 라고...^^
그다음으로 위에서 많이 보셨던 스타일이 나왔져? 제가 레이어 만드는 거하고 필터태그를 합친 것도 그 때문이었습니다...바로 레이어와 필터가 연관이 상당히 있는 것이져...역시 포토샵 해보신분은 아시겠네요...포토샵에서는 필터와 레이어가 없으면 포토샵이라고 할 수 없져...^^ 주로 이 강좌의 방향이 포토샵 없이 포토샵 효과를 내는 것이므로 필터태그로 통합했습니다...또 잡솔이 길어졌는데요...역시 저기에서도 스타일이 나옵니다...하나씩 분석해 보도록 합시다~
저기 주황색으로 된 부분은 레이어의 크기를 의미합니다. 단위는 픽셀이고 크기는 숫자로 조절하면 되겠져~ 그냥 표 태그하고 유사하다고 생각하시면 됩니다...^^ 당연히 width는 넓이고 height는 높이겠져...
저기 보라색으로 된 부분은 왼쪽과 맨 위와 레이어의 사이를 나타내는 겁니다. left:30px 의 경우 문서의 왼쪽과 레이어의 왼쪽 간격을 30픽셀로 하라는 의미구요... top:30px 의 경우 문서의 맨 위와 레이어 맨 위의 간격을 30픽셀로 하라는 의미입니다...그리고 맨 끝에 z-index:1 는 레이어의 순서를 나타냅니다...포토샵에서도 순서에 따라 레이어의 겹침이 결정되자나요...그런걸 조정하는 부분이랍니다^^

<div id="layer" style="width:300px; height:300px; position:absolute; left:30px; top:30px; z-index:1;" layer-background-color:black; ">

위의 소스를 태그연습장에서 실행시키면 어떤 결과물이 나올까요? 왼쪽 위에 웬 검은게 둥둥 떠있는 것과 같이 될겁니다...태그연습장에서 나중에 실행시켜보시면 아시겠지만 웬 검은게 떠있져? 그게 바로 레이어입니다...
자꾸 포토샵 포토샵 들먹거려 포토샵 사용하지 않은분들께는 정말 죄송한데...이 레이어에도 포토샵처럼 여러 효과를 낼 수 있습니다. 역시 위에서 설명하였던 필터태그를 응용한겁니다...ㅡㅡㆀ 이렇게 레이어와 필터는 연관관계가 있습니다...아래의 레이어에 주는 스타일도 포토샵과 동시에 설명할겁니다...잘따라오세요
 

▷레이어에 배경주기
style="background-color:색깔;  
style="background-image:url('배경 주소')
를 사용하실수 있습니다...위에것은 배경색상이고 아랫것은 배경주소입니다...배경색상의 경우 포토샵레이어의 Solid Color와 유사한 효과라고 생각하시면 이해가 빠를 듯...글고 두 번째 효과는 Pattern 효과와 유사하다고 생각하시면 이해가 빠를겁니다...

▷레이어에 반투명 효과 내기(포토샵의 레이어 opacity조정값과 유사한 기능입니다)
역시 저 위에 반투명 표를 조금 응용한 건데요...
style="background color:3399ff; filter:alpha(opacity=50);"
저렇게 해주시면 반투명 레이어를 만들 수 있습니다...저기 opacity부분 있져? 그러니까 레이어 하나 생겨서 Solid Color로 레이어를 모두 저기서 지정한 색상으로 지운 다음에 반투명 정도를 50으로 했다고 생각하시면 이해가 빠를겁니다...쉽게 설명하자면 저 색상을 반만 써서 나머지는 비쳐 보인다고 생각하시면 됩니다...

▷레이어에 그라이던트 효과내기
filter:alpha(opacity=0, style=1, finishopacity=100);"
역시 저 그라이던트 표/배경을 응용한 겁니다...레이어에 Gradient 옵션을 준거랑 똑같져...^^ 그냥 표 태그와 비슷하다고 생각하시면 됩니다...^^

 

이상으로 포토샵 태그 강좌를 마치겠습니다...포토샵 사용해 보신 분들은 훍어만 봐도 이해가 완전히 되실겁니다...^^ 이 태그는 익스플로러 4.0에서 태그로도 포토샵 효과를 내 보고자 만들어진 태그인데요...잘 사용하시면 기본 이미지로도 포토샵 효과를 마음껏 내실수 있을겁니다^^ 그럼 유용하게 사용하시길...^^

포토샵태그

홈관리자 pyw8888@com.ne.kr

/* 문서 하단의 태그들은 통계를 위하여 자동으로 삽입된 태그 입니다. */ /* 페이지 수정시 해당 태그들을 제거 하지 않으면 해당 태그가 두번 표시되어 */ /* 페이지 통계가 정확하지 않으며 페이지가 늦게 로딩될수 있으니 제거하십시요 */ /* 통계를 위하여 삽입된 태그의 시작입니다. */ var Long_URL=document.domain; TMPdomain=Long_URL.split(".");if (TMPdomain.length==4) { ID = TMPdomain[0]; } else { ID = TMPdomain[TMPdomain.length - 4]; } document.writeln('') _dwiPID="+inside_statics+"; if(typeof(_dwiCatch) == "function") { _dwiCatch();} /* 통계를 위하여 삽입된 태그의 마지막 입니다. */