컴퓨터 상식

Html 편집시 많이 사용하는 태그정보

정신똑띠챙기! 2013. 12. 2. 17:59

 

Html 편집시 많이 사용하는 태그정보

 

 [1] 이미지 사각 없에기
 <img src="" width=300 align=left  border="0"

 style="filter=alpha(opacity=100,style=3,finishopacity=0)">

 

[2] 홈이나 카페 링크달을때

<A style="TEXT-DECORATION: none" href="URL"
target=blank> URL이나 그림</A>

 예 : <A style="TEXT-DECORATION: none" href="URL" target=blank>

<IMG height=80 alt="홍보 글씨 넣을 수 있어요"
src="
http://hknetizenbonboo.com/NaVi-Heart.gif" border=0> </a>

 

[3] 이미지 반대로 주는 소스
style="filter:fliph()" 
 
[4] ul사용하지 않고 글의 간격(위치) 넣는 소스
<p style="margin-left:270px">

 

[5]이미지에 명암을 주는 소스
style="filter:blur(direction=135,strength=100)"
style="filter:alpha(opacity=100, style=2, finishopacity=0)"

 

[6] 투명한 듯한 그림 2-원형으로 흐리게 
< img src="
http://melody123.com.ne.kr/img/f184.jpg"

 style="filter=alpha(opacity=100,style=2,finishopacity=0)">

 

[7] 각 소스의 수치를 변경
 opacity=100(선명도..숫자가높을수록 흐려짐)
style=0(0=원본그림,1=한쪽만흐리게,2=원형으로흐리게,3=사각형)

 

[8] 투명한 듯한 그림 1-한쪽만 흐리게 
< img src="
http://melody123.com.ne.kr/img/f184.jpg"

 style="filter=alpha(opacity=100,style=1,finishopacity=0)">

 

[9] 투명한 듯한 그림 3-사각형으로 흐리게 
< img src="
http://melody123.com.ne.kr/img/f184.jpg"

style="filter=alpha(opacity=100,style=3,finishopacity=0)">

 

[10] 전체적인 효과 
< img src="
http://melody123.com.ne.kr/img/f184.jpg" style='filter:Alpha(Opacity=50)'>

 

[11] 햇살에 비추는 듯한 이미지 
< img src="
http://melody123.com.ne.kr/img/f184.jpg"

 style="filter:blur(direction=135,strength=100)">

 

[12] 칼라 필림 효과 
< img src="
http://melody123.com.ne.kr/img/f184.jpg" style="filter:invert()">

 

[13] 흑백 이미지 
< img src="
http://melody123.com.ne.kr/img/f184.jpg" style="filter:gray()">

 

[14] 전체 배경 소스
<style>
body { background-image:url("이미지주소");
background-attachment: fixed;
background-repeat: repeat;
background-position: 50% 50%; }
table, td { background-color: transparent; }
</style>

 

[15] 글자가 좌우로 왕복 움직임  
《marquee behavior=alternate》다음 춘하추동카페《/marquee》

<marquee scrolldelay="숫자"> 내용 </marquee> 태그처럼 scrolldelay="숫자"
를 추가하면 태그 안의 내용들이 움직일 때까지 지연되는 시간을 조절할 수 있습니다
. 숫자는 0부터 10 단위로 씀.  숫자가 커질수록 속도가 느려짐.
보통 80에서 100 정도를 주면 움직이는 속도가 느려져서 좋습니다.

<marquee scrollamount="숫자"> 다음 춘하추동카페 사랑해요 </marquee>

태그처럼 scrollamount="숫자" 를 추가하면 태그 안의 내용들이 한 번에

움직이는 픽셀의 개수를 지정할 수 있습니다.. 보통 1이나 2를 많이 사용합니다..

1은 느리고 2는 빠름니다.

 

[15-1]글씨 좌로계속 가기
<marquee behavior=scroll bgcolor=white direction=left hspace=1

vspace=1 loop=infinite scrollamount=2 truespeed scrolldelay=70 width=100%>
 <div align=center valign=middle><font style=font-size:9pt>

