레이어와 DIV 태그

레이어와 <DIV>태그 LAYER(레이어)는 겹치게 표현하기 위해서 원하는 위치에<DIV>태그로 넣는것이며, DIV 태그는 문단의 정렬보다는 좌표의 개념입니다 해상도에 따라 오른쪽 끝이 0 - 800 되기도 하고 0 - 1024가 되기도 합니다.

[형식] <DIV ID="layer숫자(1.2.3......)" Style="position:absolute; left:y값; top:x값; width:넓이;height:높이;Z-index:2;"> left는 좌측으로 부터의 거리 (px단위) top는 상단으로 부터의 거리 (px단위) 레이어의 크기는 width. height로 지정하고, 지정하지 않으면 레이어에 사용되는 이미지.텍스트의 크기만큼 지정됩니다. ★. ID속성은 자바스크립트나 head부에 정의된 css와 연결할때 사용하며, 독립적으로 사용할 때는 생략할수 있습니다. 즉 <DIV style="position:absolute; left:200; top:90;;Z-index:12;">이렇게 사용해도 됩니다. ★.여기서 <DIV>는 전체위치를 표시해 주기 때문에 문서중의 어떤 위치에 넣어도 상관 없습니다.

* 그림을 넣을 때 * <DIV style="position:absolute; left:200; top:90;Z-index:2;"> <img src="images/.....jpg"></DIV> [용어설명] position:absolute : 위치값으로 left나 top을 지정. Z-index : 레이어의 순서를 지정.(숫자가 클수록 위로 올라갑니다) margin : 레이어의 바깥 여백값으로 위쪽 .좌측의 여백순으로 지정(margin:0px,15px) background-image : 레이어의 배경으로url(파일명)을 지정해 줍니다. 정리하면 글과 이미지를 <DIV>를 사용하면 다른 배경이미지와 상관없이 브라우저창에 별도로 나타나 납니다. 그런데 이미지와 글에 DIV태그를 같이 사용했을 때 글을 이미지 위에 올리려면 이미지 보다 글의 레이어 숫자를 크게합니다. 즉 Z-index:2. Z-index:1이 있다면 Z-index:2가 위에 위치합니다. 주의: 카페에 올릴때나 메일로 보낼때 보는사람의 해상도가 각기 다르기 때문에 주의하셔야 합니다.

지금까지 설명한것의 사용예 <div id="layer1" style="width:400px; height:400px; position:absolute; left:350px; top:570px; z-index:2;">글쓰는 곳 </div> <div id="layer2" style="width:1px; height:416px; position:absolute; left:200px; top:400px; z-index:1;"> <img src="이미지 주소(URL)></div> SAYA 올림