[스크랩] 각종 테그의 예제

여러 가지 문자 관련 속성을 알아봅니다.

1.이건 약간 비슷하긴 하지만, 문자의 크기를 정하는 태그입니다.

view-source:	결과
<h1> 크다 </h1>	크다
<h3> 중간 </h3>	중간
<h5> 작다 </h5>	작다

 <h1> 부터~ </h6> 까지 있으며. 숫자가 클수록 크기가 작음.(font태그와는 반대죠)

2.문자 크기를 굵게.

<b> 음냐 </b>

음냐

3.문자를 이탤릭체로 나타내기.

<l> 이탤릭체 </l>

이탤릭체

4.문자에 밑줄을 침.

<u> 중요 </u>

중요

5.문자를 주변문자보다 크게.

으<big>으하하</big>하

으으하하하

6.문자를 아래첨자,윗첨자로 표현.(수학에...뭐; 여러운 표기하는데에 쓰면 좋을듯)

아<sub>래첨</sub>자

아래첨자

윗<sup>첨</sup>자

윗첨자

8.문자를 주변문자보다 작게.

주변보다<small> 작냐</small>훗

주변보다 작냐훗

9.글씨나 이미지, 테이블 등을 위치 정렬하는 태그입니다.

<div align="right">오른쪽구석</div>	결과->	오른쪽구석
<div align="left">왼쪽퉁이</div>	결과->	왼쪽퉁이
<center>중앙*-_-*</center>	결과->	중앙*-_-*

↓ 다음은 문자태그는 아니고. 그냥 유용할거같은 문서속성. 마크업태그입니다. ↓

1.저작권표시(ⓒ)의 삽입 : &copy;

문서에 대한 저작권 표시를 삽입하려면 반드시 특수문자 (&copy;)를 사용해야 합니다. 단, &copy;만 사용해도
되지만, 넷스케이프 내비게이터에 깨지지 않고 나타나게 하려면 반드시 <font>태그와 함께 사용해야 합니다.
예) 인터넷 익스플로러 → &copy;

결과)  ⓒ

2.공백 (space)의 삽입 : &nbsp;

HTML문서에서는 스페이스키(Space Key)를 여러번 쳐도 1개의 공백만을 허용하죠. 따라서 여러개의
공백을 넣으려면 반드시 공백(Space)에 해당하는 특수문자(&nbsp;)를 사용해야 합니다.

예) 바보 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 바보

결과) 바보        바보

3.정형화된 문서(Preformatted Text) : <pre>

HTML문서에서는 [Esc]키나 [Space Bar]키의 사용은 의미가 없죠. 그런데, 여러번의 엔터 키나 여러개의 스페이스
키를 그대로 웹문서에서 나타나게 하려면 <pre> 태그를 사용해야 합니다.

	source	결과
<pre> 사용	<pre> 하지만 드라군이 출동하면 어떨까?  드!!  라!!  님들아 뭐하3?  군!! </pre>	하지만 드라군이 출동하면 어떨까?  드!!  라!!  님들아 뭐하3?  군!!
사용없이	하지만 드라군이 출동하면 어떨까?  드!!  라!!  님들아 뭐하3?  군!!	하지만 드라군이 출동하면 어떨까? 드!! 라!! 님들아 뭐하3? 군!!

4.주석문 : <!-- 이 사이 -->

문서를 제작하는 사람이 참고로 하고자 하는 내용을 입력해두는 태그로, 이 주석문 안에 있는 내용은 웹 브라우저에서는
보이지 않고, 소스에서만 보여집니다. 홈페이지만드는 사람들에겐 필수죠. 미도 필수
예) <!-- <textarea> 샒 </textarea> -->

결과) ↑ "<!--" 와, "-->"  사이의 태그와 글씨 등 모두 무시 (적용되지않음)소스에서만 보입니다.


6. "<" or ">"
   마지막으로 이건 "태그에 관한 홈페이지를 만드시는 분" 께 필수가 되는 건데, 자세히 설명은 안하죠.
   태그를 설명할 때,
   웹에서 "<" 이것과 ">" 이것을 나타내는 소스 입니다.

소스	결과
&lt;	<
&gt;	>

Tip 6번 방식 외에 4번을 이용해서 태그 소스가 적용되지 않고 그대로 나타나게
할 수도 있습니다.

소스	<<!-->embed src="#"><<!-->embed>
결과	<embed src="#"><embed>

 

 

span style="font-family:굴림;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=0000ff,strength:2)"><h2> 파랑색 테두리글씨 </h2></span>

