Notice
Recent Posts
Recent Comments
rand(life)
[태그] 잘 쓰이는 태그 본문
새창에서 링크 열기
<a href="http://www.naver.com" target="_blank"> 네이버 </a>
아래는 http://www.tagkorea.pe.kr/ 에서 가져온 내용
HTML 문서의 구성
*<HTML> 태그 : HTML 문서 시작
*<HEAD> 태그 : 시작을 알리는 태그입니다.
*<TITLE> 태그 : 문서 제목 정의(브라우저 타이틀바에 표시됨).
*</TITLE> 태그 : 문서의 제목 끝.
*</HEAD> 태그 : 시작을 알리는 태그 끝.
*<body> 태그 : HTML 문서의 본문 부분
*</body> 태그 : 본문내용과 태그 끝.
*</HTML> 태그 : HTML 문서 마무리
<html>
<head>
<title>문서제목</title>
</head>
<body>
↑
이 곳이 본문의 내용을 꾸미는 곳입니다.
↓
</body>
</html> |
▶문서 배경 태그의 사용법
*<body bgcolor="색상"> : 윈도우 배경화면색 지정.
*<body background="이미지 주소"> : 배경을 그림으로할때 쓰는 속성.
*<body text="색상"> : 표준 글씨색 지정.
*<body link="색상"> : 링크 부분의 색 지정.
*<body vlink="색상"> : 검색한 링크 부분의 색 지정.
*<body alink="색상"> : 링크된글자를 누르는순간의 색을 지정.
▶<P> 태그의 사용법
*<P> 내용 </P> : 문단을 나누는 태그입니다.
▶빈칸 사용하기
▶주석 사용하기
*한 줄을 주석으로 사용할 때는 <! 주석> 태그를 이용하고 여러줄을 주석으로 이용하려면
<!-- , //--> 태그를 이용합니다. 주석태그는 브라우져에서는 보이지 않는 태그입니다.
▶<br> 사용하기
*<br> 태그는 줄을 바꾸고 싶을 때 사용하는 것입니다.
br 은 예를들어 한번만 사용하면 다음줄로 넘어갑니다.
하지만 여러줄을 띄우고 싶을 때는 br 의 횟수를 더 많이 해주면 됩니다.
3칸을 띄우고 싶으면 3번을 쓰시면 됩니다.
▶문단 정렬하기
*<p align="정렬형태"> : left 나 right 를 써서 줄 단위로 정렬합니다.
*<center></center> : 여러문단을 중앙 정렬합니다.
▶선 태그 사용하기
*<hr size="크기" width="크기" align="정렬형태" style="color:색상;" noshade>
수평선 그리기 태그입니다.
size : 픽셀 단위의 선의 두께입니다.
width : 선의 수평길이 입니다.
align : 길이가 화면보다 작을 때 수평선이 그려질 위치입니다.
noshade : 음영 효과 없는 보통의 선 그리기 입니다.
style="color:색상;" : 선의 색상을 바꿔줍니다.
▶글자 크기 변경
*<basefont size="크기"> : 전체 글자 크기를 지정.
*<font size="크기"> : 일부의 글자 크기를 변경.
▶글자색 변경
*<font color="색상"> : 글자의 색상 지정.
▶글꼴 변경
*<font face="글꼴명"> : 글꼴 지정.
만약, 글자의 크기와 색상,글꼴을 동시에 바꾸시려면
<font size="크기" color="색상" face="글꼴"> 이렇게 하시면 됩니다.
▶글자 모양 정리
|
|
|
| <i>내용 <i> <em>내용</em> <dfn>내용</dfn> <var>내용</var> <cite>내용</cite> |
이탤릭체 모양 |
| <b>내용</b> <strong>내용</strong> |
진한 모양 |
| <tt>내용</tt> <code>내용</code> <samp>내용</samp> <kbd>내용</kbd> |
타자체 courier 체로 표현. |
▶입력된 그대로 출력하기
<pre>내용</pre> : 화면에 나와 있는 내용을 그대로 출력합니다.
엔터를 치면 <br> 의 효과를 보게 됩니다.
<xmp>내용</xmp> : <pre> 태그와 비슷하지만 태그 소스까지 표시합니다.
한때 대화방에서 폭탄태그 방어로도 쓰였던 것입니다..^^
▶그림 삽입하기
<img src="이미지 파일 경로(주소)" alt="그림 설명">
그림과 설명을 삽입합니다.
▶그림 크기 지정하기
<img src="이미지 파일 경로(주소)" width="가로크기" height="세로크기">
그림을 자신이 원하는 크기만큼 조정합니다. 숫자가 높을 수록 커집니다.
▶그림의 위치 설정하기
<img src="이미지 파일 경로(주소)" align="정렬위치">
그림을 삽입하고 left 나 right 로 위치를 지정해 줍니다.
▶그림의 여백과 테두리 설정
<img src="이미지 파일 경로(주소)" border="테두리 두께">
그림의 경계선을 만듭니다.
<img src="이미지 파일 경로(주소)" hspace="크기">
그림의 좌우 여백을 지정합니다.
<img src="이미지 파일 경로(주소)" vspace="크기">
그림의 상하 여백을 지정합니다.
▶사운드 태그
<bgsound src="음악주소"> : 주로 배경음악으로 많이 쓰이는 태그입니다.
이 것은 mid 나 wav,mp3 파일등을 사용할때 쓰는 태그인데, 주로 배경음악으로 사용하는
파일은 mid 파일입니다. 용량도 작고해서 홈페이지 로딩시간에 별 지장을 주지 않습니다.
다른 파일들은 시간이 좀 오래 걸립니다. 요즘은 asf 파일도 사용합니다만 그것도 역시
시간이 좀 걸린답니다.
<embed src="음악주소"> : 이 태그는 전에 채팅상에서 많이 쓰이는 태그 였습니다.
주로 사용하는 파일이 asf 나 asx 파일입니다. 이 태그를 쓰게 되면 미디어 재생기가
나타나므로 자신이 맘대루 끌수도 있고 다시 재생시킬수도 있습니다.
이 외에도 리얼음악도 있지만 거의 배경음악으로는 사용이 불가능합니다.
리얼은 링크태그를 써서 클릭하면 들을수 있는 그런 방식입니다.
<a href="리얼 음악주소" target"new_window">여기를 클릭하세요!!</a> 이런식으로 하시면
됩니다.
또 한가지 [Tip], 홈페이지에 리얼과(다른 파일도 해당됨.) 같은 음악을 바로 띄우게 할수 있는
방법도 있습니다. 이건 스크립트를 이용하는 것입니다.
<script>open('음악파일주소')</script>
위의 예제처럼 하시면 홈에 들어오자 마자 플레이어가 나타나게 되죠^^.
<embed src="음악주소"> 이 태그를 쓰실때 재생기가 작게 나오게 하려면.....
width="수치" height="수치" 를 쓰게 되면 재생기의 크기를 마음껏 조절할수 있습니다.
<embed src="음악주소" width="수치" height="수치"> 이런식으로요..^^
음악을 반복해서 여러번 듣고 싶을때는 아래처럼 하시면 됩니다.
<embed src="음악주소" loop="반복횟수"> 이렇게 하시면 자신이 원하는 반복횟수만큼 들으실수 있습니다.
▶간단한 버튼 만들기
버튼만드는 기능은 여러가지가 있지만 여기선 간단한 것만 한가지 설명드리겠습니다.
아래 소스에 주소와 버튼에 들어갈 이름만 고쳐 쓰시면 됩니다.
<form action="http://myhome.naver.com/silverju1/tag.html" target="_blank">
<input type="submit" value="태그연습장">
</form>
스타일시트로 응용해서 이쁜색 버튼을 만들수도 있습니다.
소스
<input type="button" value="이쁜 버튼" style="color:white; font-size: 9pt;
background-color:pink; border:1 solid red;size= 30;height:20px"></style>
소스
<input type="button" value="이쁜 버튼" style="color:white; font-size: 9pt;
background-color:00ccff; border:1 solid blue;size= 30;height:20px"></style>
버튼응용에서 연결까지
<form action="연결시킬주소" target="_blank">
<input type="submit" value="버튼이름" style="color:white; font-size: 9pt;
background-color:pink; border:1 solid red;size= 30;height:20px"></style>
</form>
글씨태그자료실
※마우스로 복사를 못하는 초보님들께 알립니다.
글씨에 마우스를 꾹 누르신채 옆으로 드르륵 끌어당기면 글씨가 퍼렇게 변하죠? 이때 마우스 오른버튼을 누르시면 메뉴가 나옵니다.거기서 복사를 선택하면 복사가 된 상태입니다.
그 후에 붙여넣기를 하실때는 자신이 원하는 위치에 마우스를 갖다 대고 다시 오른버튼을 누르시면 붙여넣기 가 나옵니다. 그것을 선택해서 클릭하시면 붙여넣기가 된답니당...
☞모든 글씨태그를 사용하실때 제 홈에 있는 색상표를 참조하셔서 원하는 색상을 사용하시길 바랍니다.
☞기본글씨태그
<font size=7> 반가워요!</font>
<font size=6> 반가워요!</font>
<font size=5> 반가워요!</font>
<font size=4> 반가워요!</font>
<font size=3> 반가워요!</font>
<font size=2> 반가워요!</font>
<font size=1> 반가워요!</font>
<h1>사랑해!</h1><h2>사랑해!</h2><h3>사랑해!</h3><h4>사랑해!</h4><h5>사랑해!</h5><h6>사랑해!</h6>
사랑해!
사랑해!
사랑해!
사랑해!
사랑해!
사랑해!
☞테두리 글씨
<span style="font-family:휴먼엽서체;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=orange,strength:2)"><h2>이쁜글씨</span></style></h2>
이쁜글씨
<span style="font-family:휴먼엽서체;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=0000ff,strength:2)"><h2>이쁜글씨</span></style></h2>
이쁜글씨
<span style="font-family:휴먼엽서체;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=red,strength:2)"><h2>이쁜글씨</span></style></h2>
이쁜글씨
<span style="font-family:휴먼엽서체;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=ff99ff,strength:2)"><h2>이쁜글씨</span></style></h2>
이쁜글씨
<span style="font-family:휴먼엽서체;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=00cc99,strength:2)"><h2>이쁜글씨</span></style></h2>
이쁜글씨
☞파스텔 글씨
<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=blue, strength=8)"><font color=deeppink face=휴먼매직체>이쁜가여??</font></DIV></style>
이쁜가여??
<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=pink, strength=8)"><font color=deeppink face=휴먼매직체>이쁜가여??</font></DIV></style>
이쁜가여??
<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=red, strength=8)"><font color=blue face=휴먼매직체>이쁜가여??</font></DIV></style>
이쁜가여??
☞테두리와 파스텔의 중간 정도 되는 것 같네여^^;;
<span style=color:ffffff;filter:glow(color=ff99ff);height:0px><font face=고딕체 size=6>반가워요!</font></span></style>
반가워요!
<span style=color:ffffff;filter:glow(color=green);height:0px><font face=고딕체 size=6>반가워요!</font></span></style>
반가워요!
☞휴먼엽서체 바탕글씨
<SPAN style=font:15pt휴먼엽서체;color:white;background-color=red>빨간 바탕</SPAN>
빨간 바탕☜결과
<SPAN style=font:15pt휴먼엽서체;color:white;background-color=green> 녹색 바탕</SPAN>
녹색 바탕
☞그림자 글씨
<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=red,direction=135)">빨간색 그림자 글씨</SPAN>
빨간색 그림자 글씨
<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=green,direction=135)"> 녹색 그림자 글씨</SPAN>
녹색 그림자 글씨
<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=660099,direction=135)"> 보라색 그림자 글씨</SPAN>
보라색 그림자 글씨
<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=magenta,direction=135)"> 핑크색 그림자 글씨</SPAN>
핑크색 그림자 글씨
<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=orange,direction=135)"> 오렌지색 그림자 글씨</SPAN>
오렌지색 그림자 글씨
☞겹치는 글씨
<span style=filter:dropshadow(color=pink,offy=11);height:10px;><h1>태그코리아</h1>
태그코리아
<span style=filter:dropshadow(color=blue,positive=1);height:10px;><h1>태그코리아</span></h1>
태그코리아
☞글씨를 투명하게...
<span style=filter:alpha(style=2);height:10px;><h1><font color=blue>태그코리아</span></h1></font>
태그코리아
☞글자가 뒤집히는가??
<span style=filter:flipv();height:1px;><h1><font color=red>돌아버리겠네~</span></h1></font>
돌아버리겠네~
☞글씨 크기는 font size=7 까지 할수 있으며, 아래 글씨는 4 입니다. color=아래 예제처럼 좋아하는 색상을 영어로 쓰셔야 하며 face=돋움체,바탕체,궁서체등을 쓰시면 됩니다.
예제)
<font size=4 color=magenta face=샘물체> 핑크</font>
<font size=4 color=red face=휴먼엽서체> 빨간색</font>
<font size=4 color=blue face=매직체> 파란색</font>
<font size=4 color=olive face=돋움체> 금색</font>
<font size=4 color=orange face=바탕체> 오렌지색</font>
<font size=4 color=bluesky face=휴먼매직체> 연한녹색</font>
<font size=4 color=break face=궁서체> 투명한녹색</font>
<font size=4 color=silver face=고딕체> 은색</font>
<font size=4 color=663399 face=엽서체> 보라색</font>
<font size=4 color=339933 face=굴림체>녹색</font>
<font size=4 color=redblue face=궁서체>연한 파란색</font>
☞더욱 큰 글씨를 원하시면 아래의 명령어를 사용해 보세요^^
<font style = font-size:200pt>훔!</font>
훔!
☞정렬 시키는 태그..
| <DIV ALIGN=right>오른쪽정렬</div> |
오른쪽 정렬 |
| <DIV ALIGN=center>가운데 정렬</div> |
가운데 정렬 |
| <DIV ALIGN=left>왼쪽 정렬</div> |
왼쪽 정렬 |
☞요거는 글자가 쓰러지네여^^
<font face="@궁서">힝~ 이게 뭐쥥..?</font>
힝~ 이게 뭐쥥..?