중요태그방법

 

단락태그

<pre> 내용 </pre>  내용에 있는 그대로를 출력하는 태그.

<br>  Enter를 친 것과 같은 효과를 내는 태그 

<p> 내용 </p>  한문단임을 나타내는 태그 

글자태그

h 태그 - 제목을 나타내는 태그 ( 글자의 크기 나타내기

<h숫자> 내용 </h숫자>  숫자는(1-6)까지 이고 숫자가 커질수록 글자가 작아 진다. 

<태그 [속성1]="[속성1의값]" [속성2]="속성2의값" ....> 내용 </태그>

 

글자 태그 - <font> 태그의 속성

size   글자의 크기를 나타내는 속성(1-7)

<font size="숫자"> 내용 </font>  1-7까지의 숫자를 넣으면 글자의 크기를 정할 수 있다.

 

color  글자의 색깔을 나타내는 속성입니다..

font color="컬러코드 또는 컬러이름"> 내용 </font> 

face   글자의 모양( 굴림체,돋움체... 등등)을 나타내는 속성입니다. 

 

<b>...</b> : 글자를 찐하게 해주는 태그.

<u>...</u> : 글자에 밑줄을 긋는다.

<i>...</i> : 글자를 이택릭체로 만드는 태그.

 

<hr>태그는 홈피에 수평선을 그어주는 태그입니다.

 

속성(properties)

size : 수평선의 굵기

width : 수평선의 길이

align : 수평선의 정렬(left,right,center)

color : 수평선에 색깔을 입힌다

noshade : 수평선을 평면으로 보이게 합니다.

<hr size=5><hr><hr width=100><hr align=left width=400><hr align=center width=400>

움직이는 글자 태그 - <marquee>태그의 속성

 

direction  글자가 움직이는 방향 설정

direction="left"  direction="right"  direction="up"  direction="down"

behavior  글자가 움직이는 방법에대해서 설정

behavior="slide"  멈춤 

behavior="alternate" 

왕복  behavior="scroll"  한방향

 

loop      움직이는 횟수 설정입니다

loop="infinite"  무한번   loop="4"

 

scrollamount  빠르기를 나타냅니다. 숫자가 클수록 빠릅니다.

scrollamount="1"  scrollamount="5"  부드러운 움직임

scrolldelay    빠르기긴 한데 이건 반대로 숫자가 클수록 느립니다.  끊어지는 움직임

scrolldelay="100"  scrolldelay="200"

 

width     움직이는 가로부분의 크기 입니다

width="100"   width="200"

 

height    세로부분의 크기 입니다.

height="100"   height="200"

이미지태그 <img>

 

src  이미지의 URL주소를 나타냅니다.src="http:..."

width  이미지의 가로 너비를 조정해주는 속성입니다.  width="50"  width="200"

 

height  이미지의 세로 높이를 조정해주는 속성입니다. height="50"  height="100"

hspace  이미지의 가로 간격(공간)을 주는 속성입니다.  hspace="10"  hspace="20"

 

vspace  이미지의 세로 간격(공간)을 주는 속성입니다.  vspace="10"  vspace="5"

border  이미지의 테두리 두께를 나타내줍니다.  border="0"  border="1"

 

<img width="200" src="http://www.golgori.net/716tag/img/love/001.gif">

그림의 폭을 200으로 바꾼거죠

 

 

<table> 태그 : 표의 시작과 끝을 알려 주는 태그 이다.

 

투명한 표 만들기

<table><tr><td>골골이의 태그세상</td></tr></table>

기본적인 표 만들기

<table border><tr><td>골골이의 태그세상</td></tr></table>

 

가는테두리로 만들기

<table border="1" cellspacing="0"><tr><td>골골이의 태그세상</td></tr></table>

<table> 태그 단독으로만 쓰면 투명한 선의 표가 나옵니다.

border속성을 지정해주면 바깥부분에 선이 나타 납니다.

선을 가늘게 설정하려면 세 번째 예제 처럼 cellspacing=0으로 지정하면 되겠죠.

 

<tr>,<td> 태그 : 가로선,세로선을 나타내어주는 태그 이다.

 

2x1 형 표 만들기

<table border="1"><TR><TD>1행1열입니다.</td></TR>

<TR><TD>2행1열입니다.</TD></TR></table>

1x2형 표 만들기

<table border="1"><tr><td>1행1열입니다.</td>

<td>1행2열입니다.</td></tr></table>

 

 

프레임테그

 

<frameset cols="20%, 80%">

<frame src="test1.htm">

<frame src="test2.htm">

</frameset>    2열(세로로 쪼갬) 

 

cols는 수직으로 프레임을 나누는 속성입니다

row 속성은 수평으로 프레임을 나누는속성이죠

 

<frameset rows="15%, 85%">

<frame src=one.htm">

<frameset cols="15%, 85%">

<frame src="two.htm">

<frame src="three.htm">

</frameset>

</frameset>

<frameset rows="15%, 85%" border="10" bordercolor="red">  경계선이 두꺼우면서 붉은색

<FRAMESET>속성에서 FRAMEBORDER="NO"를 추가 해주시면 경계선이 없어진답니다.

 

프레임의 경계가 움직이는 것 그걸 마우스로 조정을 못하게 하는 방법은 <FRAME> 태그에서 NORESIZE를 추가 해 주시면 됩니다

문서의 내용이 많을 때 스크롤바를 보이게 하는 속성이 있습니다. 

 

SCROLLING 속성

SCROLLING="NO"  스크롤바가 보이지 않게 하는 것이고

SCROLLING="YES"  스크롤바가 생기는 속성이구요..

SCROLLING="AUTO"  내용이 넘쳐 흐를 때만 스크롤 박스를 만들어 주는 자동

 

문서 만들기

 

<a href="http://www.daum.net" target="center"> 다음 </a>

target속성은 프레임이름이 설정 된 페이지에 문서를 보이게 하는 것이랍니다.

그러니까.. "center"라고 지정된 곳에 문서를 보여 주는 것이지요

 

<frameset cols="20%, 80%">

<frame src="left.htm">

<frame src="main.htm" name="center">

</frameset>

프레임 이름을 center로 지정했기 때문에 아까 위의 문서에서 target"center"라고 지정하면 이름이 같은 프레임에 나타나게 하는 거죠

 

음악태그

 

홈페이지에 배경음악을 연주해 주고 싶으시면 <embed> <[안내]태그제한으로등록되지않습니다-bgsound>태그를 이용

<EMBED SRC="음악파일경로/음악파일명" AUTOSTART="[]" HIDDEN="[]" WIDTH="[]" HEIGHT="[]" LOOP="[]">

src  음악 파일이 있는 경로 (URL주소)

autostart  문서가 로드 될 때 음악이 재생되는지?

autostart="true"   autostart="false"

hidden  미디어 플레이어가 보이게 할 것인지 아닌지를 보이는 속성

hidden="true"   hidden="false"

width  미디어 플레이어의 크기를 설정함  width="100"

height     height="50"

loop  음악을 한번만 연주하는지 아님 무한번 계속 반복하는지를 정함

loop="false"   loop="true"

 

<textarea>태그 - 스크롤바 만들기 기초

 

cols  칸수를 지정합니다.  cols="50"

rows  줄수를 지정합니다.  rows="7"

readonly  이걸 지정하면 스크롤 박스 안에 있는 내용을 바꿀 수 없게 만듭니다.

<textarea cols="70" rows="5" readonly>

스크롤 바안의 글자의 색깔과 스크롤바 배경의 색깔을 지정

이건 스타일을 이용 하는 것인데요  <textarea> 태그에서 style="color:글자색깔지정 background-color:스크롤바배경색깔 지정"  을 지정 하시면 됨

color              글자 색깔을 지정하는 것이죠

background-color  스크롤바의 배경 색깔을 지정하는 것이예염

border-color       스크롤바의 테두리 색깔을 지정함

<textarea cols="70" rows="3" style="color:green; background-color:aqua;" cols="20">

이거 색깔이 어때요?</textarea>

<textarea cols="70" rows="3" style="border-color:blue;color:green; background-color:aqua;" cols="20">이거 색깔이 어때요?</textarea>

 

 

<iframe>태그 문서안에 다른 문서를 넣을 때 또는 문서안에 게시판을 넣을 때 사용.

 

<iframe src="http://hsbu.com.ne.kr/memo1" width="480" height="370"> </iframe>

<table border="1" align="center" style="line-height:150%;">

<tr><td width="480" height="370">

<iframe src="http://hsbu.com.ne.kr/memo1" width="480" height="370"> </iframe>

</td></tr></table>

<ifram esrc="주소" frameborder="테두리표시여부" bordercolor="테두리색상"

marginwidth="가로여백크기" marginheight="세로여백크기" width="가로길이" height="세로   길이" align="정렬방식" scrolling="스크롤 할 것인가?" ></iframe>

frameborder속성

frameborder="yes" 면 테두리가 나타남

frameborder="no"면 테두리가 나타나지 않음

align 속성 

align="center" 중간으로 정렬  align="left" 왼쪽으로정렬  align="right" 오른쪽으로 정렬 scrolling속성

scrolling = "auto" 내용이 많을 때 스크롤

scrolling="yes" 무조건 스크롤    scrolling="no" 이면 스크롤 하지 않음

 

iframe태그를 이용해서 target효과 주기

 

name에서 iframe를 설정

<iframe src="http://www.daum.net" width="80%" height="400" name="iframe"> </iframe>

target의 이름을 iframe으로 설정

<a href="http://www.yahoo.co.kr" target="iframe">야후코리아</a>

 

특정사이트의 소스 보기

 

<a href="view-source:http://www.daum.net">소스보기</a>

 

 

잠겨진 소스 보기

 

웹 서핑을 하다 보면 소스보기를 못하게 하기위해서

자바스크립트로 오른쪽마우스 눌렀을때

대화창이 뜨면서 소스보기를 막아 놓은곳을 많이 보았을 것입니다.

그럴땐 Shift키를 누른채 F10키를 누르면 마우스 오른쪽 버튼을

누른것과 같이 됩니다.

 

 

문구뜨는소스 푸는방법

 

오른쪽 마우스 누루면 누루면 안되여 하면 서 이상한게 뜨거나 그런곳 있잖아요??

거기서 오른쪽마우스 눌리고 바로 때지말고 계속 눌리고있으면

그 누르지마세여 도 계속있잖아요 그때 엔터나 스페이스바 를 한번 쳐주고

오른쪽 마우스를 때주면 된담니다 팁입니다 소스같은것 은 없어여 

 

홈페이지의 배경을 단색으로 바꾸기

 

background   배경에 들어갈 파일이름으로 URL을 지정해주면 됩니다.

background= "http://www.golgori.net/img_chr/bg.jpg"

bgcolor      배경그림이 없을 때 단색으로 지정해 줄 수 있습니다.

bgcolor="red"     bgcolor="#ff00ff"

text         보통 글자의 색깔

text="yellow"    text="#ffccff"

link         링크될 글자의 색깔

link="navy"    link="#ccffff"

vlink        링크 된 글자의 색깔

vlink="navy"   vlink="#ccffff"

alink        지금 링크하고 있는 글자의 색깔

alink="navy"   alink="#ccffff"

<html><head><title> 태그 연습하기 </title></head>

<body bgcolor="black" text="white"> 바탕색이 검정색이네..</body></html>

<body background=" "> 바탕그림이 나오게 하는 방법

 

그림위에 글자 쓰기

 

테이블을 이용해서 만드는 것  background속성

<table cellpadding="0" cellspacing="0" width="198" background="text_on_image.gif">   

<tr><td width="198" height="55"><p>?이뻐? 나 이뻐?</p>

<p>?저 이쁜이 예요..</p></td></tr></table>

 

마우스 오른쪽 버튼을 쓰지 못하게하기

 

<body [안내]태그제한으로등록되지않습니다-oncontextmenu="return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ondragstart="return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xxonselectstart="return false">  굵은 글씨 부분을 <body> 태그 안에 집어 넣으면 됩니다

<body [안내]태그제한으로등록되지않습니다-xxonload="ad();"> 이런 식으로 되어 있었다면 <body [안내]태그제한으로등록되지않습니다-xxonload="ad();" [안내]태그제한으로등록되지않습니다-oncontextmenu="return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ondragstart="return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xxonselectstart="return false">

 

그림이나 글자의 위치 조정하기

 

center 태그를 이용해서 가운데에 넣는 방법  <center>과 </center>

 

 

 

보이지 않는 테이블을 이용하여 넣기

테두리는 table태그의 속성중 border=0 으로 지정을 하면 테두리를 없앨 수 있고

글자를 없앨 때는 완전히 없애면 표가 무시 되는 경우가 있으므로 빈공간을 나타내는

특수문자  를 지정하도록 합시다

 

파도치는 글자

 

<marquee  direction="up" behavior="alternate"><marquee behavior="alternate"><font size="4" color="black">안녕하세요</font></marquee></marquee>

 

 

이중마퀴

 

<marquee behavior=alternate> <marquee width=50 height=50> ----- </marquee> </marquee>

 

 

그림위에 움직이는 글자 넣기 생성기

 

<table  width="590" height="425" background="http://www.golgori.net/img_chr/bg01.gif">

<tr><td><marquee direction="up" scrollamount="4" width="590" height="425">자갸.. <br><br><br>사랑 하는 자갸..<br>보고 시퍼<br></marquee>     </td> </tr></table>

 

 

대칭형 글자 만들기

 

<div style="width:200; height:20;color:black; font-size:15pt; filter:fliph();">

안녕하세요...</div>

 

 

글자 뒤집기

 

<div style="width:200; height:20;color:black; font-size:15pt; filter:flipv();">

안녕하세요...</div>

 

 

멋진 전광판 만들기

<applet! code="RainbowText.class" codebase="http://myhome.naver.com/jyd1445/jslim/

rainbowtext/" width="350" height="30" style="border:5px #880000 solid" >

<param name=text value="★☆★☆전광판 이쁘져~★☆★☆">

<param name=fontname value="TimesRoman">

<param name=fontsize value=17>

<param name=fontstyle value=BI>

<param name=bgcolor value=000000>

<param name=sleeptime value=120> </applet!>

 

 

스크롤바를 없애기

 

인덱스 페이지 같은 경우 전체 이미지사용할때(1022*610) body문 끝에

scroll="no"라고 하면 스크롤바는 사라지게되고 홈피는 깔끔하게 보입니다..

<body~~scroll="no">

 

하이퍼 링크를 걸면 및줄이 생기는데 이것을 없애는 방법

 

<a style=text-decoration:none href="주소">글씨</a>

 

 

마우스를 가져오면 색깔이 변합니다.

 

<font color="black" [안내]태그제한으로등록되지않습니다-xxonMouseover="this.style.color='red'"

[안내]태그제한으로등록되지않습니다-xxonMouseout="this.style.color='black'">

마우스를 가져오면 색깔이 변합니다.</font>

 

style 태그는 반드시 <head>와 </head>사이에 들어가야 합니다

 

 

링크된곳에 마우스를 갖다대면 살짝 들어가는 

<style type="text/css">

<!--

a:hover position:relative; top:1; left:1

-->

</style>

 

 

마우스가 가면 색깔이 변하는것

<style type="text/css"><!--

select  font-family:굴림 font-size:9pt; text-decoration:none;

a:link  font-family:굴림 color:949C9B; text-decoration:none;

a:active  font-family:굴림 color:949C9B; text-decoration:none;

a:visited  font-family:굴림 color:949C9B; text-decoration:none;

a:hover  font-family:굴림 color:0d0d0d; text-decoration:none;

--></style>

마우스를 올렸을때의 링크설정이 바로 hover입니다