<a href="https://dskang100.tistory.com/" title="月靜 강대실 시인의 블로그" class="link_logo"> 月靜 강대실 시인의 블로그

앞에서 기본적인 원리에 대해서 간단하게 설명을 했지만 여기서 다시 설명을 하고자 한다. 그만큼 기본을 알아야 나중에 홈페이지 제작에 있어서나 대화방에서 실수를 범하지 않기 때문이다.
태그에 기본적인 모양은 <태그명령어>하고픈 말</태그명령어> 이다. 단순히 <태그명령어> 만 있는 태그도 있으나 대부분의 태그는 <>내용</> 형식을 갖는다. 간단한 예를 들어보자^^

태그입력	출력
<marquee>태그매니아</marquee>	태그매니아
<b>태그매니아</b>	태그매니아
<center>태그매니아</center>	태그매니아
<font color="red">태그매니아</font>	태그매니아
<a href="http://my.netian.com/~witch224">태그매니아</a>	태그매니아

위에서 보시다시피 먼저 태그는 <태그명령어>내용</태그명령어> ☜이처럼 이루어지는 걸 볼 수 있다. 세 번째 예를 보면 ☜이 부분에서 font 라는 태그에 color="red" 라는 것이 붙는데 이걸 태그에 속성이라고 한다. 단순히 태그명령어로 만으로는 효과적으로 표현할 수 없기 때문에 주로 사용되는 태그명령어에는 예외 없이 이러한 속성을 갖는다. 네 번째 예에서 <a href="...."> 역시 href 라는 속성을 갖는다. 그리고 이러한 태그 역시 예외 없이 , <a></a> 로서 끝맺음이 되는 것을 알 수 있다. 만약 태그 끝에 </태그명령어> 를 붙여주지 않는다면 어떻게 될까? 가장 초보들이 잘 범하는 실수 중 하나인데 먼저 전제된 태그의 효과가 그 전제된 시점부터 웹 페이지의 마지막 부분까지 미치게 된다. 대화방의 경우는 font 태그는 상관없는데 그 외의 태그 같은 경우에는 대화방에서 당신이 나갈때까지 그 효과가 지속된다. 그러므로 대화방에 상당한 혼란을 줄게 된다. 그와 동시에 심하면 방장으로부터 강제퇴장을 당하는 사태도 벌어질 수도 있다.^^ 그러니 끝맺음을 꼭 해주자.....
 그런데 이러한 태그에 기본원리를 무시하는 태그가 일부 있다. meta, hr, img, bgsound, embed 등의 태그는 혼자 단독으로 사용되는 태그들이다. 물론 속성이 없다는 이야기가 아니다. </태그명령어>가 필요 없다는 이야기이다.
 자~~!! 이제 태그에 기본원리는 배웠다. 이제부턴 태그에 대해서 본격적으로 배워보자^^ 본격적인 건 필자의 홈페이지에서 분야별로 나누어서 태그에 대해 설명해 놓고 있다. 거길 이용하자^^
그런데 여기서 중요한 점이 하나 있다. 단계별 강좌를 보면서 꼭 기억하고 있어야 할 사항이 몇 가지 있다. 첫째...눈으로 보지만 말 구 직접 태그연습장을 가지고 실제로 해보자.....눈으로 봐서는 이해가 안되지만 직접 해봄으로써 이해될 수 있는 것들이 많다. 둘째.... 모르면 물어보자....태그매니아 홈페이지 내에 있는 질문과 답변 게시판을 이용해라....이용하기 전에 자주 묻는 질문과 답변에서 반드시 자기가 찾고 있는 답이 있는지 확인해보고 없으면 질문하자.... 셋째.....태그매니아 홈페이지는 태그에 모든 것이 다 수록되있지 않다. 될 수 있는 대로 더 많은 정보를 제공할려고 노력은 하고 있으나 부족한 점이 아직도 많이 있다. 그러니 웹뿐만 아니라 책이나 학원에서 공부를 하자.....현실적으로 웹쪽으로 길을 가자고 하는 사람은 학원을 다니는 게 좋을 것이다. 그렇지 않고 취미 삼아 배우는 사람은 태그나 홈페이지 제작에 대한 다양한 책들을 찾아보고 배우길 바란다.