파랑색 테두리글씨

<span style="font-family:굴림;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=red,strength:2)"><h2> 분홍색 테두리글씨 </h2></span>

분홍색 테두리글씨

<span style="font-weight:none; color:yellow; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=orange,direction=135)"> 글씨를고쳐서쓰세요 </span>

글씨를고쳐서쓰세요

<table width=100%><td width=450><span style=color:pink;filter:shadow(color=ff00cc);height:0px><font face=돋움><FONT SIZE=7><MARQUEE DIRECTION=right><MARQUEE DIRECTION=left> 제목만 글씨태그 </marquee></marquee></font></font></span></td></table>

제목만 글씨태그

<div style="width:320; height:50; font-size:25pt; filter:shadow(color=#9966ff,direction=45)"> 제목용글씨 </div>

제목용글씨

<span style=color=plum;filter:shadow;height:10px> <font size=5 face=굴림 color="#0099FF"><h1> 진파랑 테두리네 </h1></font></span>

진파랑 테두리네

<span style=color:white;filter:glow(color=0000cc);height:10><b><font size=3> 조용히 앉아서 낙서하세요 </font></b></span>

조용히 앉아서 낙서하세요

<span style=color:ffffff;filter:glow(color=ff99ff);height:0px><font face=굴림체 size=5> 분홍색이구나 </font></span>

분홍색이구나

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=blue,direction=135)"> 파랑색 그림자글씨 </span>

파랑색 그림자글씨

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=red,direction=135)"> 에혀..그만하졍 </span>

에혀..그만하졍

<div style="width:320; height:50; font-size:25pt; filter:dropshadow(color=#cccccc, offx=10, offy=10, positive=1)">태그마스터1 </div>

태그마스터1

<font style="width:320; height:50; font-size:25pt; filter:dropshadow(color=red, offx=4, offy=4, positive=1)">태그마스터2</font>

태그마스터2

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=1,strength=10)">태그마스터3 </div>

태그마스터3

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=0,strength=10)">태그마스터4 </div>

태그마스터4

<div style="font-family:굴림; font-size:30pt; line-height: 200%;font-weight:bold; width:100%; color:blue; filter:blur(add=1,strength=10,direction=300)">태그마스터5 </div>

태그마스터5

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=0,strength=10,direction=300)">태그마스터6 </div>

태그마스터6

 

<MARQUEE bgcolor=yellow scrollamount=80>호호호</marquee>

호호호

<MARQUEE SCROLLAMOUNT=500>한곳에서만 반짝</marquee>

한곳에서만 반짝

<MARQUEE scrollamount=150>왼쪽</marquee>

왼쪽

<MARQUEE scrollamount=100>오른쪽</marquee>

오른쪽

<marquee behavior=alternate width=700scrollamount=600>좌우반짝반짝!</marquee>

좌우반짝반짝!

<MARQUEE BGCOLOR=YELLOW SCROLLAMOUNT=2>(노란색바탕에서)</MARQUEE>

(노란색바탕에서)

<MARQUEE diretion="wave" behavior=alternate>천천히</marquee>

천천히

<MARQUEE behavior="alternate" width="120">우에서 좌로.숨어서이동</marquee>

우에서 좌로.숨어서이동

<marquee>마퀴의 기본</marquee>

마퀴의 기본

<marquee width=200> <marquee direction=up behavior=alternateheight=25>~껑충~</marquee></marquee>

~껑충~

<marquee bgcolor=red>레드바탕</marquee>

레드바탕

<marquee behavior=alternate width=600> <h2>왕복</h2></marquee>

왕복

<marquee bgcolor=grey width=300 scrollamount=200>왼쪽바탕에서 반짝</marquee>

왼쪽바탕에서반짝

<marquee bgcolor=yellow scrollamount=80>배경. 빠른마퀴</marquee>

배경. 빠른마퀴

<marquee bgcolor=yellow scrollamount=300>좌우 반짝반짝!!!</marquee>

좌우 반짝반짝!!!

<marquee behavior=alternate width=700 scrollamount=600>좌우반짝반짝!</marquee>

좌우반짝반짝!

<marquee width=300 scrollamount=20>작은 마퀴박스</marquee>

작은마퀴박스

<marquee bgcolor=#"00ff00">연두색바탕 마퀴</marquee>

연두색바탕 마퀴

 

출처 : 천년그리움이 흐르는 강

글쓴이 : 즐거움이 원글보기

메모 :