본문
|
Layer(레이어)는 겹치게 표현하는 것으로 <DIV>태그를 이용하여 나타내고자 하는 위치와 크기를 지정할 수 있다. DIV 태그는 문단의 정렬보다는 좌표의 개념입니다 |
| [형식]
<DIV ID="layer숫자" Style="position:absolute; left:y값; top:x값; width:넓이;height:높이;Z-index:2;"> [설명] 1. <DIV>태그의 속성중 ID속성은 자바스크립트나 head부에 정의된 css와 연결할때 사용하며, 독립적으로 즉, body 태그내에서 사용할 때는 필요가 없습니다. 넣어도 상관없지만 불필요하므로 생략이 가능합니다. 즉 <DIV style="position:absolute; left:200; top:90;;Z-index:12;">이렇게 사용합니다. 위의 예제에서 알 수 있듯이 style 다음에 등호(=) 표시를 한 다음 쌍따옴표(")를 하고 속성과 속성값 사이에는 콜론(:)으로 구분하여 지정하고 또 다른 속성을 이어서 쓸 경우에는 세미콜록(;)으로 구분하며 마지막에 쌍따옴표(")로 끝을 맺습니다. ★ 위치표시 방법인 position의 속성값은 절대위치를 나타내는 absolute와 상대위치를 나타내는 relative 두가지입니다 - absolute는 컴 화면의 내용에서 좌측 상단을 기준으로 left와 top에 좌표값을 지정합니다. 그러므로 이때에는 DIV 태그를 어느 부분에 써 넣어도 상관없습니다. ★ position:absolute를 사용하여 나타내고자 하는 내용물의 시작될 위치(좌측 상단 모서리), 즉 어떤 이미지 위에 div 태그를 사용하여 처음 나타내고자 하는 위치를 p지점이라고 가정하면 이 p지점의 위치가 새롭게 정의된 기준점이 되는데 이 p지점에서 원래의 좌표값 기준점인 좌측 상단 모서리(0과 0)로 가려면 left(왼쪽)로 몇 픽셀이고 top(위)로 몇 픽셀을 가야하는가를 나타내는 것입니다.(px단위) ★ 레이어의 크기는 가로와 높이를 width. height로 지정하며(p지점으로 부터 넓이와 높이를 표시) 지정하지 않으면 레이어에 사용되는 이미지.텍스트의 크기만큼 지정됩니다. ★ Z-index는 레이어의 순서를 지정하는 것으로 1,2,3...과 같은 숫자를 쓰며 숫자가 클수록 위로 올라갑니다. <DIV>태그 하나만 사용할 경우 이 내용도 필요하지 않습니다. 글과 이미지를 <DIV>태그를 사용하면 다른 배경이미지와 상관없이 브라우저창에 별도로 나타납니다. 그런데 이미지와 글에 <DIV>태그를 같이 사용했을 때 글을 이미지 위에 올리려면 이미지 보다 글의 레이어 숫자를 크게합니다. 즉 Z-index:2(글). Z-index:1(이미지)과 같이 지정합니다.(<DIV>태그 2개가 필요합니다) |
| * 그림 1개를 넣을 경우 *
<DIV style="position:absolute; left:200; top:90;"> <img src="images/.....jpg"></DIV> 위의 내용은 어떤 화면 위에서 이미지의 처음 나타내어질 위치(좌측 상단 모서리)와 원래 내용(브라우저 등)의 기준점과의 떨어진 거리를 왼쪽으로 200픽셀, 위로 90픽셀 되는 위치에서 부터 시작하여 이미지의 크기대로 나타나게 하라는 명령입니다. * 그림과 글씨를 넣을 경우 * <div id="layer1" style="position:absolute;left:150px;top:200px;width:300px; height:400px; z-index:2;">글쓰는 곳 </div> 위의 내용은 어떤 화면 위에 글자와 이미지(그림)를 겹치게 표현하되 레이어 순서를 지정하여 이미지(그림) 위에 글자가 나타나게 하는 것으로 이미지(그림)의 처음 시작 위치가 새로운 기준점인데 이 기준점은 왼쪽으로 50픽셀, 위로 100픽셀 되는 위치가 원래 기준점이라고 알리고 이 지점부터 시작하여 가로(넓이) 500, 높이(세로) 600 픽셀 크기로 나타내라는 뜻이며,
★ <DIV>태그가 단독으로 사용될 경우(자바스크립트나 head부에 정의된 css와 연결되지 않은 경우)에는 id="layer1"과 id="layer2"는 생략 가능하나, z-index:1; 과 z-index:2은 생략하면 안됩니다. 또한 순서를 바꾸면 글씨가 이미지 밑으로 가려져 보이지 않게 된다는 것을 참고하시기 바랍니다. |
|
[실습 예제] 1. 절대위치를 이용하여 그림위에 글자가 위로 스크롤 되는 예 <marquee direction=up scrollamount=1.5><pre> 그대, 지금 그곳에 내 청춘의 향기처럼 싱그러운 향기 풍겨주던 하얀 꽃잎이 멋진 왈츠를 추고 있나요 내 유년의 뜨락에 하얗게 쏟아지던 그 축복의 노래가 그리워서, 목메게 그리워서, 차라리 내가 하얀 꽃잎 되어 그대 가슴으로 떨어지는 날입니다 어느 날 차마 말 못해 쿵쿵 뛰는 심장으로 고백하던 내 수줍은 노래가 아카시아 나무 아래서 흐느끼고 있을 때 짙은 매혹의 향기로 그렇게 대변해주던 순정의 꽃 아카시아, 이젠 그 하늘 아래서 누구의 노래를 함께 불러주고 있을까, 우리 소망의 향기로 황홀하게 도취시키던 아름다운 날들의 순결한 꽃잎이여, 사랑의 향기여, 침침하게 어두워져 가는 내 눈 속으로도 하얗게 휘날려다오 생의 혼탁한 내음에 지쳐 있는 내 후각의 빈터에도 그 신선한 향기 좀 뿌려다오</pre> </marquee></font> </div> <div style="position:absolute;left:10px;top:10px;width:500px; height:400px;z-index:1;"> <img src="http://pds39.cafe.daum.net/image/23/cafe/2007/05/12/15/31/46455f3326eae"></div> 1번 아래에서 여기까지를 복사하여 태그연습장 등에서 확인해 보시기 바랍니다. ★ 절대위치를 사용하여 지정할 경우에는 컴퓨터의 브라우저나 내용에 따라 다르게 나타날 수 있습니다. 2. 상대위치를 이용하여 그림위에 글자가 위로 스크롤 되는 예 <marquee direction=up scrollamount=1.5><pre> 그대, 지금 그곳에 내 청춘의 향기처럼 싱그러운 향기 풍겨주던 하얀 꽃잎이 멋진 왈츠를 추고 있나요 (중략) 침침하게 어두워져 가는 내 눈 속으로도 하얗게 휘날려다오 생의 혼탁한 내음에 지쳐 있는 내 후각의 빈터에도 그 신선한 향기 좀 뿌려다오</pre> </marquee></font> </div> </td></tr></table> |
관련링크
댓글목록
등록된 댓글이 없습니다.