홈페이지 태그

홈페이지는 태그(tag)명령어로 만들어 집니다. 태그명령어는 어찌보면 많다고 할 수도 있겠으나 다 외울 필요는 없습니다. (다 외우면 좋겠죠^^) 단지, 이런걸 만들 땐 이런 명령어를 쓰는 구나 하면서 한번 쭉 읽어보시고 기본적이고 자주 쓰이는 몇가지 명령어만 알고 있으시면 됩니다. 그리고 나머지것은 그때 가서 찾아서 쓰셔도 됩니다. 그러다 보면 어느 순간에 자신도 모르게 태그명령어를 다 알게 되죠^^ 그럼 여기에서는 전체적으로 태그명령어와 간단한 설명을 해보겠습니다. 그냥 한번 가볍게 본다는 기분으로 읽어보세요^^
※ 문서 지정 태그


<html></html>	문서의 맨처음과 맨끝에 들어감	<body></body>	문서의 본문내용이 들어감
<head></head>	HTML문서의 큰 제목 부분을 정함	text="글자색"	글자색을 지정
<title></title>	웹페이지의 제목을 지정	link, vlink, alink	링크, 방문한 링크, 클릭시 색을 지정
예제) <HTML> <HEAD> <TITLE>대화방 태그</TITLE> </HEAD> <BODY BGCOLOR="배경색을 지정"> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> 본문내용 : 대화방 태그 홈페이지 시작. </BODY> </HTML>

※ 서식 관련

내용

본문에서 단락을 구분.

내용

이태릭체로

단락구분.마지막 줄 안 띄어줌

내용

밑줄

내용

줄 바꿈

깜박이게

본문의 중앙에 오게 배치

인용이나 참조로 표시할때

수평선

컴퓨터프로그램 코드모양변환

스페이스의 공백 인식

강조, 이태릭체

<H1~6>문서 제목</H1~6>

글짜 크기를 1~6까지 사용

키보드로입력한것과 같은모양

기본 글꼴보다 한 단계 크게

예제로 표시할때

내용

BIG의 내용과 반대되는 표현

글자를 굵게

메일주소,연락처등을 기록

아래 첨자로 보여줍니다.

내용

지정된 내용을 굵게

주석

타자기로 친 것처럼 보여줌

위 첨자로

<HR SIZE=n WIDTH=n ALIGN=LEFT,CENTER,RIGHT></HR>	수평선의 두께,넓이,문단에서 왼쪽,중앙,오른쪽을 지정
<FONT SIZE=n COLOR=영어,기호 FACE=글꼴체>내용</FONT>	글자를 크기,색상,글꼴을 지정
<BLOCKQUOTE>내용</BLOCKQUOTE>	인용문 등을 사용
<P ALIGN=LEFT,CENTER,RIGHT>내용</P>	문단내용 정렬

※ 목록정의

<UL></UL>	순서가 필요없는 목록을 적을때
<OL></OL>	순서가 필요한 목록을 적을때
<LI></LI>	UL,OL태그사용시 목록을 적을때

<DL></DL>	용어정의 목록을 시작하는 곳에 쓴다.
<DT>	용어의 이름을 쓴다.
<DD>	용어의 대한 설명을 쓴다

다음 페이지에서 이어 계속 설명드리져...^^ 팔로우 미!!!

이전 페이지로

※ 그림 관련 태그


