13.이미지 넣기

이미지 넣기 기본형태 <IMG SRC="이미지 파일명 또는 url"> 예 <IMG SRC="netian.gif" border="0" align="center" width="250" height="100"> 속성 border 0일 경우, 이미지의 라인 없앰 align 이미지 파일의 정렬을 지정 width height 이미지의 너비와 높이를 픽셀 단위로 지정 링크 걸기 기본형태 <A HREF="링크할 문서 또는 url"> ... </A> 예 <A HREF="http://www.netian.com" target="_blank">네띠앙</A> 속성 target="_blank " .. - .. 해당 링크를 새창에서 띄워 줌 메일 보내기 <A HREF="mailto:전자메일 주소"> .. </A> 단락 구분 및 정렬 줄 바꿈 <BR> 단락 바꿈 <P> .. </P> 가운데 정렬 <CENTER> .. </CENTER> 문자 꾸미기 . 태그 (HTML 소스) 설명 (예) 속성 <B> .. </B> 글씨체 굵게하기 <STRONG> .. </STRONG> <B>와 함께 글씨체 굵게하기 기능 <I> .. </I> 이탤릭체 <U> .. </U> 글자에 밑줄 넣기   글자 사이 간격 띄우기 크기 <FONT SIZE="숫자"> .. </FONT> 1부터 7까지의 숫자로 글씨 크기를 조절함 색상 <FONT COLOR="색상명"> .. </FONT> 색상명 또는 색상 코드로 글씨의 색상을 지정 글씨체 <FONT FACE="글씨체"> .. </FONT> 굴림체, 돋움체, 바탕체 등 글씨체 지정

[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="http://cafe.daum.net/hknetizenbonboo"

 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="http://cafe.daum.net/hknetizenbonboo"
target=blank><IMG alt="Daum 검색에서☞ 한국 네티즌본부"
src="http://hknetizenbonboo.com/fl-3.gif" border=0> </A></MARQUEE>
<CENTER><FONT color=#ff0000 size=5><B>시편 영상 감상 </A>

 

[25]홍보물에 링크걸기
<CENTER><A style="TEXT-DECORATION: none"
href="http://cafe.daum.net/hknetizenbonboo" target=blank><IMG height=100
src="http://hknetizenbonboo.com/MyungUnButtum050713C.jpg"

 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>