레이어(Layer)는 HTML문서의 일부분을 독립적인 요소로 간주하는 부분이다. 즉 하나의 HTML문서에
여러장의 카드를 작성해서 가지고 있다가 필요에 따라서 각 카드를 움직이게 하거나, 필요한 카드의 내용만
화면에 출력하게 되는 것으로, 별도로 서버에 갔다오는일 없이 다양한 사용자의 요구에 반응할 수 있는 것이
장점이다.
레이어를 나타낼때 쓰이는 Tag는 네비게이터의 경우는 <LAYER></LAYER>가 있고, 익스플로러의 경우는
<DIV></DIV>와 CSS를 혼합 사용하여 LAYER기능을 표현 할 수 있다. ( 현재 상태로는 레이어대해서 두
브라우저가 각각 별도의 방식으로 지원하고 있으므로 주의하도록 하자.)
5.1 LAYER Tag의 사용
먼저 Netscape에서만 작동되는 Layer Tag에 대해서 살펴보자.
만일, 나는 죽어도 Netscape를 안쓰겠다는 사람은 다음페이지로 이동하라!
- 일반적인 사용예 : 별도의 속성 지정없이 사용하면, 일반적인 HTML문서처럼 그냥 죽 나타난다.
예)
물론 Layer Tag안에 일반적인 HTML의 다른 Tag들도 사용할 수 있다.
<html>
<body>
TEST
<layer>test, test</layer>
</body>
</html> |
- 위치 지정 속성 : 각 레이어의 시작위치(브라우저 화면상의 절대적인 위치)와 폭을 지정할 수 있다. 기본
단위는 픽셀이지만 인치, 센티미터, 퍼센트등과 같은 단위를 사용할 수 있다.( 스타일 시트의 font-size 속성 참조 )
- top : 수직 좌표
- left : 수평 좌표
- width : 해당 레이어의 폭
<layer top=100 left=100 width=100>
.................
</layer> |
- 기타 속성 : 레이어 태그안에 일반적인 HTML 태그를 넣어서 색상이나,
크기등을 모두 조절할 수있지만, 레이어 단위로 조절할 수 있는 속성이 있다.
- bgcolor : 레이어 전체의 배경색을 한번에 지정한다.
- visibility : hide, show를 지정할 수 있다.
예제 4 : 이 예제는 레이어를 이용하여
4개의 레이어를 버튼을 이용하여 Toggle시키는 예제이다. 주의) 네비게이터 4.0 이상필요
보긴 봤는데 도대체 뭔소린지 모를 수도 있다. 걱정하지 말라. 다음 페이지에 레이어에 대한 자세한
해부가 준비되어있다.
- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)
|
DHTML이란?
Layer