<IMG>	그림을 삽입하기 위한 태그
<IMG SRC="파일명" BORDER=n>	그림을 나타나게함.테두리선은 n값
<IMG SRC="파일명" BORDER=0 WIDTH=n HEIGHT=n>	그림의 넓이와 높이를 지정
<IMG SRC="파일명" ALT="그림설명"ALIGN=LEFT,CENTER,RIGHT>	Alt=그림에 대한 설명, ALIGN=그림정렬방식
<IMG SRC="파일명" ALIGN=TOP,MIDDLE,BOTTOM>	그림 다음에 오는 글자를 그림의 상단,중앙,아랫부분에 집어넣을 수 있도록 지정

※ 링크 관련 태그


<A HREF="연결될 파일명">글자,그림</A>	글자,그림을 누르면 연결될 문서로 이동한다
<A HREF="HTTP://링크할 주소">글자,그림</A>	링크된 주소로 이동한다
<A HREF="MAIL TO:자신의 메일 주소">글자,그림</A>	편지함과 연결된다
<A HREF="문서명">글자,그림</A><A NAME="문서명">문서명 문단의 첫부분</A>	같은 문서 내에서의 이동이 가능하게 하는 태그

※ 테이블 관련 태그

<TABLE></TABLE>	표를 나타냄
<TR></TR>	TABLE안에 쓰여 한 행을 만들어 줌
<TD></TD>	TR안에 스여 한 셀을 만들어 줌
<TH></TH>	TABLE안에 셀의 제목을 나타냄
<TABLE BORDER=n CELLSPACING=n>	TABLE의 테두리선 크기,셀과 셀 사이의 간격을 조절

<TABLE CELLPADDING=n BGCOLOR=색상코드>	셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정
<TABLE WIDTH=n HEIGHT=n>	ABLE 넓이와 높이를 지정
<TD COLSPAN=n ROWSPAN=n>	셀을 가로,세로로 합치고 싶을때 사용
<TD ALIGN=LEFT,CENTER,RIGHT VALIGN=TOP,MIDDLE,BOTTOM>	좌우,중앙,상하 정렬

※ 프레임 관련 태그


<FRAMESET></FRAMESET>	한 페이지에 두개 이상의 창을 작성
<FRAMESET COLS="n%,*">	화면에 세로 방향으로 금을 그어 화면을 나누는 방식
<FRAMESET ROWS="n%,*">	화면에 가로 방향으로 금을그어 화면을 나누는 방식
<FRAME SRC="문서.파일명">	프레임에 불러올 HTML문서 링크
<MARGINWIDTH=n>	프레임 창의 가로 여백을 지정
<MARGINHEIGHT=n>	프레임 창의 세로 여백을 지정
<SCROLLING=YES,NO,AUTO>	프레임 차의 스크롤 지정여부,자동여부
<FRAMEBORDER=n>	프레임의 경계선의 크기를 지정
<TARGET=_BLANK,_TOP,파일명>	프레임 창에서 링크된 경우 링크될때 보여주는 창을 지정
<NAME= >	프레임에 고유의 이름을 간단하게 씀

※ 기타 본문 관련


<EMBED SRC="사운드.파일명" AUTOSTART=TRUE LOOP=n>	AUTOSTART를 사용해 홈페이지로 들어오면 백 그라운드 음악이 자동으로 시작하도록 지정할 수 있습니다. 이 태그는 넷스케이프에서만 적용됩니다.
<BGSOUND src="사운드.파일명" LOOP=2>	<EMBED>태그와 비슷하며 익스플로러에서만 적용됩니다.

홈페이지 제작 태그에 대해서 간단하게 모두 알아보았는데요......그냥 이런 것이 있구나 하고 알고만 계시면 됩니다. 다 외우면 좋겠지만.....그러기는 힘들잖아요^^

text 태그

