웹마스터 팁
레이어의 개념 및 기초 지식
2008.10.01 09:54
레이어 개념잡기
웹문서에서의 레이어(Layer)란 브라우저 내의 문서의 위치와 관계없이 자유자재로 새로운 영역을 만들 수 있는 기술입니다. 레이어는 원래 네츠케이프 4.0부터 적용되기 시작하여 현재는 익스플로러에서도 스타일시트와 <DIV> 혹은 <SPAN> 태그의 조합으로 널리 사용되고 있습니다. 사실 MS 에서는 레이어 라는 이름보다도 "컨테이너" 라는 이름으로 불리워지기를 원하고 있습니다
즉, 네츠케이프에서의 레이어는 <Layer></Layer> 태그에의해 생성할 수 있고, 익스플로러에서는 스타일시트와 <DIV> 혹은 <SPAN> 라는 태그로 생성할 수 있습니다.
레이어를 사용하면 원하는 위치에 좌표값을 조절하여 고정된 위치에 글자나 이미지 등을 출력할 수 있습니다.
레이어 에서의 위치와 영역
|
|
| ||||||||||
또한 레이어 내에 또다른 하위 레이어가 존재한다면 하위레이어의 LEFT 좌표와 TOP 좌표는 상위레이어의 기준점을 기준으로 합니다.
레이어의 형식
|
네츠케이프 (반드시 BODY 부분에 위치) |
익스플로러 |
|
<LAYER ID="레이어명" LEFT="X좌표값" TOP="Y좌표값" WIDTH="레이어의 너비" HEIGHT="레이어의 높이"> |
<STYLE>
<DIV ID="레이어이름"> |
자바스크립트에서의 레이어 접근 방식
기본적으로 레이어 객체는 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" |
아래 소스코드를 실행 해 볼까요?
|
<html> function j_hide() {
</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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| [JavaScript] 전체화면으로 페이지 열기 [2] | SM | 2002.02.24 |
| [JavaScript] 텍스트 상자에서 메세지가 타이핑 됩니다 | SM | 2002.02.24 |
| [JavaScript] 랜덤 듀레이션 효과 - 페이지 들어오고 나갈때 벗겨지는 효과 보여주기 [1] | SM | 2002.02.24 |
| [JavaScript] 창의 사이즈 변경 금지 시키기 | SM | 2002.02.24 |
| [JavaScript] 폼 버튼을 클릭하면 경고 메세지 보내기 | SM | 2002.02.24 |
| [JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자! [3] | 티르 | 2002.01.24 |
| 페이지마다 타이틀 변경하기 [3] | WOWpc | 2001.10.10 |
| DHTM 을 이용한 마우스 오른쪽의 메뉴 만들기.. [11] | 허진규 | 2001.03.30 |
| [Tip] 페이지 이동중이라고 표시해보자~ ^_^ [10] | BiHon | 2001.03.28 |
| 자신의 홈페이지에 웹문서 검색엔진 장착하기 [4] | 지하넷 | 2009.05.04 |
노프레임 홈페이지 만들기 강좌
 | H.N커뮤니티 | 2009.02.28 |
| 레이어의 개념 및 기초 지식 [1] | ITBANK.kr | 2008.10.01 |
| SOUND 다루기 - 1 | ITBANK.kr | 2008.10.01 |
| 아이프레임 스크롤바를 투명하게 | wwolf | 2008.09.21 |
| page에 웹페이지의 보드(게시판 ) 삽입 [2] | parkys | 2007.10.24 |
| CSS 사용시 익스플로러 버그 해결하기. [3] | NineTail | 2007.08.28 |
| 폼방식으로 데이터를 넘길 때... [5] | 제로보드유저 | 2007.08.23 |
| html 웹자료제작,교과목제작[사용법 동영상강좌] [3] | parkys | 2007.05.11 |
| 프레임 홈페이지 만들때 유용한 팁 [2] | 지오 | 2007.03.24 |
| 간지님 faq 따라하기.... [1] | 이진수 | 2007.01.11 |
싸가지 없는 것들 .. ;