카페 또는 게시글에 배경사진, 배경음악, 움직이는 글 넣는 방법
1) 배경 이미지 넣는 방법
형식 : <img src="이미지 있는 주소">
옵션으로는 다음과 같은 것이 있다.
border - 이미지의 테두리 두께를 설정. 기본값은 border="0"
width - 이미지의 너비를 설정. 픽셀이나 퍼센트(%)로 설정할수 있다.
height - 이미지의 높이를 설정. 픽셀이나 퍼센트(%)로 설정할수 있다.
hspace - Horizental Space 이며, 이미지의 좌우 여백을 줄수 있다.
vspace - Vertical Space 이며, 이미지의 위, 아래 여백을 줄수 있다.
alt - alt 속성에 이미지에 대한 설명을 지정할수 있으며, alt값을 써주면
마우스 커서가 이미지 위에 위치할 때 지정한 설명이 나타난다.
(예문)
<img src="sky.jpg" border="10" alt="하늘">
이미지 정렬하기
<img align> 이미지와 텍스트의 위치를 지정하기 위해서는 img 태그의 속성중
align 속성을 사용한다.
img 태그를 쓰고 그 뒤에 문장을 쓰면 속성값 대로 문장과 이미지가 정렬된다.
기본 형식은 '<img sre="파일명" align="속성값">문자열' 이다.
align 속성을 생략하면 기본값인 top 이 적용된다.
align 의 속성값은 아래와 같다.
img align = left 이미지의 왼쪽에 문자열을 정렬
right 이미지의 오른쪽에 문자열을 정렬
center 이미지의 중간에 문자열을 정렬
top 이미지의 제일 상단과 문자의 상단을 맞춤
middle 문자열의 밑선을 이미지의 가운데에 맞춤
absmiddle 문자열의 가운데를 이미지의 가운데에 맞품.
bottom 이미지의 하단과 문자열의 하단을 맞춤.
baseline bottom과 같은 역할을 한다.
(예문)
<img src="sky.jpg" align="top"> 문자열을 이미지의 상단에 맞춘다. <br>
<img src="sky.jpg" align="middle"> 문자열을 이미지의 가운데에 맞춘다. <br>
<img src="sky.jpg" align="bottom"> 문자열을 이미지의 하단에 맞춘다.
2) 배경 음악 넣기
우선 음악이 있는 곳의 주소가 필요하다.
음악 주소는 다음 카페 등에서 음악 태그나 음악 이라고 적은 후 찾아 보면
여러 개가 나오는데 이 곳중 한 곳을 가입한 후, 거기서 받을 노래를 찾아 보면
거기에 주소가 적혀 있을 것이다.
이 음악 주소를 복사해서 아래의 음악 주소 부분에 넣어 주면 된다.
형식 : <embed src="음악 주소">
옵션으로는 다음과 같은 것이 있다.
- 미디어 재생기를 보이지 않게 하려면 <embed src="음악주소" hidden="true">
- 볼륨을 최대화로 설정하려면 <embed src="음악주소" volume="0">
- 음악을 반복하려면 <embed src="음악주소" loop="true">
- 위 세가지를 모두 적용하면
<embed src="음악주소" hidden="true" volume="0" loop="true">
- 미디어 창을 원하는 크기로 설정하려면
<embed src="음악주소" width="70" height="25" autostart="false">
숫자는 가로(width), 세로(height) 크기를 나타낸다.
* 주의할 것은 음악 주소를 복사해서 붙여 넣다 보면 음악 주소와 따옴표 사이에
빈칸(공간)이 생길 경우가 있는데, 그럴 때는 음악이 나오지 않게 된다.
3) 음직이는 글 넣기
<marquee> 텍스트를 스크롤 시키는 태그.
가장 기본적인 형식은 <marquee>~</marquee> 인데
태그 사이의 내용을 왼쪽에서 오른쪽으로 스크롤 시킨다.
태그 사이에는 글자뿐만 아니라 이미지를 넣어도 된다.
그리고 각종 태그와 같이 쓰일수도 있다.
다음돠 같은 속성을 있다.
behavior=scroll, slide, alternate : 행동 양식을 지정해 주는 속성
scroll은 영역을 벗어나서 사라지고,
slide는 영역의 끝부분에서 멈춘다.
alternate는 영역을 왔다 갔다 한다.
behavior을 지정해 주지 않으면 기본값인 scroll이 된다.
bgcolor=색상
영역의 바탕색을 지정, 지정을 안할 경우엔 바디나 테이블의 배경색이 된다.
<marquee>안녕하세요!</marquee>
<marquee bgcolor=green>안녕하세요!</marquee>
<marquee behavior=scroll>안녕하세요!</marquee>
<marquee behavior=slide bgcolor=pink>안녕하세요!</marquee>
<marquee behavior=alternate>안녕하세요!</marquee>
direction=left, right, up, down : 움직이는 방향을 지정해 주는 속성이다.
width=픽셀수 또는 % , height=픽셀수 또는 % : 영역의 크기 조정
scrollamount=숫자 : 스크롤되는 속도로 몇 픽셀씩 이동할지 결정한다.
숫자가 작을수록 느리고 부드럽게 움직인다.
scrolldelay=숫자 : 움직임 사이의 정지 시간으로 1000분의 1초 단위이다.
숫자가 작을수록 스크롤이 빠르다.
loop=숫자 : 스크롤의 반복 횟수를 지정한다.
(예문)
<marquee width=300 height=200 bgcolor=silver>안녕하세요!</marquee>
<marquee behavior=alternate direction=up height=100>안녕하세요!</marquee>
<marquee scrollamount=50 scrolldelay=50 bgcolor=silver>안녕하세요!</marquee>
<marquee>방<br>가<br>워<br>요</marquee>
<marquee direction=up><marquee>사랑해요</marquee></marquee>
<marquee direction=up behavior=alternate><marquee behavior=alternate>
나도 사랑해요~</marquee></marquee>
(종합 응용 예문)
<html>
<embed src="mms://211.176.63.196/media03/006/6271.asf" autostart="true"
hidden="true" volume="70" loop="-1"</embed>
<font size="5"><font color="red"><center>행복을 숨겨 둔 곳..
</font></font><br>
<table background=
"http://chem.kosin.ac.kr/data/file/gallery/c54da5ca_rainbow.jpg"
width=600 height=450 border="0"><tr><td>
<marquee direction=up scrollamount=1>
<font color="yellow" size=4><b><center>
이 세상이 처음 형성되었을 때 인간에게는<br><br>
행복이 미리 주어져 있었다.<br><br>
그러니 천사들은 인간들이 얼마나 꼴불견이었겠는가.<br><br>
보다 못한 천사들이 회의를 열어 결의하였다.<br><br>
인간에게서 행복을 회수해 버리기로.<br><br>
인간들은 마침내 행복을 빼앗겼다.<br><br><br><br>
그런데 그것을 어디에 감춰두느냐 하는 것이<br><br>
천사들의 고민이었다. <br><br>
한 천사가 제안하였다. <br><br>
"저기 저 바다 속 깊은 곳에 숨겨두면 어떨까요?"<br><br><br><br>
천사장이 고개를 저었다. <br><br>
"인간들의 머리는 비상하오.<br><br>
바다 속쯤이야 머지않아 뒤져서 찾을 거요."<br><br>
한 천사가 제안하였다. <br><br>
"가장 높은 산의 정상에 숨겨두면 어떨까요?"<br><br><br><br>
이번 역시도 천사장이 고개를 저었다. <br><br>
"인간들의 탐험정신은 따를 동물이 없어요.<br><br>
그러니 제아무리 높은 산 위에 숨겨두어도 찾을 거요."<br><br><br><br>
궁리하고 궁리한 끝에 천사장은 마침내 결론을 내었다.<br><br>
"인간들의 각자 마음속 깊은 곳에 숨겨두기로 합시다.<br><br>
인간들의 머리가 비상하고 탐험정신이 강해도 <br><br>
자기들의 마음속에 행복이 숨겨져 있는 것을<br><br>
깨닫기는 좀체 어려울 것이오."<br><br><br><br>
<br> 용인 ... 죽전...<br>
----------------------------------------------</font><br><br><br>
<img src="http://www.m-letter.or.kr/mail/img1/1_941.jpg"><br><br><br><br>
<img src="http://www.choice7.com/choice7/ftp/product/2003912125920_big.jpg"
width="170" height="170">
<br>~새로운 일을 위해...최근 찍은 내사진~<br><br><br>
</marquee></table>
<marquee><marquee direction="up" scrollamount="5" behavior="alternate"
width="430" height="140" bgcolor="pink" >
<img src="http://parangsaekr.com.ne.kr/images/ye01.gif">
<center>행복한 시간, 여유있는 시간, 아름다운 생이 계속되길....
</marquee></marquee></center>
</html>
(참고) 위 예문을 실행시켜 보려면 <html>부터 </html>까지를 복사한 후,
메모장에 붙여 넣고, 저장한 후 실행시켜 보면 된다.
(이 때, 저장할 파일 형식은 html로 해야 한다.)
* 어렵죠?? 저도 지금 공부중입니다..
도움이 많이 되실지 모르겠습니다..
첫댓글 좋은자료, 감사드립니다..