|
게시판에서의 html 태그 사용 요령 (2)
- marquee. table. 음악파일 올리기 태그 전반-
- 2002.3.20 한기호신부 -
◈ <marquee> 에 관해
marquee 는 글자의 움직이는 명령어입니다. marquee 는 넷스케이프에서는 지원이 안되고 익스플러러만 지원이 됩니다.
<marquee> 는 글자를 오른쪽에서 왼쪽으로 움직여라는 명령어입니다. </marquee> 는 명령어를 끝낸다는 말입니다.
<marquee direction="right"> 오른쪽으로 움직여라</marquee>
<marquee direction="up"> 위쪽으로 움직여라</marquee>
<marquee direction="down"> 밑으로 떨어진다</marquee>
<marquee behavior="slide"> 왼쪽으로 오다 멈추어라 </marquee>
marquee의 속도 (marquee의 명령어에 여러가지 속성을 부여할수있습니다.)
1. scrollamount 움직임의 속도를 명령합니다
<marquee scrollamount= "원하는 속도의 수치">
속도의 수치에 값을 넣으면 움직임의 속도가 변합니다.
1 이 가장 느리고 숫자가 올라갈수록 속도가 빨라집니다.
<marquee scrollamount="1"> 천천히 움직여라</marquee>
<marquee scrollamount="2"> 조금더빠르게 </marquee>
<marquee scrollamount="3"> 더욱 빨리 </marquee>
<marquee scrollamount="4"> 더빨리 </marquee>
<marquee scrollamount="5"> 그보다 더 빨리</marquee>
<marquee scrollamount="6"> 그보다 조금 더 빨리</marquee>
<marquee scrollamount="20"> 우와 너무 빨라 </marquee>
<marquee direction="right" scrollamount="1">오른쪽으로 천천히 움직여라
</marquee>
◈ 문단의 정렬에 관해
1. <p align=left>넣고 싶은글.</p> 글의 정열을 왼쪽으로 하라는 것입니다.
2. <p align=right>넣고 싶은글.</p> 글을 오른쪽으로 정열 시킵니다.
3. <p align=center>넣고 싶은글.</p> 글을 중앙에 정열 시킵니다
4. <center>넣고 싶은글.</center> 글을 중앙에 정열 시킵니다 3번과 동일 한 것입니다.
<pre> : 스페이스의 공백인식
<pre>넣을글 </pre>
<pre> 은 사용자 정의 대로 표현되는 것입니다.
<pre> 내에는 <br>나<p>를 사용할 필요가 없지요
<b>넣고 싶은 글</b> : 이건 글자를 진하게 하라는 말입니다.
<i>넣고 싶은 글</i> : 이명령어는 이탤릭채로 표현하라는 말이구요.
<u>넣고 싶은 글</u> : 이건 글밑에 밑줄울 그어라는 말이죠
명령의 마무리는 반드시 명령의 역순으로 하세요.
<a명령><b명령><c명령><d명령> 본문 넣으시고 </d명령></c명령></b명령></a명령>
◈ 테이블 사용요령
<table> : 문서에 도표를 그려 넣을 때 사용합니다. cell의 가로칸을 만드는게 <td>이고 세로줄을 막는게 <tr>입니다. <tr> : Table Row, <td> :Table Data
간단한 테이블 지정 태그의 예
|
<table border=2>
<tr><td>테이블1</td></tr>
</table>
|
결과보기
이렇게 작은 도표(테이블1)가 하나 생겼어요
|
이번엔 그럼.. 가로 세칸, 세로 두줄의 테이블을 만들어 보겠습니다.(가로 세칸 세로 두줄)
<table border=2>
<tr><td>1-1</td>
<td>1-2</td><td>1-3</td>
</tr>
<tr><td>2-1</td>
<td>2-2</td><td>2-3</td>
</tr>
</table>
|
결과보기
|
여기에서 볼 수 있듯이, 테이블의 시작과 끝은 <table>과 </table>로 표시되고 있습니다. 그리고, 각 가로줄(=행)은 <tr>과 </tr>로 구분되고 있고, (각 세로칸(=열)은 <td>과 </td>로 구분됩니다. 그리고, 이 사이에 내용이 들어가게 됩니다. 이제 좀 더 발전해서, 칸을 합치고 싶으면 어떻게? 우선 윗줄의 세칸을 모두 합쳐 봅시다
|
<table border=2>
<tr><td colspan=3>1-1 </td> </tr>
<tr><td>2-1</td>
<td>2-2</td><td>2-3</td>
</tr>
</table>
|
결과보기
|
윗줄이 모두 한 칸으로 바뀐 것을 볼 수 있습니다. 눈치가 빠른 분은 어떻게 합치는 지 벌써 아실지도 모르겠네요.. 가로 방향으로 2칸 합치기 위해서는 td 태그 안에, colspan=2 라고 써 줍니다. 만일 5칸을 합치고 싶다면, colspan=5 라고 쓰면 되겠지요.. 그리고, 주의사항.. 원래 윗줄은 세 칸이고, 그래서, 윗줄엔 td 태그가 세개 있었습니다. 하지만, 맨 첫 칸에서 세 칸 합치는 명령을 내렸으니까, 뒤에 있던, 두개의 td 태그는 지워야 합니다. 자 그럼.. 머리가 좀 복잡하시겠지만, 마지막으로 한번만 더 해보겠습니다. 이번에는 좀 더 어려운 것.. 3x2의 테이블에서, 1-1 칸과 2-1 칸을 합치고, 1-2칸과 1-3칸을 합쳐보겠습니다.
<table border=2>
<tr>
<td rowspan=2> 1-1 & 2-1 </td>
<td colspan=2> 1-2 & 1-3</td>
</tr>
<tr>
<td> 2-2 </td>
<td> 2-3 </td>
</tr>
</table>
|
결과보기
|
1-1 & 2-1
|
1-2 & 1-3
|
|
2-2
|
2-3
|
|
여기서 보셨듯이, td 태그 같은 것은 줄을 바꾸어 써도 전혀 상관이 없습니다. 가로 방향으로 합칠때는 colspan를 썼고, 세로 방향으로 합칠때는 rowspan을 사용합니다. 아래아 한글을 써보신 분은 알겠지만 한글에서 표그리기의 셀 나누기 셀 합치기 칸 나누기 칸 합치기와와 같은 효과를 내는 것입니다. 그럼 메일 보낼때나 아름 다운 글 올리기위한 테이블의 속성을 알아보겠읍니다
1. border=원하는수 (가장자리)
테이블의 테두리 선 굵기를 1 에서20 픽셀로 지정(원하는 만큼 적으면 됩니다). 이 값을 0으로 놓으면, 테이블 테두리가 사라지죠.
2. width=넓이(가로 길이)
테이블의 전체 폭을 픽셀로 지정합니다보통300에서800까지가 적당). 여기서 width=60%와 같은 식으로 주면, 전체 창 크기의 60%로 테이블의 크기를 정하게 되지요.
3. height=200높이(세로 길이)
테이블의 전체 높이를 지정한다. 사용법은 폭 정하는 법과 같습니다.
4. cellspacing=띄우고 싶은 만큼 의 수를 넣음
칸과 칸 사이의 간격을 픽셀로 지정(5에서 50 사이가 적당).
5. cellpadding=띄우고 싶은 만큼 의 수를 넣음
"칸의 테두리"와 "그 안에 쓰여지는 내용" 사이의 간격을 지정.
6. bordercolor=원하는 색 이름(테두리 색깔 )
테두리의 색상을 지정.
7. bgcolor=원하는색이름
내용이 들어가는 부분의 배경색을 지정.
8. font size= 글꼴의 크기
9. font color=글꼴의 색깔
10. span style = color : 글안에 원하는 색깔 번호 쓰는곳
11. filter glow color = 글 테두리 원하는 색깔 번호 넣는곳
12. color=ffffff 중에서 ffffff부분은 색깔의 정해진 색상기호입니다.
모든 속성에 숫자는 원하시는데로 바꾸어 넣어서 실험해보세요. 그럼 예를 하나 봅시다.
<table bgcolor=yellow width=400 height=300 border=20 cellspacing=10 cellpadding=5> <tr><td>넣고 싶은글.marquee와 font를 지금까지 배운데로 넣으면 됩니다.</td></tr></table>
|
넣고 싶은글.marquee와 font를 지금까지 배운데로 넣으면 됩니다
|
◀게시판에서의 음악파일 올리는 요령▶
오늘은 배경 음악과 동영상 올리는법에 대하여 알아 보겠습니다.
◈ 멀티미디어
멀티미디어는 여러 매체가 혼합된 형태의 커뮤니케이션입니다. 우리에게 멀티미디어 개념을 갖게 해준 것은 CD-ROM의 출현부터라고 합니다. 1980년 중반부터 CD-ROM과 CD-ROM타이틀의 발전과 함께 멀티미디어도 폭넓게 성장하였다. 예전의 멀티미디어란 홈페이지에 사운드나 동영상을 넣는 것이 전부였지만, 지금은 많은 플러그인 형태의 멀티미디어가 소개되고 있습니다. 우선 음악의 종류가 어떤것이 있는지 알아 보겠습니다.
음악파일
① .mid, .midi (미디파일)
mid 는Musical Instrument Digital Interface로 mid파일 포맷은 국제 미디 제조업 협회(International MIDI Manufacturers Association)에서 개발하였고, 음악 표기를 전자적으로 교환 가능하게 하는 프로토콜입니다. 샘플 크기는 없으며, 음질은 각 사용자의 컴퓨터내에 부착된 사운드 카드성능에 크게 의존합니다. 단점은 가사를 들을 수 없다는 것이고, 미디 제작에 있어서 악기 및 편곡에 따라 음악의 맛이 차이가 많다고 볼 수 있습니다.
② .ra, .ram 파일
리얼플레이어(realplayer)를 이용해서 음악을 듣는 파일입니다. 리얼플레이어 없이는 재생이 되질않습니다. 음악을 불러오면 컴퓨터에 설치되어 있는 리얼플레이어가 작동되면서 음악이 나오게 됩니다. ra, ram 파일은 mid 파일과는 달리 가수의 목소리를 직접 들을 수 있고 용량도 mp3 파일보다 적습니다.(약 1/4 수준) 하지만 음질이 상당히 떨어지고 전용선 사용자들에게는 전혀 무리가 가지 않는 대신 모뎀사용자들은 어느정도 무리가 있습니다.
③ .wav 파일
윈도우에서 소리를 녹음하고 듣는데 기본적으로 사용하는 포맷입니다. 웨이브 채널을 사용하며, 윈도우 의 매체재생기와 연결되어 있습니다. 녹음할 음질에 따라 용량이 다르지만 CD 수준의 음질로 녹음할 경우 1분에 10MB 정도의 용량을 차지합니다. 음질은 가장 좋지만 파일이 워낙에 커서 웹에서 사용하기에는 좀 그렇습니다.
④ .aiff 파일
aiff(Audio Interchange File Format)는 매킨토시용으로 개발된 사운드포맷. 샘플 크기는 일반적으로 16bit 이지만, 32bit 까지 사용 가능합니다. 음질은 아주 좋습니다.
⑤ .au파일
가장 일반적인 파일맷입니다. SUN와 NeXT가 사용하는 파일포맷입니다. 샘플 크기는 8bit 입니다. 음질은 좋은 편입니다.
⑥ .snd파일
매킨토시 사운드 파일입니다. 성능면에서 .au 사운드 파일 포맷과 거의 같습니다. 샘플 크기는 8bit 입니다. 음질은 좋은 편입니다.
⑦ .asf, .asx파일 : .asf 또는 .asx : 이건 요즘 실시간 감상용으로 제일 많이 이용하는 것입니다. 윈미디어플레이어가 필요한 파일입니다. 우선 asf 와 asx 의 차이점에 대해서 설명하겠습니다. asf 는 동영상, 또는 음성 파일입니다. 즉, mpg, mp3, wav, rm 등과 같이 직접 영상이나 음성이 들어 있는 파일입니다. asf 와 가장 비슷한 형태는 rm 입니다. 인터넷상에서 스트리밍으로 데이터를 전송할 수 있는 형태이니까요.. 즉 다시 말하면 asf 는 이 파일 하나만으로도 영상이나, 음성을 볼 수 있습니다. asx 는 텍스트 파일입니다. 메모장에서 asx 파일을 열어 보실 수 도 있습니다. 동영상, 음성 파일이 아닙니다. asx 는 asf 의 위치, 주소, 기타 정보를 저장하고 있는 파일입니다. 실제 메모장에서 열어보면. asf 파일의 url 이나 하드상의 위치가 나와 있습니다. asx 파일은 혼자서는 존재의 의미가 없으며... asf 파일이 있어야만 합니다. 어떤 asf 파일이 있고, 그 파일의 위치를 나타내주는 것이 바로 asx 파일인 것입니다. windows media player 가 asx 파일을 읽어들여서 위치를 파악한 다음 그 위치의 asf 파일을 실행하는 것입니다.
⑧ mp3 / mp2
앞서 설명한 웨이브 파일은 음질을 높이면 파일 크기가 너무 커진다는 큰 단점이 있습니다. 예를 들어 4분짜리 노래를 CD에서 녹음할 경우 웨이브는 40MB 이상을 차지하게 되죠. mp3와 mp2는 동영상 규격인 MPEG에서 사운드 부분만을 구현한 것으로, 뛰어난 압축률을 자랑합니다. 특히 요즘 인기를 끌고 있는 mp3의 경우 웨이브의 11분의 1의 용량만으로 같은 음질의 소리를 구현할 수 있어, CD음악을 녹음하는데 많이 사용하고 있습니다.저작권 관련하여 배포가 자유롭지 않습니다.
◈ 음악 사이트 올리는 요령
1. 우선 음악을 인터넷에서 찾아 봅니다.
검색에 asx 나 asf 또는 mid를 넣으면 수많은 음악 사이트가 나옵니다
2. 컴에 윈 미디어가 있어야해요. 윈미디어 이외의것은 등록정보 보기가 어렵습니다.
없으신 분은 윈미디어 홈에 가서 다운 받으세요 무료입니다.
3. 음악의 명령어는 대체로 세가지를 많이 사용합니다
① <embed src="음악주소">
② <bgsound src="음악주소">
③ <OBJECT WIDTH=수치 HEIGHT=수치
CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.
cab#Version=6,4,05,0809" Standby=
"Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" VIEWASTEXT>
<PARAM NAME="FileName" VALUE="음악 주소"></OBJECT>
여기서 embed 는 넷스케이프용 태그이고 bgsound 는 익스플로러용 태그 입니다. 예를 보면서 설명 하겠습니다. 음악 사이트나 음악을 올려놓은 게시판에 보면 아래와 같은 미디어 플레이어가 음악을 재생하고 있는것을 볼수 있을 것입니다. 이 음악은 kbs의 음악입니다.
지금 이 미디어 플레이어에 오른쪽 마우스를 클릭해보세요.
위의 그림과 같이 메뉴가 나타 나죠? 여기서 등록정보를 클릭하세요. 그럼 아래 그림과 같은 등록정보가 나옵니다.
위의 그림중 1번 http://musicstudio.kbs.co.kr 가 음악주소 이고
2번 asx.php?dir=gayo&code=g000202&title=아모르%20-%20김수희.asx 가 곡명 입니다. 1번 뒤에 /를 한다음 2번을 붙여주고 embed 또는 bgsound 를 사용하여 게시판에 올리면 음악이 나옵니다. 완성된 소스는 이렇게 되겠죠.
<embed src="http://musicstudio.kbs.co.kr/asx.php?dir=gayo&code=
g000202&title=아모르%20-%20김수희.asx" loop="1" width=280 height=45>
◈ 음악 명령어의 속성 에 대하여 알아보겠습니다.
1. autostart="true" 문서가 뜨는 동시에 음악이 연주되라는 명령어
2. hidden="true" 는 뮤직박스를 숨기라는 명령어
3. hidden="false" 는 뮤직박스를 나타내라는 명령어
(사실 이명령어는 뮤직박스를 숨길때만 필요하죠 넣지 안아도 기본적으로 보이도록
되어있습니다)
4. loop="infinite" 는 음악을 무한히 계속 반복하라는 명령어
loop="1" 이면 음악이 한곡만 나오고 멈추지요
loop="2" 면 당연히 두번 연주 되겠죠
loop="-1" 이렇게 해도 음악을 무한 반복 합니다
5. volume=" 원하는 수" 를 넣으면 음악의 볼륨을 조절할수 있습니다
volume="30"정도면 아주 적게 들리고
volume="70"이면 보통
6. width="수치" 미디어 플레이어의 가로 크기를 지정 합니다.
7. height="수치" 미디어 플레이어의 세로 크기를 지정 합니다.
8. PLUGINSPAGE="URL" : 플러그인이 설치되어 있지 않은 사용자를 위하여 해당 플러그 인을 제공하는 사이트의 주소를 적습니다.
9. <NOEMBED> </NOEMBED> 사용자의 브라우저가 플러그인이 설치되어 있지 않은 경 우나 이를 지원하지 못하는 브라우저를 사용하고 있는 경우에 <IMG>의 ALT와 같은 역 할을 합니다. 사용 방법은 <NOEMBED> 넣고 싶은 내용 </NOEMBED> 를 <EMBED> 와 </EMBED> 사이에 넣어 주시면 됩니다.
<embed src="http://musicstudio.kbs.co.kr/asx.php?dir=gayo&code=g000202&title=
아모르%20-%20김수희.asx" autostart="false" hidden="false" volume="70" loop="1"
width=280 height=45 PLUGINSPAGE="HTTP://quicktime.apple.com/qt/sw/sw.html">
<NOEMBED> 음악이 들리시지 않으면 미디어 플레이어를 설치 하세요.</NOEMBED>
</embed>
◈ 매체 재생기 띄우는 요령
☆ 글 열자마자 저절로 음악이 나오게 하려면,,
<embed src="음악 주소" hidden=true autostart=true> 이렇게 쓰시면, 글을 열자마자 음악이 자동으루 나옵니다
☆ 컨트롤박스가 표시되게 하려면
<embed src="음악 주소" hiddent=false width=150 height=40>
이렇게 쓰시면, 듣는 사람이 재생 정지 버튼 누를 수 있게 컨트롤박스가 표시됩니다. width=150 height=40 은, 컨트롤박스의 가로 세로 크기입니다. 숫자는 바꿀 수 있구요.
☆ 링크를 걸려면
<a href="음악 주소">음악 제목(/a) 이렇게 쓰시면 됩니다. 그러면 게시판에는 음악 제목이라는 글자만 보이고 그걸 클릭하면 음악이 나옵니다.
☆ 주의
음악 주소 앞뒤 따옴표 꼭 하세요. 그리고 음악 올릴 때 글쓰기 내용을 html 로 선택....
html 로 선택하라는 건,, 글쓰기 할 때랑 똑 같이 태그를 사용할때는 html로 올려야 하지요 ra 나 ram 파일은 (음악 주소 끝자리가 ra 나 ram 으로 끝남) embed 태그 쓰지 마시구 링크를 거세요
위의 음악은 autostart="false" 로 했기에 플레이 버턴을 눌러야 음악이 나옵니다. 자동으로 음악이 나오게 할려면 autostart="true"로 해주시고 미디어 플레이어가 안보이게 할려면 hidden="true" 로 수정하세요. bgsound 를 사용 하여도 됩니다.
<bgsound src="http://musicstudio.kbs.co.kr/asx.php?dir=gayo&code=g000202&title=아모르%20-%20김수희.asx">
◈ 링크된 음악 올리기
이런 경우도 있죠. 미디어 플레이어를 사용하지 않고 음악을 링크만 시켜 놓은것도 있어요.
아래 amor 음악 듣기 를 클릭해보세요. 위의 음악을 종료한후에 클릭하세요.
amor음악듣기
위의 그림과 같이 미디어 플레이어가 나오면서 음악이 재생 됩니다. 여기서 파일의 등록 정보를 클릭 하세요.
등록정보가 나오지요?
이 등록 정보에서 붉은 원이 음악 주소 입니다.마우스로 드래그 하여 복사 한후 embed 나
bgsound 에 넣어 주시면 됩니다.위의 소스와 동일 합니다.
<embed src="http://musicstudio.kbs.co.kr/asx.php?dir=gayo&code=g000202&title=
아모르%20-%20김수희.asx" autostart="false" hidden="false" volume="70" loop="1"
width=280 height=45 PLUGINSPAGE="HTTP://quicktime.apple.com/qt/sw/sw.html">
<NOEMBED> 음악이 들리시지 않으면 미디어 플레이어를 설치 하세요.</NOEMBED>
</embed>
bgsound 를 사용 하여도 됩니다.
<bgsound src="http://musicstudio.kbs.co.kr/asx.php?dir=gayo&code=g000202&title=
아모르%20-%20김수희.asx">
참고 사이트 http://www.letsmusic.co.kr/
이 사이트가 위의 방법으로 음악이 나옵니다.
letsmusic에서는 마지막에 .asx를 넣어주셔야 합니다.
◈ ra 음악 : 리얼 플레이어 음악 올리기
확장자가 ra 나 ram 으로 끝나는 음악은 리얼 플레이어로 재생되는것 입니다. 이것은 미디어 플레이어 소스와는 조금 다르죠. embed 내에 type="audio/x-pn-realaudio-plugin" 을 넣어 주어야 합니다.
<embed
src="리얼오디오파일주소" type="audio/x-pn-realaudio-plugin" width="수치" height="수치" controls="제어판옵션">
여기서 한가지 눈여겨 볼것이 제어판 옵션 입니다. 제어판 옵션에 대해서 몇가지 알아보고 넘어 가겠습니다. controls="제어판옵션" 을 넣어 주고 width 와 height는 지정된 값을 넣어 줘야 합니다.
예1 controls="controlpanel,statusbar" width="275" height="60"
<embed
src="음악주소.rm" width="275" height="60" border="0" type="audio/x-pn-realaudio-plugin" controls="controlpanel,statusbar">
결과보기
예2 controls="stopbutton" width="35" height="25"
<embed
src="음악주소.rm" width="35" height="25" border="0" type="audio/x-pn-realaudio-plugin" controls="stopbutton">
결과보기
예3 controls="playbutton" width="275" height="60"
<embed
src="음악주소.rm" width="35" height="25" border="0" type="audio/x-pn-realaudio-plugin" controls="playbutton">
결과보기
예4 controls="controlpanel" width="275" height="40"
<embed
src="음악주소.rm" width="275" height="40" border="0" type="audio/x-pn-realaudio-plugin" controls="controlpanel">
결과보기
예5 controls="controlpanel,infovolumepanel" width="275" height="60"
<embed
src="음악주소.rm" width="275" height="105" border="0" type="audio/x-pn-realaudio-plugin" controls="controlpanel,infovolumepanel">
결과보기
◈ 동영상 올리기
asf, asx, AVI,MPEG,등등 윈도우 미디어 플레이어로 재생되는 동영상은 위에 설명한 embed 를 사용하여 넣어주면 됩니다.
<embed src="동영상주소.asf" autostart="false" hidden="false" volume="70" loop="1"
width=수치 height=수치 PLUGINSPAGE="HTTP://quicktime.apple.com/qt/sw/sw.html">
<NOEMBED> 동영상이 보이지 않으면 미디어 플레이어를 설치 하세요.</NOEMBED>
</embed>
확장자가 ra, ram 인 동영상은 위에 설명한 리얼 플레이어의 소스를 넣어 주시면 됩니다.
<embed src="동영상주소.rm" type="audio/x-pn-realaudio-plugin" controls="all">
근간 음악 사이트 대부분이 음악을 마음대로 가져가지 못하도록 소스를 막아 놓아 위의 방법이 안되는곳도 많을 것입니다.
홈친구 여러분! HTML 태그를 익히기 까지는 힘이 들지만 한번 익혀 놓으면 예쁜 보기좋은 이미지 파일과 듣기 좋은 음악 그리고 멋진 내용의 글을 스크롤 업되게 해서 올려 놓을 수 있어 얼마나 좋겠습니까?
게시판에서의 HTML 사용요령 1. 2편을 오랜 시간을 바쳐 올려놓습니다. HTML 태그 전반을 다루어 놓은 내용들이 태그에 눈이 조금씩 떠지기 시작하는 분들에게는 큰 도움이 될 것입니다. 글을 올리는 일은 정말 태그 익히는 것보다 더 힘든 일이었습니다. 올리지 않아도 되는 걸 올려놓았으니 아마 어느 누군가에게는 큰 도움이 될 것입니다. 관심있는 분들에게 작은 도움이 되길 빕니다.
|