여기에서는 태그를 배우는데 가장 기초인 text 태그에 대해서 배워보도록 하겠습니다. 말 그대로 글자에 어떠한 기능을 하는 태그입니다. 주로 글자의 색깔, 크기, 움직임, 글꼴 등을 나타낼 수 있니다....자~ 그럼 한 가지씩 배워볼까요?^^
※ 글자태그의 기본
글자태그는 기본적으로  입니다. 그런데 ☜이것만 있어서는 아무런 효과를 나타낼 수 없구요....단지 기본적인 뼈대이며...☜이것에 각각의 기능을 나타내는 속성이 붙는 겁니다. 예를 들자면 녹색 이런식 이져^^

※ 글자색 조정 (  )
제일 먼저 글자의 색을 조정하는 방법입니다. 색을 영어로 color 라고 하죠?^^ 모르시는 분들은 없겠져?^^ 그대루 써주시면 됩니다. 단, 태그를 사용하는데 있어서 글꼴을 제외하곤 한글을 쓰지 못합니다. 전부다 영어나 기호를 사용해야 하죠. 그러기 때문에 색명을 적을 때도 영어로 "red" , "green" , "yellow" ☜이런 식으로 적어 주어야 합니다.

태그	변화
<font color="red">이건 빨간색</font>	이건 빨간색
<font color="blue">이건 파랑색</font>	이건 파랑색
<font color="green">이건 녹색</font>	이건 녹색
<font color="#FF0000">이건 빨간색</font>	이건 빨간색
<font color="#FFFF00">이건 노랑색</font>	이건 노랑색

위에 표를 보니 이해가 되시져....^^ 뒤에 두개는 RGB색상코드를 넣은 겁니다. RGB색상코드를 알고 싶은 분은 ☞이곳을 클릭하시면 RGB색상코드표가 있으니 거길 참조하시길 바랍니다.

※ 글자 크기 조정 (  혹은  혹은 <h1>~<h6> )
글자 크기를 조절하는 방법입니다. 컬러와 마찬가지로 크기는 영어로 size 져..^^ 그리고 태그 안에 수치나 숫자가 커질 수록 글자크기가 커집니다.(주의 : <h>의 경우숫자가 작을 수록 커짐) 단, font size의 경우 최대 7까지 밖에 크게 할 수 없구요...h의 경우도 최대 h1까지가 한도이죠. 예제를 한번 볼까요?^^

태 그	변 화
<font size="5">글씨 크져^^</font>	글씨 크져^^
<h1>이건 더 크져^^</h1>	이건 더 크져^^
<font style = font-size:40pt>이건 더욱 크져</font>	이건 더욱 크져

아시겠져^^ 마지막에 가장 큰 글씨는 스타일 이용한 건데요....이건 수치를 넣은 만큼 크기가 무한대로 커지기 때문에 사용하실 때 조심하시도록.......그리고 앞에 ☜이 부분에 font 대신 다른 태그가 들어갈 수도 있습니다. 다른 태그를 집어 넣으면 해당태그에 속하는 글자의 크기가 지정된 수치만큼 커집니다.^^

※ 글꼴 조정 (  )
이번에는 글꼴 조정하는 방법입니다. 글꼴이 뭔지는 아시져? ^^ 우리가 "돋움체","궁서체","바탕체" 등...뭐 이런 글자의 모양을 말하는 거죠^^ 이러한 글꼴도 역시 태그를 이용해서 조정할 수 있습니다.

태 그	변 화
<font face="궁서체">이건 궁서체네용^^</font>	이건 궁서체네용^^
<font face="돋움체">이건 돋움체이구용^^</font>	이건 돋움체이구용^^
<font face="바탕체">이건 바탕체입니다^^</font>	이건 바탕체입니다^^
<font face="Arial">이건 Arial 체입니다.^^</font>	이건 Arial 체입니다.

　자...글자색, 글자크기, 글꼴에 대해서 배워봤는데요...다음 페이지에서는 글자움직임 과 각종 예제에 대해서 알아보도록 하죠^^

앞 페이지에 이어서 계속 text 태그에 대해서 배워보도록 하겠습니다. 글자를 움직이는 태그와 글자태그의 예제에 대해서 알아볼텐데요....... 졸지 말구 잘 보시길....^^

