레이어를 이용한 영상시 만들기

오늘은 레이어를 이용하여 영상시를 만드는 방법에 관하여 한 번 알아 봅니다.

영상시 보기

이 방법을 사용하는 이유는 영상의 배경으로 사용해야 할 이미지가 너무 크거나 작아서
background="이미지주소"의 방법으로 사용하기가 곤란하였던 것을
레이어를 이용하여 배경이미지를 자유롭게 제어할 수 있다는 매력이 있습니다.
그런데 한 가지 조심스러운 것은 레이어를 사용하는데 위치의 값을 잘 못 주면
엉뚱한 결과가 나와 버립니다.

자 그럼 지금부터 하나씩 알아 볼까요?

<table align=center style="background-color:#ffffff;border-width:10px;border-
color:#969292;border-style:ridge;" CELLSPACING=10><tr><td>
<table border=5 bordercolor=000000><tr><td>
<table width="450" height="300" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0"><tr><td>

테이블에 관한 것은 다 알고 있는 것으로 간주하고 더 이상 설명을 하지 않습니다.
중요한 것은 아래의  marquee태그인데요..

<marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="position:absolute; z-index:1;top:120; left:320;">
이 빨간색으로 되어 있는 부분이 레이어 값입니다.
즉 배경 이미지 위에 레이어를 이용하여 글자를 띄우는 것이지요,
"z-indes:1"은 첫 번째 레이어를 뜻하는 것이구요. 레이어가 계속 된다면 숫자가 2. 3.....으로 되겠지요.
아래에서 글 제목에 레이어 "2"를 사용한 것을 눈여겨 보시기 바랍니다.
top:120; left:320;라는 것이 레이어의 위치값을 결정하여 주는 것인데요,
이 수치를 가지고 글자의 스크롤 위치가 바뀌는 것입니다. 너무 스크롤이 높거나 한쪽으로 치우쳤으면
이부분을 가감하면서 조정을 해야 합니다.
이것은 테이블내의 위치를 이야기 하는 것이 아니고 게시판의 좌측상단부터의 값을 이야기 하는 것입니다.
따라서 태그연습장에서 실행을 시켜가면서 위치값을 잡아 주어야 하겠지요.
중요한 것은 게시판의 성격에 따라서 위치값이 달라지기 때문에 게시판을 옮기게 되면
그 때마다 수치를 변경하여야 한다는 것입니다.

<span style=filter:shadow(color=red,direction=135);height:5px;>
<font color=#ffffff size=3><pre style=margin-left:30;><font color=#ffffff size=3>
<font face="가을체,솔체,돋움체,굴림체,verdana"><b>
만나고 싶을때 언제라도 만날 수 있다면<br>
보고 싶을때 언제라도 볼 수 있다면<br>
이리도 마음 저리는 일은 없을겁니다.<br><br>
만나고 싶을때 만날 수 없기에<br>
보고 싶을때 볼 수 없기에<br>
그대는 정녕 내게 아픔입니다.<br><br>
금방이라도 내게 다가와<br>
따뜻한 손 내밀것 같은 그대여.<br>
그대는 지금 어디 있습니까.<br>
어디 있기에 이토록 더디 옵니까... <br>
</span>
</marquee>
여기까지가 영상글을 스크롤 시키는 부분입니다.
이해를 하셨나요?

<img src="https://bbs.nate.com/files/bbs/images/general/adult07/40/j3-4[20030927160547].jpg" width="450" height="300">
이 부분이 배경이미지를 제어하는 곳이구요.
width와 height값으로 이미지를 제어하시면 됩니다.
중요한 것은 너무 작은 이미지를 크게 확대를 하시면 보기가 싫어진다는 것입니다.

<span id="layer3" style="position:absolute; z-index:2; top:90; left:350;"><span style=filter:shadow(color=red,direction=135);height:5px;>
<font color=#ffffff size=4 face="가을체,굴림,돋움"><b>
아름다운 영상시</b></font></span>
여기에 또 레이어가 나왔네요?
아시는 분은 눈치를 채셨지요? 글 제목을 쓰기 위한 부분입니다.
두 번째의 레이어이기 때문에 span id="layer3" style="position:absolute; z-index:2
"indes:2"를 사용하였고 위치값은 가로 350 높이 90의 위치에 고정을 한 것입니다.
</td></tr></table></td></tr></table></td></tr></table>
레이어라는 것은 양면의 날과 같아서 잘 사용하면 보기가 좋지만 그렇지 않을 경우에는 아주
보기 흉한 모습이 됩니다.
선택은 여러분의 몫입니다.
잘 사용을 하시기를 바랍니다.

아래는 전체 소스입니다.

<table align=center style="background-color:#ffffff;border-width:10px;border-color:#969292;border-style:ridge;"
CELLSPACING=10><tr><td><table border=5 bordercolor=000000><tr><td><table width="450" height="300" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0"><tr><td>
<marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="position:absolute; z-index:1;top:120; left:320;">
<span style=filter:shadow(color=red,direction=135);height:5px;>
<pre style=margin-left:30;><font color=#ffffff size=3 font face="가을체,솔체,돋움체,굴림체,verdana"><b>
만나고 싶을때 언제라도 만날 수 있다면<br>
보고 싶을때 언제라도 볼 수 있다면<br>
이리도 마음 저리는 일은 없을겁니다.<br><br>
만나고 싶을때 만날 수 없기에<br>
보고 싶을때 볼 수 없기에<br>
그대는 정녕 내게 아픔입니다.<br><br>
금방이라도 내게 다가와<br>
따뜻한 손 내밀것 같은 그대여.<br>
그대는 지금 어디 있습니까.<br>
어디 있기에 이토록 더디 옵니까... <br>
</span></pre></font></b>
</marquee>
<img src="https://bbs.nate.com/files/bbs/images/general/adult07/40/j3-4[20030927160547].jpg" width="450" height="300">
<span id="layer2" style="position:absolute; z-index:3; top:90; left:350;"><span style="filter:shadow(color=red,direction=135);height:5px;">
<font color=#ffffff size=3 face="가을체,굴림,돋움"><b>아름다운 영상</b></font></span>
</td></tr></table></td></tr></table></td></tr></table>

질문은 "묻고 답하기" 게시판에 남겨주시기 바랍니다.