'div'에 해당되는 글 1건

  1. 2007.11.26 레이어와 DIV 태그 1

레이어와 DIV 태그

Program/Programming
posted by 권오성의 Biomedical Engineering 2007. 11. 26. 14:38
레이어와 <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 올림

티스토리툴바