http://blog.naver.com/ozzykgm/120001269611




















그림자 글씨

<span style="font-weight:none; color:#ffcc66; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=orange,direction=135)"> 오렌지색 그림 자 글씨 
오렌지색 그림자 글씨 
<span style="font-weight:none; color:#AA8FBE; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=660099,direction=135)"> 보라색 그림자 글씨 
보라색 그림자 글씨 
<span style="font-weight:none; color:#FF9292; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=red,direction=135)">빨간색 그림자 글씨 
빨간색 그림자 글씨 
<span style="font-weight:none; color:#FA9BFE; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=magenta,direction=135)"> 핑크색 그림자 글씨 
핑크색 그림자 글씨 
<span style="font-weight:none; color:#51E179; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=green,direction=135)"> 녹색 그림자 글씨 
녹색 그림자 글씨 

파 스텔 글씨 
<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=red, strength=8)">너랑나랑 


너랑나랑
<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=blue, strength=8)">너랑나랑 


너랑나랑
<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=pink, strength=8)">너랑나랑 


너랑나랑
<span style=color:ffffff;filter:glow(color=#89E185);height:0px><font face= 고딕체 size=6>숨박꼭질 
숨박꼭질 
<span style=color:ffffff;filter:glow(color=ff99ff);height:0px><font face=고딕 체 size=6>숨박꼭질 
숨박꼭질 

바탕글씨 예제
<SPAN style=font:15pt휴먼엽서체;color:white;background-color=green> 녹색 바탕 
녹색 바탕 
<SPAN style=font:15pt휴먼엽서체;color:white;background-color=red>빨간 바탕 
빨간 바탕 

글씨체 및 색상예제
<font size=4 color=magente face=휴먼엽서체> 예쁜핑크 
<font size=4 color=red face=샘물체> 예쁜빨강 
<font size=4 color=blue face=매직체> 예쁜파랑 
<font size=4 color=orange face=바탕체> 예쁜오렌지 
<font size=4 color=break face=궁서체> 투명한녹색 
<font size=4 color=663399 face=엽서체> 예쁜보라 
<font size=4 color=redblue face=궁서체>연한 파란색 
<font size=4 color=bluesky face=휴먼매직체> 연한녹색 
<font size=4 color=silver face=고딕체> 예쁜은색 
<font size=4 color=339933 face=굴림체> 예쁜녹색


marquee태그

기본속성들< /b> scrollamount 빠르기지정.(숫자가 높을수록 빨라집니다) scrolldelay 흔들리는 속성 direction 방향설정(left,right,up,down) loop 숫자지정(예:loop="3" 을 지정할경우 3번 실행) width 가로지정 height 높이지정 
< marquee> 초간편마퀴</marquee> 
초간편마퀴
마퀴의 사이즈 조정< marquee width="가로" height="세로">
마퀴의 스크롤방향 지정
<marquee direction="스크롤방향"> 
<marquee direction="right">오른쪽으로 움직임 

오른쪽으로 움직임
<marquee direction="left">왼쪽으로 움직임 

왼쪽으로 움직임
<marquee behavior="alternate">좌우로 움직임 

좌우로 움직임
<marquee behavior="alternate" scrollamount="1000">좌우로 빠 르게 

좌우로 빠르게
<marquee direction="up" scrolldelay="200">위로 올라감 

위로 올라감
<marquee direction="down" scrolldelay="200">아래로 내려감 

아래로 내려감
<marquee behavior="alternate" direction="up">두개이상 적용 

두개이상 적용
<marquee behavior=alternate width=30>@^.^@) 도리도리~~깍꿍! 
( 
@^.^@) 도리도리~~깍꿍! 
<marquee direction=up height=40 behavior=alternate>)점프!점 프!에구에구~힘뎌~@ 

점프!점프!에구에구~힘뎌~@)

< marquee> WELCOME to 시티~!클럽☆＊＊＊< /marquee> 
WELCOME to 시티~!클럽☆＊＊＊

< MARQUEE behavior="alternate"> WELCOME to 시티~!클럽☆＊ ＊＊</marquee> 
WELCOME to 시티~!클럽☆＊＊＊