※ 움직이는 글자 ( <marquee> 글자 </marquee> )
여러분들 웹서핑하면서 글자나 이미지가 혼자서 움직이는 걸 보고 처음 보신 분들은 참 신기하다고 생각을 하셨을 텐데요....바로 마퀴태그를 이용한 것입니다....여기서는 marquee 태그의 기본원리만 알아보고 상세한건 ☞춤추는 글자 부분에서 기술하도록 하겠습니다.


<marquee> 이게 마퀴태그의 기본이져^^</marquee>	이게 마퀴태그의 기본이져^^

※ 문장정렬
글자의 정렬 방식을 정해주는 태그입니다.

<DIV ALIGN=right>오른쪽정렬</div>	오른쪽 정렬
<DIV ALIGN=center>가운데 정렬</div>	가운데 정렬
<DIV ALIGN=left>왼쪽 정렬</div>	왼쪽 정렬

※ text 태그 예제

빨간색
 오랜지색
 연한파란색
 핑크
 연한핑크색
 금색
 연한녹색
 투명한논색
 핑크
 빨간색
 연한핑크색
 금색
 오렌지색
 연한녹색
 투명한녹색
 연한파란색

※ 글자태그 틱
① 를 하면 글자가 쓰러집니다.
모든 글자체 앞에 @ ☜골뱅이 마크를 붙이면 글자가 쓰러집니다.
② 글자 를 사용하면 글자 --> 글자 해당 글자가 두꺼워 집니다.
③ 글자 주위에 이렇게 ☞ 색을 넣는 것 은 글자를 사용하면 됩니다.

※ 총정리

총정리

이제 text 태그에 대해서는 다 배웠네용^^ 어때요? 어려운 것은 없죠?^^ text 태그는 쉬울 겁니다. 기억하기도 쉽고...한번 보면 절대 잊을 일은 없을 겁니다. 하지만 쉽다고 우습게 보면 안됩니다. 어떤 일이든지 기초없이는 완성할 수 없듯이 태그도 마찬가지로 기초를 잘 아셔야 만히 나중에 가더라도 쉽게 쉽게 배울 수 있답니다. 그럼 여기까지 봐주신거 감사드리고요.....오늘도 좋은 하루 되시길 바라겠습니다.

기본문법 태그

홈페이지 제작시 자주 사용되는 기본 문법 태그에 대해서 알아보도록 하겠습니다. 주로 문단 태그 , 주석태그 등이 여기에 속한다.
☞  , 
 태그는 한 줄을 바꿔주는 기능을 하는 태그입니다. 강제개행 태그라고도 하죠. 태그는 문단을 나누어 주는 태그입니다.

<html>
<head></head>
<body>
1. 태그의 경우 줄을 바꿔줍니다. 2. 이렇게 바꿔어 주죠. 3. 어때요? ^^
1. 이에 비해 태그는 문단을 나누어 줍니다. 
2. 문단을 나눕시다. ^^
3. 문단이 나누어 집니다.
</body>
</html>

어때요? 간단하죠? ^^

☞ 주석태그
일반적으로 자바스크립트나 스타일 시트에서 많이 사용하는 것인데요....HTML에서도 사용할 수 있습니다. 자바스크립트나 스타일 시트의 경우에는 해당 자바스크립트나 스타일 시트를 브라으저가 읽지 못하는 경우 브라으저에 그 소스가 나타나지 않도록 해주는 기능을 합니다. 물론 주석태그는 브라우저상으로는 표현되지 않습니다. HTML에서는 주석태그를 이용해 설명같은 것을 달아줄때 사용합니다. 우리가 웹페이지를 만들어 놓고 오래되면 잘 기억이 나지 않는 경우가 있습니다. 이럴 경우 미리 설명을 달아놓으면 잊을 염려가 없죠.
주석태그는  ☜이것으로 끝나게 됩니다.

