5. Layer


5.2 Layer세부사항

  이번 장에서는 레이어 Tag에 대한 상세한 자료를 담았다.

  • 속 성

    • above : 현재의 레이어를 최상위에 놓는다.
    • background : 배경그림
    • below : 새로 작성된 레이어를 현재 레이어 바로 아래에 놓는다.
    • bgcolor : 바탕색
    • clip(left, top, right, bottom) : 레이어의 크기(창과 같은 개념이다.)
    • height, width : 레이어의 높이, 너비
    • ID, Name : Name과 같이 유일한 이름을 부여하는데 사용한다.
    • left, top : 레이어의 위치를 지정한다.
    • parentLayer : 현재의 레이어를 포함하는 부모 레이어 객체
    • SRC : 소스코드의 위치
    • siblingAbove : 부모레이어 바로위의 레이어
    • siblingBelow : 부모레이어 바로아래 레이어
    • visibility : 가시 속성, show, hide가능
    • z-index : 레이어의 z좌표, ( 즉, 카드상태에서의 위치, 3차원 좌표치 )

  • 관련 이벤트

    • onBlur : 레이어가 초점을 잃는 경우에 불린다.
    • onFocus : 레이어가 초점을 얻는 경우에 불린다.
    • onLoad : 해당 레이어가 완전히 로드된 시점에서 불린다.
    • onMouseOut : 마우스 커서가 레이어를 벗어나는 시점에 불린다.
    • onMouseOver : 마우스 커서가 레이어 안에 들어오는 시점에 불린다.

  • 지원 메소드

    • captureEvents() : 모든 사용자의 Event를 받아 들인다.( 해당 윈도우를 벗 어났어도 항상 가져온다.)
    • load(source, width) : source에 정의된 파일을 읽어들여서 해당 레이어를 바 꾼다. 폭은 width
    • moveAbove(layer) : 레이어를 상위로 이동
    • moveBelow(layer) : 레이러를 하위로 이동
    • moveBy(x,y) : 레이어를 (x, y)로 이동시킨다.(상대좌표)
    • moveTo(x,y) : 레이어를 (x, y)로 이동시킨다.(절대좌표 in 레이어)
    • moveToAbsolute(x,y) : 레이어를 (x, y)로 이동시킨다.(절대좌표 in 문서)
    • releaseEvents(eventType) : captureEvent를 풀어준다.
    • resizeBy(width,height) : 레이어의 크기변경 (상대크기)
    • resizeTo(width,height) : 레이어의 크기변경 (절대크기)
    • routeEvent(event) : 해당 이벤트를 윈도우에 되돌려 준다

  • 레이어의 이동

    레이어의 top, left속성값을 변경하여 레이어의 위치를 변경 시킬 수 있다.


예제 5 : 다음 예는 버튼을 두고서 클릭할 때마다 레이어의 위치를 이동하게 만드는 예제이다.( 당연히 네비게이터 4.0이상을 써야겠죠?)

  레이어 태그는 사용하기 아주 편리하지만 단점이라면, 네비게이터 4.0이상에서만 작동하고 익스플로러에서는 작동이 안된다는 점이다.

- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master