12장 레이어
레이어란 무엇인가?
레이어를 이용하면 이미지나 텍스트와 같은 객체들의 절대위치를 지정할 수 있다. 이뿐 아니라 HTML 페이지상에서 이러한 객체들을 이동시킬 수 도 있으며 그 객체들을 상황에 따라 숨기거나 보여줄 수 도 있다.
레이어는 또한 다른 종이들처럼 서로 중첩시킬 수 도 있다. 예전의 웹페이지에서는 하나의 이미지가 차지하고 있는 공간은 절대로 다른 텍스트나 그림들이 위치할 수 없었지만 레이어가 생긴 이후로 이러한 불가능이 가능으로 바뀐 것이다. 레이어중 이러한 특징을 가진 레이어를 투명레이어(transparent layer)라고 한다. 투명레이어는 그 밑에 위치한 레이어의 내용이 그대로 비쳐 드러나는 레이어인것이다.
<layer>와 <ilayer>는 넷스케이프에서만 인식가능하다. 반면 <div>는 인터넷 익스플로러와 넷스케이프에서 모두 지원되나 브라우저가 넷스케이프일 경우 <layer>가 넷스케이프에서 지원받는 만큼의 충분한 기능을 제공하진 못한다. 여기서는 두 브라우저에서 모두 사용가능한 <div> 태그를 중심으로 알아보겠다.
레이어 다루기
사용법
<div [레이어 특성] 또는 [이벤트 핸들러]>
레이어 내부의 내용
</div>
레어이 접근하기
다음과 같은 DIV 태그가 있다고 하자.
<DIV ID="blockDiv" STYLE="position: absolute;
left: 50; top: 100; width: 30;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>
넷스케이프의 경우 CSS-P 요소의 속성값에 접근방법
document.blockDiv.propertyName
=document.layers["blockDiv"].propertyName
인터넷 익스플로러의 경우에는 다음과 같다.
document.all.blockDiv.style.propertyName
= document.all["blockDiv"].style.propertyName
= blockDiv.style.propertyName
레이어 속성
ID : 레이어의 이름
javascript로 layer를 다룰 때 유용하게 쓰인다.
값(임의의 단어)
BACKGROUND-COLOR : 레이어 배경색.
값(색 이름 혹은 색 코드)
BACKGROUND-IMAGE : 레이어 배경 이미지.
값(URL:(배경 이미지의 위치))
LEFT/TOP : 레이어 왼쪽/위로부터의 위치.
값(픽셀)
WIDTH/HEIGHT : 레이어의 넓이/높이.
값(픽셀)
Z-INDEX : 겹친 레이어들의 순서.
값(숫자 1 ~)
VISIBILITY : 레이어의 보임/숨김을 결정.
값(visuble, hidden)
DISPLAY : 레이어의 영역을 보임/숨김을 결정.
값(none)
position: 위치를 지정시 반드시 먼저 입력
값(absolute)
[예제 1] 왼쪽에서 100픽셀 위에서 100픽셀 떨어진 곳에 배경색이 ffaaff인 넓이가 80, 높이가 80인 레이어 구성.
<div id="text1" style="position: absolute; left: 100; top: 100; width: 80; height: 80; background-color: ffaaff"> 레이어 테스트
</div>
[예제 2] 레이어를 숨겨보자
<div style="visibility: hidden">
레이어 테스트
</div>
자바스크립트로 레이어 다루기
자바스크립트 레이어 속성
name : 레이어의 이름
값(임의의 단어)
background : 레이어 배경색.
값(색 이름 혹은 색 코드)
left/top : 레이어 왼쪽/위로부터의 위치.
값(픽셀)
width/height : 레이어의 넓이/높이.
값(픽셀)
zIndex : 겹친 레이어들의 순서.
값(숫자 1 ~)
visibility : 레이어의 보임/숨김을 결정.
값(show, hide, inherit)
[예제 1] 자바스크립트로 배경색을 빨간색으로 지정
<script language=javascript>
function set_bgcolor() {
document.all.test2.style.background ='red';
}
</script>
<body>
<div id=test2 style="position:absolute; left:100; top:100; width:150; height:50" >
레이어 테스트
</div>
<a href="javascript:set_bgcolor()"> 예제실행 </a>
</body>
레이어와 자바스크립트
아래의 예제에서 우리는 버튼을 눌렀을 때 레이어가 안보이게 되는 경우를 볼 것이다.
화면에 보여지고 있는 레이어를 버튼을 눌러 감출것이다. 아래의 버튼을 눌러 실행결과를 확인해보자.
[FrontPage 결과 저장 구성 요소]
이것은 레이어안의 문자열입니다.
<html>
<head>
<script language="JavaScript">
function showHide() {
if (document.all["myText"].style.visibility == "visible")
document.all["myText"].style.visibility= "hidden"
else
document.all["myText"].style.visibility= "visible";
}
}
</script>
</head>
<body>
<div id="myText" style="position: absolute; visibility: visible">
이것은 레이어안의 문자열입니다!!!
</div><p>
<br><br><p>
<form>
<input type="button" value="레이어 표시하기/감추기" onClick="showHide()">
</form>
</body>
</html>
레이어 이동시키기
여기서는 하나의 실행예제로서 레이어에 움직임을 주려고 한다. 아래의 결과에서 보이듯 이것은 마치 상태바에 흐르는 문자열인 스크롤러 기능과 비슷하게 보인다.
레이어의 left와 top속성은 레이어의 위치를 지정하는 속성으로 이값에 변화를 줌으로써 레이어의 위치를 쉽게 바꿀 수 있다.
document.layers["myText2"].left = 200;
실행
이것은 레이어안의 문자열입니다!!!
<html>
<head>
<script language="JavaScript">
pos = 0;
direction = true;
function move() {
if (pos < 0) direction = true;
if (pos > 200) direction = false;
if (direction) pos++;
else pos--;
document.all["myText2"].style.left = pos;
}
</script></head>
<body onLoad="setInterval('move()',20)">
<div id="myText2" style="position: absolute; visibility: visible; left: 50; top: 100; width: 500; height: 20">
<font color=blue>이것은 레이어안의 문자열입니다!!!</font>
</div>
<br>
</body></html>
onmouseover와 onmouseout 이벤트를 이용한 레이어
임의의 위치에 레이어를 나타내보자
연습 이곳은 시험
테스트 중입니다.
<html>
<head>
<script language="javascript">
function show( able){
document.all.layer1.style.visibility= able
}
</script></head>
<body>
<div id="layer1" style="position: absolute;left: 100; top: 20; width: 150; visibility: hidden; background-color: 00ff00" >
이곳은 시험<BR> 테스트 중입니다.
</div>
<a href="#" onmouseover="show('visible')" onmouseout="show('hidden')" >연습</a>
</body> </html>
Comments List