5. Layer


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

Copyright ⓒ 1997 ~, Deadfire Program Master