웹마스터 팁

  2. Support
  3. 웹마스터 팁

레이어의 개념 및 기초 지식

2008.10.01 09:54

ITBANK.kr

레이어 개념잡기

웹문서에서의 레이어(Layer)란 브라우저 내의 문서의 위치와 관계없이 자유자재로 새로운 영역을 만들 수 있는 기술입니다. 레이어는 원래 네츠케이프 4.0부터 적용되기 시작하여 현재는 익스플로러에서도 스타일시트와 <DIV> 혹은 <SPAN> 태그의 조합으로 널리 사용되고 있습니다. 사실 MS 에서는 레이어 라는 이름보다도 "컨테이너" 라는 이름으로 불리워지기를 원하고 있습니다

즉, 네츠케이프에서의 레이어는 <Layer></Layer> 태그에의해 생성할 수 있고, 익스플로러에서는 스타일시트와 <DIV> 혹은 <SPAN> 라는 태그로 생성할 수 있습니다.

레이어를 사용하면 원하는 위치에 좌표값을 조절하여 고정된 위치에 글자나 이미지 등을 출력할 수 있습니다.

레이어 에서의 위치와 영역

LEFT

레이어가 위치할 X-좌표

TOP

레이어가 위치할 Y-좌표

WIDTH

레이어의 가로크기

HEIGHT

레이어의 높이

레이어의 너비나 높이는 레이어 내에 포함된 내용에 따라 자동 조절 됩니다

또한 레이어 내에 또다른 하위 레이어가 존재한다면 하위레이어의 LEFT 좌표와 TOP 좌표는 상위레이어의 기준점을 기준으로 합니다.

 

레이어의 형식

네츠케이프 (반드시 BODY 부분에 위치)

익스플로러

<LAYER ID="레이어명" LEFT="X좌표값" TOP="Y좌표값" WIDTH="레이어의 너비" HEIGHT="레이어의 높이">
내용
</LAYER>

<STYLE>
#레이어이름 {position:absolute}
</STYLE>

<DIV ID="레이어이름">
내용
</DIV>

자바스크립트에서의 레이어 접근 방식

기본적으로 레이어 객체는 document 객체의 파생객체입니다. 따라서 레이어에 접근하려면 document 객체를 이용하여 접근 하여야 하는데 앞서 말한 대로 네츠케이프와 익스플로러는 각기 그 접근방식에 차이가 있습니다.

네츠케이프

익스플로러

방법 1

배열형태로 접근

익스플로러에서는 layer 라는 객체를 지원하지 않기 때문에 DIV 객체에 접근하려면 아래의 방법처럼 document.all 로 접근할 수 있습니다.

document.all.myDIV...

하지만 익스플로러에서는 document.all 부분은 생략 해도 무방합니다

document.layers[0]...

방법 2

레이어 이름으로 접근

document.myLayer...

방법 3

layers[레이어명] 으로접근

document.layers[myLayer]...

적용예

document.레이어명.visibility="show"

document.all.myDIV.style.visibility="visible"
document.all("myDIV").style.visibility="visible"
myDIV.style.visibility="visible" 

 아래 소스코드를 실행 해 볼까요?

<html>
<head>
<title> Jasko Sample Script </title>

<style>
#myDIV {position:absolute; left:100; top:100; background-color:yellow;width:100;height:100}
</style>

<script language="JavaScript">
<!--
function j_show() {
document.all.myDIV.style.visibility="visible"
}

function j_hide() {
myDIV.style.visibility="hidden"
}
//-->
</script>

</head>

<body>

<DIV id=myDIV></DIV>

<button onClick="j_show()">보이기</button><button onClick="j_hide()">숨기기</button>

</body>

</html>

 

LAYER 객체의 속성

속성

내 용

name

레이어 객체의 이름

width

레이어 객체의 가로크기(픽셀)

height

레이어 객체의 높이(픽셀)

left

브라우저 왼쪽상단을 기준으로 한 레이어의 X축 기준점

top

브라우저 왼쪽상단을 기준으로 한 레이어의 Y축 기준점

visibility

레이어의 노출 여부

zindex

레이어의 실행순서. 값이 클수록 위에 나타납니다

pageX

문서를 기준으로 페이지상에서의 X좌표

pageY

문서를 기준으로 페이지상에서의 Y좌표

X

화면의 왼쪽을 기준으로 한 레이어의 위치. (=layer.left)

Y

화면의 위쪽을 기준으로 한 레이어의 위치. (=layer.top)

clip.left

레이어의 보여질 부분을 왼쪽 위치

clip.top

레이어의 보여질 부분을 위쪽 위치

clip.right

레이어의 보여질 부분을 오른쪽 위치

clip.bottom

레이어의 보여질 부분을 아래쪽 위치

clip.width

레이어의 보여질 부분의 가로크기

clip.height

레이어의 보여질 부분의 높이

src

레이어에 불러들일 외부문서

background

레이어의 배경그림

bgColor

레이어의 배경색

parentLayer

상위레이어

above

현재 레이어의 상위레이어

below

현재 레이어의 하위레이어

siblingAbove

특정 레이어에 포함된 두 개의 레이어중 위쪽레이어

siblingBelow

특정 레이어에 포함된 두 개의 레이어중 아래쪽레이어

 LAYER 객체의 메소드

메소드

내 용

resizeBy(x,y)

레이어의 크기를 변경합니다 (상대값)

resizeTo(x,y)

레이어의 크기를 변경합니다 (절대값)

moveBy(x,y)

레이어의 위치를 변경합니다 (상대값)

moveTo(x,y)

레이어의 위치를 변경합니다 (절대값. 좌표기준은 상위레이어)

moveToabsolute(x,y)

레이어의 위치를 변경합니다 (좌표기준은 화면전체)

moveAbove(레이어)

지정한 레이어를 위로 이동합니다

moveBelow(레이어)

지정한 레이어를 아래로 이동합니다

load(src,width)

외부파일을 지정넓이로 불러옵니다

clipTo(레이어,t,r,b,l)

레이어를 top,right,bottom,left 좌표로 오려냅니다

clipBy(레이어,t,r,b,l)

레이어를 top,right,bottom,left 크기씩 오려냅니다



예제사이트 : http://www.itbank.kr
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기