예쁜 편지지 만들기

제목 쓰세요... 예 쁜 글 쓰 세 요 . . . . . . . . . .

플래쉬영상을 테이블에 삽입한후,
그 플래쉬영상위로 글씨가 나타나도록 했습니다.
상대위치와 절대위치를 지정하는 div 주체태그안에 스타일시트 태그를 삽입해서
위와같이 편지지를 작성하는것입니다.

그럼 이 편지지를 제작하는법을 함께 알아봅시다.

*****************************************************************************

아래소스는 위 편지지의 소스입니다.
이소스를 보면서 설명을 하는것으로 강의하겠습니다.

<center>

<TABLE width=610 height=580 cellspacing="10" cellpadding="0"
bgcolor="#000000" border=5 bordercolor=#555555>
<TR>
<TD vAlign=top align=middle bgcolor="#000000" 
background-position:100% background-repeat:no-repeat; ;>


<DIV id=outline style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%;
POSITION: relative; TOP: 0px; HEIGHT: 550px">

<DIV id=layer1 style="Z-INDEX: 2; LEFT: 0px; WIDTH: 580px;
POSITION: absolute; TOP: 0px; HEIGHT: 550px">

<EMBED src="http://creekforest.com/swf1/mina_movie/letter3.swf"
width="580" height="550"
type=application/x-shockwave-flash wmode="transparent">
</DIV>


<DIV id=layer2 style="Z-INDEX: 2; LEFT: 80px; WIDTH: 470px;
POSITION: absolute; TOP: 50px; HEIGHT: 0px">


<pre><P align=left><FONT style="FONT-SIZE: 9pt"
face=굴림 color=white>
<SPAN id=style style="LINE-HEIGHT: 18px">
<b>제목 쓰세요...  </b>

예
쁜
글

쓰
세
요
.
.
.
.
.
.
.
.
.
.



</span></font></p></pre>
</DIV>

</DIV>

</TD></TR></TABLE>


<EMBED style="FILTER: xray gray();
WIDTH: 610px; HEIGHT: 28px" src="http://creekforest.com/music1/ShowMe.wma"
type=video/x-ms-asf loop="true" autostart=true
volume="0"></embed>

</center>


**********************************************************************

그럼위의 태그를 하나하나 분석하며 설명하겟습니다.
먼저

1.제일위에 사용한 <center> 태그는
게시물내용이 게시판중앙에 위치하라고 지정하는 태그이죠..
(center를 겟판에서 사용하는것은 게시판을 중심으로 중앙이란 뜻이지,,
윈도우 화면의 중앙이라는뜻이 아닙니다.
게시판에 게시물을 올릴때 작성되는 html 태그와
웹페이지를 작성하는 html 의 위치지정은 그 개념이 다릅니다.
이점을 여러분이 이해하는것이 div 태그로 상대위치와 절대위치를 지정하는데 있어,
혼란을 방지하는것입니다.

다시말해 게시판에서 작성되는 html 태그는 게시판을 중심으로 명령을 주는것입니다.
페이지 전체에 해당되는사항이 아닙니다.)


2.다음으로 편지지를 구성하는 테이블을 만드는과정입니다.

여기에서 테이블을 작성할때,
테이블 주체태그안에 스타일시트 보조태그로서 테이블의 속성을 지정해줍니다.
스타일시트로 테이블 주체태그를 보조해주는것에 대해 자세히 알고 싶으시면
맨 아래에 링크되어잇는 카페 태그사랑에 오시면 공부할수 있습니다.

아래는 테이블 작성태그입니다.(위에서 파란색부분입니다)

<TABLE width=610 height=580 cellspacing="10" cellpadding="0"
bgcolor="#000000" border=5 bordercolor=#555555>
<TR>
<TD vAlign=top align=middle bgcolor="#000000" 
background-position:100% background-repeat:no-repeat; ;>

이 태그를 하나하나 분석해봅시다.

먼저,
테이블의 사이즈에 대해 알아봅니다.

일반 편지지를 작성할때,별도로 테이블 사이즈를 지정하지 않습니다.
삽입되는 내용물의 사이즈가 바로 테이블 사이즈가 되기때문입니다.