<b> 다음 춘하추동카페.</b>

</font></div> </marquee>

 

[15-1]글 올라가기
<marquee
direction="up"scrollamount="2"scrolldelay="100"loop="ture"width="480"height="300">

<font face="굴림" size="2.5"><ul><b>[15-2]글씨아래위로 흔들리기
<marquee behavior="alternate"direction="up"height="50">

스크랩을 금지하는 글을 올리는 일은 카페 규정 위반입니다.

 <marquee behavior="alternate">

 

[16] 글자 감추기
<SPAN style="BACKGROUND-COLOR: silver"><FONT color=silver>
다음 춘하추동카페</FONT></SPAN>

 

[17] 소스를 알려줄 때 소스.
<center>
<textarea name="소스보기" rows="5" style="font-family:Verdana; font-size:11;

 color:000000; border-color:ffffff; border-style:dotted;" cols="60">
<embed src="mms://211.239.127.240/now12mv/a1240402.asf" showstatusbar="1"

 width=550 height=450 vspace="0" hspace="0" border="0"

 type="application/x-mplayer2"name="MediaPlayer1"

 showcontrols="0" border="5">
</textarea>

 

[18]글자에 휠터 명암주기
<span style=font-family:굴림;height:20;font-size:13pt;color:yellow;filter:

glow(color=#000000,strength:2);font-weight:bold><font size=2>

<SPAN style="font-family:바탕;color:#000000;width:500;height:100%;Filter:Glow(color=#000000,strength:1);height:1px"><pre><font color="white" face="바탕">

<span id="style" style="font-size:9pt; line-height:18px">

<div id="style" style="margin-left:30px; letter-spacing:0px;" align="left">
[18-1]Drop Shadow 글자
<DIV STYLE="width:520; height:50; font-size: 32pt; color:blue;

 filter:DropShadow(Color=#CCCCCC, OffX=10, OffY=10, Positive=true)">
<CENTER>DropShadow 글자  </CENTER></DIV>

 

[19] 이미지 공간주는 명령 소스
vspace="12" hspace="14" border="0"

 

[20]줄그을때길이위치두깨
 <hr width="300"align="left"size="5"noshade>

 

[21] 줄없는링크소스 ※링크
<a style="TEXT-DECORATION: none" href="
url주소"

 target=blank>  </a>

 

[22]작은화면 큰창
<a href="대 사진 이미지주소"> <img src="소" border="0" width="580">  </a>

 

[23]그림 뒤집혀보이는 소스
이미지주소 끝에 붙여넣을 것.  "style="filter:invert()


[24]꽃이 옆으로 움직이며 링크
<CENTER><MARQUEE scrollAmount=1 scrollDelay=100 behavior=alternate><A
style="TEXT-DECORATION: none" href="
url주소"
target=blank><IMG alt="Daum 검색에서☞ 노트즌의 휴식공간"
src="
url주소" border=0> </A></MARQUEE>
<CENTER><FONT color=#ff0000 size=5><B>컴자료실</A>

 

[25]홍보물에 링크걸기
<CENTER><A style="TEXT-DECORATION: none"
href="
url주소><IMG height=100
src="
이미지url주소"

 width=400 align=center border=0 frameborder?0?></A>
<CENTER><FONT color=#00000e><FONT face=궁서><FONT size=3><STRONG>
<MARQUEE behavior=alternate
width=410></FONT></FONT></SPAN></FONT></FONT></SPAN></MARQUEE>

</STRONG></FONT></FONT><BR></FONT></CENTER></A></CENTER>

 

[26]영어 독특한 글씨체

* Logo=symbol (bm) 필기체* Lucide Handwriting
멋글씨체* "Tempus Sans ITC"   "Impact"   "Ms Serif"  
-넓은 글씨-"Arial Black"   멋글씨체 Comic Sans MS
평범글씨체 systems 

 

[27] 소스를 보이게 [HTML로] 올릴 때.

사작 ↓ ---------------------- 끝에↓

<*XMP> ..... 보이게 넣는 소스 .....  <*/XMP>