☞ <hr>
<hr> 태그는 선을 그려주는 태그입니다. 사용방법은 <hr width="선길이" size="높이수치" align="정렬위치" noshade> ☜ 이렇게 사용 할 수 있습니다. width="선길이" 의 경우 % 와 px을 사용할 수 있습니다. size 의 경우 선의 높이를 조절해주는 속성이며 align 속성의 값으로는 left , center , right 등이 들어 갈 수 있습니다. noshade 속성은 입체감을 없애 주기 위한 때 넣어주는 속성입니다.

☞ 글꼴 태그 & 첨자 & 밑줄 태그
 ☜ 이 방식을 사용하지 않고 특정 글꼴을 나타내주거나 글자에 특정효과를 나타내어 주는 방법입니다.

이탤릭체	<i></i> , <em></em> , <cite></cite>	보통글자 이탤릭체
굵은 글자	<b></b> , <strong></strong>	보통글자 굵은 글자
윗첨자	<sup></sup>	보통글자^윗첨자
아래첨자	<sub></sub>	보통글자_아래첨자
밑줄 글자	<u></u>	글자 밑에 줄
가운데 밑줄	<s></s>	~~글자가운데 줄~~

사운드 태그

사운드(sound) 태그란 말 그대로 음악이나 소리가 나오게 하는 태그입니다. 요즘은 홈페이지, 카페, 동호회방에 배경음악을 많이들 삽입하고 있는데요....그냥 맹맹한 웹페이지보다 감미로운 선율이 나오는 웹페이지가 더 방문객들에게 기억에 남겼져^^ 사운드 태그는 재생시킬 사운드가 뭐냐에 따라, 브라우져를 뭐를 쓰는냐에 따라 , 방문객을 고려하느냐 안 하느냐, 어느 곳에서 사용하느냐에 따라 나누어 집니다. 그럼 여기서부터 사운드 태그에 대해서 알아보도록 하져^^
먼저 사운드 태그를 배우기 전에 사운드 파일의 종류가 뭐가 있는지 알아보도록 하겠습니다. 최소한 자기가 듣고 있는 음악이 어떠한 파일인지는 알고는 있어야 나중에 자기가 직접 사용할 때 많은 시행착오를 줄일 수 있져^^

※ 재생시킬 사운드파일의 종류

① mid 파일 (미디파일)
우리가 일반적으로 홈페이지에 배경음악으로 가장 많이 사용하는 음악파일이 mid 파일입니다. 여러분들 웹서핑이나 채팅할 때 가수의 목소리는 나오지 않고 멜로디만 나오는 음악을 들어본 적이 있을 겁니다. 그게 바로 mid 파일 음악입니다. mid 파일은 파일용량이 적은 대신 음질이 상대방의 컴퓨터의 사운드 카드의 성능에 따라 달라집니다.

☜여기에 있는 음악을 실행시켜보세요. ▶ 을 클릭하시면 mid 음악이 나오게 됩니다. 소리가 작게 나올 수도 있으니 여러분들의 컴퓨터의 볼륨을 약간 높혀 주세요

mid 파일의 최대의 장점은 방문객들에게 무리를 주지 않는 적은 용량으로도 멋진 음악을 들려 줄 수 있다는 거죠. 하지만 위에서도 언급했다시피 각각의 방문객들의 컴퓨터의 사운드카드에 따라 음질이 좌우되기 때문에 사운드카드를 좋은 걸 쓰시는 분들한테는 원래의 음질을 들려줄 수 있으나 그렇지 못한 분들에게는 조금 떨어지는 음질이 들려지게 되는거죠.