그러나 일반적으로 텍스트만을 삽입할때는 테이블 사이즈를 지정합니다.

그리고 이렇게 레이어로 플래쉬영상을 지정하여 편지지를 만들때도
테이블사이즈를 지정해야합니다.

테이블의 사이즈를 말할때는 테이블 태두리 밖의 사이즈를 말하는것입니다.
그러니까, 테이블 안에 들어갈 내용물의 사이즈와
테이블의 cellspacing 사이즈와 cellpadding ,,그리고 border 의
총 합계가 바로 테이블 사이즈가 되는것입니다.

플래쉬영상의 사이즈가 가로 580px 세로 550px 입니다.
그리고 cellspacing 을 10px 로 했고,
cellpadding 은 0 으로햇고,
border 는 5로 햇습니다.

이것을 모두 더해주면 테이블 사이즈가 되는것입니다.
아래는 더하기하는과정.

가로: 영상가로사이즈 580px + cellspacing(왼쪽)10px + cellspacing(오른쪽)10px
      + cellspacing 0px + border(인쪽과오른쪽 5+5) 10px = 합계 610
         

세로: 영상세로사이즈 550px + cellspacing(윗쪽)10px + cellspacing(아랫쪽)10px
      + cellspacing 0px + border(윗쪽과아래쪽 5+5) 10px = 합계 580

이렇게 사이즈를 산출하고나서 테이블 주체태그안에 다음처럼 작성합니다.

width=610 height=580

그런다음 테이블의 td 속성에 스타일시트 태그로 다음처럼 작성해줍니다.
<TD vAlign=top align=middle bgcolor="#000000" 
background-position:100% background-repeat:no-repeat; ;>

이 스타일태그시트는 여러분이 무조건 암기하시기바랍니다.

참고로 repeat 태그의 뜻은 아래와 같습니다.참고하세요.

repeat (배경이미지를 페이지 전체에 반복합니다.)
repeat-x(배경이미지를 수평으로 한줄 반복합니다.)
repeat-y(배경이미지를 수직으로 한줄 반복합니다.)
no-repeat(배경이미지를 반복하지 않습니다.)

위설명처럼 배경은 반복하지않고 한번만 나열되도록
no-repeat 로 적용햇습니다.


그리고 여기에서 bgcolor 대신 background 태그를 사용하여
이미지로 대체할수 잇다는것도 여러분은 이미 아시겟죠?

이렇게 테이블 태그를 완성합니다.


3.이번엔 이테이블에 영상과 텍스트를 레이어(layer)로 지정하여
차례(index)를 정한다음 절대위치를 지정하는순서입니다.


여러분 중에 혹시 레이어와 인덱스에대해 모르시는분은 이 강의를 보지 마시고,
카페 태그사랑에서 편지지만들기 강의를 더 살펴본다음 이 강의를 보시기 바랍니다.

레이어는 모두 3개로 만들엇습니다.

첫째는 배경(background) 레이어,
둘째는 플래쉬영상을 지정하는 레이어
셋째는 텍스트레이어,

이렇게 3개로 나누어 위치를 각각 지정해 나가면됩니다.


배경레이어는 outline 이라고 id 를 정합니다.
이렇게 배경을 하나 만들어주는이유는,,
이 배경레이어를 스타일시트로선언하게되면,,,
모든레이어가 여기저기 따로따로 놓이지않고,
모두 이 배경위에 놓여지게 하기위해서입니다.
이점 이해하셨나요?

우리가 일반적으로 div 태그로 펼친편지지에서 위치를 정해주면
게시판마다 크기가 다르기때문에 일일히 위치를 수정해야합니다.

그러나 이렇게 레이어태그를 사용하여,
배경을 선언해주면,
모든레이어가 흩어지지않고 이 배경위에 놓여지게 됩니다.
이렇게 어떠한 대상을 지정하기위한 우치속성을 상대위치라고 합니다.

이 상대위치를 정하게되면,
어떤 게시판이던지 상관없이 한곳에 모여서 정해준위치에 그대로 잇게 됩니다.

그리고 이 배경의 사이즈는 영상사이즈와 같게 해주면됩니다.

태그는 div 태그를 사용하여 배경레이어의 위치를 지정합니다.
위치는 테이블을 기준으로 지정해주면됩니다.

