1.15  레이어에 대해서 알아보겠습니다.   31


1.15  레이어(Layer)에 대해서

   레이어(Layer)라고 한번쯤은 들어보셨을 거예요. 이미 여기까지 오신 여러분은 초보가 아니랍니다. 이제 왠만한 홈페이지는 뚝딱 만들 수 있는 경지에 오르셨으리라 생각됩니다. 제 강좌를 읽는 것이 어쩌면 더이상 의미가 없을런지도 모르겠습니다. 웹써핑을 하면서 다른사람들이 해놓은 것들을 어떻게 짜였는지 소스도 분석해보고 직접 따라도 해보면서 내 것으로 만드는 것이 실력을 향상시키는 지름길이거든요. 하핫, 막상 여러분께 떠나라고 하니 마음이 좀 그렇네요. 새끼에게 날개짓을 가르쳐 둥지를 떠나보내야 하는 어미새의 마음을 조금은 이해할 것도 같네요. 레이어란 영어로 '층ㆍ겹친ㆍ쌓은' 이런 뜻인데요, 레이어를 사용하면 절대값(Pixel)이나 상대값(%)을 지정하여 원하는 대상을 화면의 원하는 위치에 위치시킬 수 있답니다. 투명셀로판지라고 생각하시면 이해하기가 쉽겠네요. 투명셀로판지에 글씨를 쓰거나 그림을 그려서 여러장 겹쳐놓은 것이라고 생각하시면 되겠습니다.

[Div를 사용한 레이어 만들기]

<div></div>: 절대값(Pixel)이나 상대값(%)을 지정한 스타일시트를 삽입하여 원하는 대상을 화면의 원하는 위치에 위치시킬 수 있습니다.

<html>
<body>
<div style="position:absolute; width:400px; height:350px; top:100px; left:100px;">
이 곳에 원하는 위치에 놓일 대상을 넣으시면 된답니다.
</div>
</body>
</html>

ㆍposition은 relative와 absolute로 지정할 수 있습니다. 브라우저의 크기에 따라 상대적(relative)으로 대상의 위치를 잡아줄 것인가, 브라우저의 크기에 관계없이 절대값(absolute)으로 대상의 위치를 정해줄 것인가를 정하는 속성입니다.

ㆍwidth와 height는 대상이 위치할 영역의 폭(width)과 넓이(height)를 지정하는 속성입니다. 절대값인 수치(Pixel)나 상대값인 백분율(%)을 사용하여 영역의 범위를 지정하실 수 있습니다.

ㆍtop과 left는 대상이 위치할 곳의 좌표를 지정하는 속성입니다. top:100px; left:100px는 화면의 위쪽으로부터 100px, 왼쪽으로부터 100px이 되는 곳에 대상을 위치시킨다는 의미입니다. 절대값인 수치(Pixel)나 상대값인 백분율(%)을 사용하여 대상의 위치를 지정하실 수 있습니다.

예제 1 Div를 사용한 레이어 만들기

<html>
<body>
<div style="position:absolute; width:400px; height:350px; top:100px; left:100px;">
       <img src="http://moocta.byus.net/loveletter1.bmp" width="400" height="350">
</div>
<div style="position:absolute; width:400px; height:350px; top:100px; left:100px;">
       <font size="3" color="red" face="굴림">
Div를 사용하여 두개의 투명셀로판지를 만들어
겹쳐 놓은 것이라고 생각하시면 되겠네요.
셀로판지 중의 하나에는 사진을 넣었구요,
다른 것에는 글자를 입력한 후에
두개의 투명셀로판지를 겹쳐 놓은 것이랍니다.
       </font>
</div>
</body>
</html>

   태그연습장을 사용하여 예제 1의 결과를 확인해 보세요.

   기존에 있던 강좌들이 너무 미흡한 점이 많아서 오늘부터 수정작업에 들어갑니다. 이번 강좌를 끝으로 지난 4개월간 끌어왔던 HTML 강좌를 마치겠습니다. 아직 Input과 Form에 대해서 다루지 않았지만, 개인홈페이지를 만드는데에는 필요가 없을 것 같습니다. 제 홈페이지에도 전혀 쓰이지 않았구요. 다음번에는 스타일시트(CSS)에서 뵙도록 하지요. 그동안 HTML의 틀안에서 스타일시트라는 것에 대해서 맛만 보았었는데, 한번 본격적으로 스타일시트의 정체가 대체 무엇인지 다루어보려고 합니다. 제 강좌를 처음부터 차분하게 읽어보신 분은 스타일시트가 전혀 낯설지 않을 것입니다. 사실 오늘 배운 내용도 스타일시트를 사용한 위치와 범위의 제어였거든요. 오늘은 여기에서 이만 마치겠습니다. 지금까지 제 강좌를 읽어주셔서 감사합니다.