② ra, ram 파일
이건 리얼플레이어(realplayer)를 이용해서 음악을 듣는 파일입니다. 쉽게 말해서 리얼플레이어 없이는 재생이 되질 않습니다. 예전에 채팅방에서 많이 쓰였던 건데요....음악을 불러오면 여러분들의 컴퓨터에 설치되어 있는 리얼플레이어가 작동되면서 음악이 나오게 됩니다. ra, ram 파일은 mid 파일과는 달리 가수의 목소리를 직접 들을 수 있고 용량도 mp3 파일보다 적답니다.(약 1/4 수준) 하지만 음질이 상당히 떨어지고 전용선 사용자들에게는 전혀 무리가 가지 않는 대신 모뎀사용자들은 어느정도 무리가 가기 때문에 배경음악으로는 잘 사용되지 않습니다. 혹시 리얼플레이어가 자기 컴에 설치되있지 않으신 분들은 http://www.freepia.co.kr 로 가면 공개소프트웨어를 찾아보면 무료로 다운 받을 수 있습니다.

③ wav 파일
웨이브 파일의 경우 음질은 좋은 대신 파일의 용량이 크기 때문에 홈페이지에서는 그렇게 많이 사용되질 않습니다. 간단하게 자신의 목소리나 인사말을 녹음시켜 홈페이지에 삽입시킬때 많이 사용되죠^^

☜여기를 실행시켜보세요. 간단한 실로폰 소리가 나올텐데요.....웨이브의 경우 파일의 용량이 적은 것을 홈페이지에서 사용하져...노래를 웹상에서 직접 듣는 것은 용량이 크기 때문에 힘들어요.

④ 기타
기타 mp3 파일, au 파일, aiff 파일 등이 있는데 이것들은 홈페이지나 채팅방 등에서는 거의 사용되지 않습니다. 나중에 인터넷 사용자들 전부가 전용선을 사용한다면은 많이 사용하겠져^^

음악 파일에 대해선 이 정도만 알아두셔도 충분합니다. 다음 페이지부터는 본격적으로 사운트 태그에 대해서 알아보도록 하겠습니다. ^^ 다음 페이지로 가시져^^

여기서부터는 본격적으로 사운드 태그에 대해서 알아보도록 하겠습니다. 사운드 태그는 간단합니다. 딱 ...3가지 명령어만 알고 있으면 홈페이지에 배경음악을 넣거나 채팅방에서 음악을 나오게 하는 것은 걱정하실 필요가 없습니다. 자..그럼 구체적으로 살펴볼까요?^^


<bgsound src="음악주소">	주로 홈페이지의 배경음악을 넣는 데 사용하는 태그입니다. mid 파일을 주로 사용하고요...wav파일이나 mp3 파일도 되긴 되는데 bgsound 태그는 일단 음악파일을 다 다운로드 받은 다음 재생을 시키기 때문에 mp3 나 wav는 시간이 오래 걸린답니다.
<embed src="음악주소">	bgsound 태그가 익스플러워 전용으로 만들어 진거라면 embed 태그는 네스케이프에서 음악을 재생시킬 수 있도록 만들어진 태그입니다. 그런데 요즘은 익스플러워와 네스케이프 양쪽 다 잘 된답니다. embed 태그는 배경음악보다는 직접 음악을 재생시키는 때 많이 사용됩니다. 주로 채팅방이 되겠죠^^ embed 태그의 특징은 bgsound 태그와는 달리 파일을 다 다운받은 받은 다음에 재생하는 것이 아니라 다운로드와 동시에 실시간으로 재생시켜주죠...^^ 또한 여러가지 속성이 따라 붙는데요...속성에 대해선 밑에서 설명드리져^^
<a href="리얼 음악주소" target-"new">아무 글자</a>	보시다시피 ra, ram 파일을 불러올때 사용되는 태그입니다. <a> 태그는 사운드 태그라기보다도 링크태그인데...ra, ram 파일을 링크시키고 밑줄이 쳐진 글자를 클릭하면 리얼플레이어가 실행되면서 음악이 나오게 됩니다. 주로 채팅방에서 많이 사용됩니다.
<object src="음악주소">	object 태그는 거의 사용하는 사람들이 별루 없는데요...이것은 embed와 기능은 같은데 새로운 자바창(?)이 뜨면서 거기에 음악상태바나 동영상이 나타나게 되죠. W3C에서 embed 보다는 object 를 사용할 것을 권고하고 있다네요.