게시판을 기준으로 지정하는게 아닙니다.
이점을 착오없기를 바랍니다.

그럼 테이블을 기준으로 할때,,
이 배경은 테이블에 맞붙어 꽉차게 위치시킵니다.
따라서 위치는 left, top 모두 0px 입니다.

그리고 위치를 지정하는 스타일시트태그는
absolute 가 아니고 relative 를 정해줍니다.
그리고 인덱스는 제일아래에 놓여지게 1로 지정합니다.

absolute 는 절대위치이고,
relative 는 상대위치태그입니다.

배경위치는 이렇게 상대위치로 지정하는것입니다.
아래는 이 상대위치를 지정한 태그입니다.
위 태그보기중에 빨간색으로 표기한 첫번째 div 태그입니다.



<DIV id=outline style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%;
POSITION: relative; TOP: 0px; HEIGHT: 550px">

이렇게 작성하는요령을 이해하셨나요?

그리고, 이 상대위치를 정해준 배경레이어는 div 마감태그 </DIV>를
레이어가 끝나는 제일마지막에 삽입합니다.
중간에 삽입하게되면 태그가 혼돈을 일으켜 엉망이 됩니다.
이점 꼭 명심하시기 바랍니다.

상대위치로서 배경을 먼저 지정해주엇습니다.
이번엔 플래쉬영상과, 텍스트를 레이어로
절대위치를지정해주는과정입니다.

텍스트가 제일위에 놓여져야하니까,
배경레이어 바로위에 놓여지게되는 영상부터 절대위치를 지정합니다.

이영상은 id를 layer1 로 합니다.
그리고 인덱스는 두번째이니까 2 로 지정합니다.
또한 절대위치(absolute)는 테이블을 기준합니다.
게시판을 기준하는게 아닙니다.
테이블을 기준하면 역시 left 0px 이고 top 0px 입니다.
그리고 div 태그를 바로  여기에서 막아줍니다.

어때요?
상당히 쉽죠~~^ ^* 이젠 이해가 될겁니다.

그렇게 해서 완성된 태그는 다음입니다.

<DIV id=layer1 style="Z-INDEX: 2; LEFT: 0px; WIDTH: 580px;
POSITION: absolute; TOP: 0px; HEIGHT: 550px">
<EMBED src="http://creekforest.com/swf1/mina_movie/letter3.swf"
width="580" height="550"
type=application/x-shockwave-flash wmode="transparent">
</DIV>



자 이번엔 마지막으로 텍스트의 절대위치를 지정하면됩니다.

방법은 영상과 똑 같습니다.

텍스트를 꾸며주는 태그에 대한 설명은 생략합니다.
영상과 같은 방법으로 지정하면됩니다.

아이디를 layer2 로 햇습니다.
그리고 인덱스는 제일위에 놓여져야하니까 3 으로 했습니다.

절대위치는,,,
테이블 왼쪽에 붙게되면 보기가 좋지 않습니다.
왼쪽에서 조금떨어지게 놓여져야좋습니다.
그래서 left는 80px 로 햇고, 위에서 조금떨어지게 top 은 50px 로 했습니다.

그리고 텍스트전체의 사이즈를 정해주면됩니다.
아래는 완성된 태그입니다.
그리고 div 마감태그는 바로 막아주면됩니다.


<DIV id=layer2 style="Z-INDEX: 2; LEFT: 80px; WIDTH: 470px;
POSITION: absolute; TOP: 50px; HEIGHT: 0px">

<pre><P align=left><FONT style="FONT-SIZE: 9pt"
face=굴림 color=white>
<SPAN id=style style="LINE-HEIGHT: 18px">
<b>제목 쓰세요...  </b>

예
쁜
글

쓰
세
요
.
.
.
.
.
.
.
.
.
.



</span></font></p></pre>
</DIV>


자 이제 여기까지 완성했으면,
마지막으로 배경의 div 태그를 마감해줍니다.

그런다음 테이블을 마감하고,,
그리고 한캄띄워줘서 윈도우 미디어 플레이어를 놓이게 해주고,,,
마지막으로 center 태그를 마감하면 끝나는것입니다.