<MARQUEE scrollAmount="1">WELCOME to 시티~!클럽☆＊＊ ＊< /marquee> 천천히 
WELCOME to 시티~!클럽☆＊＊＊

< MARQUEE scrollDelay="500">WELCOME to 시티~!클럽☆＊＊＊ < /marquee> 기계처럼 
WELCOME to 시티~!클럽☆＊＊＊

< marquee> ″＼@_ < /marquee> 달팽 이 
″＼@_

<marquee width="300">←♡--< {> </marquee> 활쏘기

←♡- -<{> 



글자크기 태그
<font size=7> 큰 글자 
큰글자 
<font size=6> 큰 글자 
큰글자 
<font size=5> 과수원 길 
과수원 길 
<font size=4> 과수원 길 
과수원 길 
<font size=3> 작아요 
작아요 
<font size=2> 작아요 
작아요 
<font size=1> 작아요 
작아요 
엄청 큰 글씨 
<font style = font-size:150pt>짱 
짱 

글씨색상 태그
color는 코드나 영 어로만 기입하세요. 
<font color="458B74">초록 
초록 
<font color="FFD700">노랑 
노랑 
<font color="red"> 빨강 
빨강 
<font color="blue"> 파랑 
파랑 
<font color="FF4500">주황 
주황 
<font color="FFC0CB">분홍 
분홍 
<font color="#FFFF00"> 노랑 
노랑 





글자변형 태그
<b>진하게 </b> 
진하게 
<i>이탤릭체 </i> 
이탤릭체 
<sup>위첨자 </sup> 
위첨자 
<sub>아래첨자 </sub> 
아래첨자 
<u>밑줄긋기 </u> 
밑줄긋기 
<center>중앙정렬</center> 

<p>단락바꿈</p> 

<br>단락바꿈 (종료태그 없음) 

글자모양 태그
<font face="돋움체">돋움체 
돋움체 
<font face="바탕체">바탕체 
바탕체 
<font face="굴림체">굴림체 
굴림체 
<font face="궁서체">궁서체 
궁서체 
<font face="고딕체">고딕체 
고딕체 

선


<hr size=5, width=250 align=center> 



<hr size=3, width=50% align=left noshade> 



HTML 
<html> HTML 문서의 시작과 끝을 나타냅니다. 
HEAD 
<head> HTML 문서의 머리말 부분에 해당합니다. 
BODY 
<body> HTML 문서의 실제적인 내용이 들어가는 부분으 로 본문에 해당하며 화면에 곧바로 나타나게 되는 부분이므로, head 태그가 끝난후에 지정해 줍 니다. 
TITLE 
<title> HTML 문서의 제목을 나타냅니다. 
head 사이에 넣습니다. 
배경그림 바꾸기 
<body background="배경그림의 주소"> 
구름배경을 넣는다면 
<!-- 
body{background-image : url("http://my.dreamwiz.com/titan2k/graphic/bground/cloud-bg.jpg"); 
background-repeat : repeat ; } 
//--> 
</style> 

배경색상 바꾸기 
<body bgcolor="색상명">또는 
<STYLE type=text/css> 
body{background-color: black; 칼라만 바꾸면 됩니 다. 

이미지 태그 
<img src="그림주소"> 
이미지에 마우스 대면 내용 나오게 하기 
<img src="그림주소"border="0"alt="내용">

** 각 소스의 수치를 변경해서 해보세요....*^^* ** 

opacity=100(선명도..숫자가높을수록 흐려짐) 
style=0(0=원본그림,1=한쪽만흐리게,2=원형으로흐리게,3=사각형) 

* 원본 이미지 * 
<img src="http://melody123.com.ne.kr/img/f184.jpg"> 


 


* 투명한 듯한 그림 1-한쪽만 흐리게 * 

<img src="http://melody123.com.ne.kr/img/f184.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"> 


 

* 투명한 듯한 그림 2-원형으로 흐리게 * 

< img src="http://melody123.com.ne.kr/img/f184.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"> 


 

* 투명한 듯한 그림 3-사각형으로 흐리게 * 

<img src="http://melody123.com.ne.kr/img/f184.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"> 


 


* 전체적인 효과 * 

< img src="http://melody123.com.ne.kr/img/f184.jpg" style='filter:Alpha(Opacity=50)'> 


 


* 햇살에 비추는 듯한 이미지 * 

<img src="http://melody123.com.ne.kr/img/f184.jpg" style="filter:blur(direction=135,strength=100)"> 


 


* 흑백 이미지 * 

<img src="http://melody123.com.ne.kr/img/f184.jpg" style="filter:gray()"> 


 


* 칼라 필림 효과 * 

<img src="http://melody123.com.ne.kr/img/f184.jpg" style="filter:invert()"> 


 
 ※ 이미지(사진, 그림) 넣기 
<☆img src="그림주소"> (☆은 빼고 사용하세요) 
- 태그가 간단하지요? 
대신 그림주소를 찾는 것이 중요합니다. 
방법은 원하는 그림에 마우스를 대고 우측클릭을 한후 나타나는 화면에 보이는 등록정보(properties)를 클릭하면 
http://~로 시작하는 주소가 중앙에 있습니다. (URL이라고 되있을꺼예요) 
그것이 바로 그림주소입니다. 
그 그림주소를 복사하여 따옴표 안에 넣으시면 됩니다. 
<☆img src="http://cafe132.daum.net/_c21_/pds_down_hdn?grpid=1JHY&fldid=2x4j&dataid=98&grpcode=bigmemories&realfile=webjin_photo_01.gif"> 
이런식으로요. 


※ 이미지 크기 조절하기 

그림&사진크기 조절하기 




윗 그림과 아래 그림 크키가 다르죠 소스를 보세요
width="400" height=400" 바로 이렇게 width 그림의 가로 길이,height 그림의 높이 를 지정해줍니다

<☆img src="http://cafe132.daum.net/_c21_/pds_down_hdn?grpid=1JHY&fldid=2x4j&dataid=98&grpcode=bigmemories&realfile=webjin_photo_01.gif" width="400" height="400"> 이렇게여 

그림의 크기는 마우스 오른쪽 누르면 등록정보에 해상도라고 있는데 그게 그림의 실제 크기입니다
그림 크기는width="200" height="200" 이 부분을 적절히 조절해 주시면 됩니다




※ 원하는 위치에 이미지나 배너 넣기 
안녕하세여? 
이번에는 원하는 곳에 이미지를 올리는 방법입니다. 
숫자만 조절하시면 카페 대문 원하는 어떤 곳에라도 
팝업공지창이나 카운터라든지 시계라든지 배너를 넣을수 있답니다. 
소스는 다음과 같습니다. 


이미지의 위치태그 소스 
<☆img src="http://image.hanmail.net/hanmail/general/logo_worldcup2.gif" border="0" style="position:absolute;left:20pt;top:30pt;z-index:2"> (☆은 빼고 사용하세요.) 




left나 right에 있는 숫자는 커질수록 가운데로 오게 됩니다. 
top에 있는 숫자는 커질수록 아래로 내려 오게 됩니다. 
숫자를 조절해 보면서 원하는 위치를 찾으시면 됩니다. 

※ 이미지를 왼쪽, 가운데, 오른쪽에 정렬하기 
그림을 "왼쪽" 에 놓고 싶으세요? 기본값이 왼쪽이기 때문에 특별히 터치할게 없지만 

<p align="left">

<img src="그림주소">




 
그림을 "가운데"에 놓고 싶으세요? 

<p align="center">

<img src="그림주소">



 
그림을 "오른쪽"에 놓고 싶으세요? 

<p align="right">

<img src="그림주소">



 
너무 쉽죠? 가장 흔하게 사용하는 "가운데 정렬"은 쉬운 방법이 따로 있습니다 

<center>

<img src="그림주소">

</center>


 


※ 이미지에 테두리 넣기/빼기 

 
자꾸 그림에 테두리가 생겨서 열받죠?

BORDER=0 추가해주면 테두리 안보이게 할 수 있어요 

 
이렇게<img src="http://image.hanmail.net/hanmail/general/toplogo.gif" width="140" height="52" border="0"> 
짜자잔 테두리가 사라졌죠? 이번엔 테두리 굵게 하는법도 알려드리죠 


 
BORDER="숫자" 여기서 숫자를 높여주면 테두리도 굵어집니다 

 
BORDER=5 한 테두리 입니다