※ 리얼파일 주소 보는 법 ( <a href="리얼음악주소" target="new">하고픈 말</a> )
http://www.iworld.co.kr 나 기타 비슷한 사이트로 가보시면 리얼음악서비스를 제공하는데요...보통 채팅방에서 사용할 때 이 주소를 보는 방법을 몰라 못 하시는 분들이 많더군요. 해당 사이트에 가서 음악제목들이 적혀 있는 곳이 있을 겁니다. 음악제목을 클릭 하면 리얼플레이어가 실행되면서 음악이 나오게 되져..... ① 마우스를 음악제목에 있는 곳에 갔다 댄다. ② 오른쪽 마우스 버턴을 누른다. 그리고 등록정보를 클릭한다. ③ 그러면 URL(주소) 가 나올 것이다. ④ 주소를 마우스로 블럭 설정을 해서 복사를 한다. ⑤ 복사한 주소를 리얼음악 태그내에 붙여 넣는다. ⑥ 잠시 후 음악이 나온다...

※ embed 태그 속성 ( <embed src="음악주소" autostart=true/false hidden=true/false loop=true/false>
embed 태그는 몇가지 속성이 붙는데요....속성을 잘 알고 계시면 여러분들이 원하는 대로 음악을 조정할 수 있습니다.


autostart=true/false	true의 경우 로딩되자마자 자동실행되고 false의 경우 그 반대죠^^
hidden=true/false	음악조절판이 true의 경우 보이지 않고 반대로 false의 경우 보이게 됩니다.
loop=true/false	true일 경우 계속 반복, false일 경우 한번만 반복이져^^
width=수치 height=수치	음악조절판의 좌우높이 조절을 하는 옵션입니다.

※ embed 태그로 리얼오디어파일 재생하기
우리가 지금까지 리얼오디오파일은 <a href="리얼오디오파일주소">클릭</a> ☜이런 방법으로 재생할 수 있다는 것을 배웠습니다. 그러나 리얼오디오파일은 embed 태그로도 재생 가능합니다. 단, 첫번째 방법과 마찬가지로 당신의 컴에 리얼플레이어가 설치되어 있어야 합니다. 아래 리얼플레이어가 보이죠? 안 보인다면 당신의 컴에 리얼플레이어가 설치있지 않다는 것입니다.


controlpanel,statusbar	controlpanel	playbutton
<embed src="리얼오디오파일주소" type="audio/x-pn-realaudio-plugin" height="수치" height="수치" controls="제어판 옵션">

　위의 방법은 embed 태그에 리얼플레이어 플러그인을 연결시켜준 것입니다. 방법은 위에 보시다시피 type="x-pn-realaudio-plugin" 을 넣으주면 되죠. 그리고 제어판 옵션을 조절해줄 수 있으며 그 옵션마다 올바른 가로세로수치가 있답니다. (꼭 그렇게 안 해줘도 되지만....)

옵 션	수 치
All	width="275" height="125"
stopbutton	width="35" height="25"
playbutton	width="35" height="25"
controlpanel	width="275" height="40"
controlpanel,stautsbar	width="275" height="60"
controlpanel,infovolumepanel	width="275" height="105"

　자...이제 사운드 태그에 대해선 다 배웠습니다.☞ 이곳☜을 클릭하면....... 예전에 채팅방에서 많이 사용?던 사운드 태그들인데 지금은 안되는 것들이 꽤 될 겁니다. 단지 이렇게 쓰였다는 것을 보여주기 위해 적어 넣은 것이니 안되더라도 화내지 마세엽...^^ 그럼 여기서 사운드태그를 마치도록 하겠습니다.

이미지 태그