고정 헤더 영역
상세 컨텐츠
본문
8. Positioned HTML 컨텐트 블럭 정의하기
이 장에서는 HTML 컨텐트 블럭에 대한 절대 위치나 상대 위치를 지정하는
방법에 대해 설명한다. 위치가 정해진 HTML 컨텐트 블럭을 지정하는
모든 특성들을 나열한 후, <NOLAYER> 태그를 설명하고, 위치가 정해진
HTML 컨텐트 블럭에서의 애플릿과 플러그인, 폼에 대해 설명한다.
8.1 절대 위치와 상대 위치
■ 절대 위치
레이어가 절대 위치를 가지고 있을 경우, 포함하는 레이어 안에 위치를 지정할
수도 있고, 혹은 다른 레이어 안에 있지 않을 때는 문서 안에 그 위치를
지정할 수 있다. left 속성이나 top 속성, 혹은 프로퍼티를 설정해서
레이어의 상단과 좌측 구석의 정확한 위치를 결정한다.
절대 위치를 사용하는 레이어에서 left속성이나 top 속성, 혹은 프로퍼티에
값을 지정하지 않으면 포함하는 레이어에서 현재 위치의 값이 디폴트 값이
된다. 최상위 레벨에 있는 레이어에 대해서는 문서를포함하는 레이어로
생각해도 된다.
절대 위치를 사용한 레이어는 한줄로 나타나지 않고, HTML 문서의 어디에나
나타날 수 있으며, 문서에서 공간을 차지하지 않는다.
절대 위치를 갖는 레이어를 만들려면 <LAYER>와 </LAYER> 태그를 사용한다.스타일로 정의된 레이어에서는 position 속성을 absolute로 지정함으로써
간단히 절대 위치를 갖는 레이어를 만든다.
예:
<LAYER ID=layer1 TOP=200 LEFT=260>
<P>Layer 1 content goes here</P>
</LAYER>
<STYLE type="text/css">
<!-
#layer1 {position:absolute; top:200px; left260px;}
-->
</STYLE>
■ 상대 위치
상대 위치를 갖는 레이어는 흔히 인플로(inflow) 레이어라고 하는데,
문서 흐름에서 끌고 가는 위치 아무데나 나타난다. 인플로 레이어는
문서 흐름 상에서 공간을 차지하기 때문에 양방향 인플로로 볼 수도 있고,
다른 HTML 요소가 차지하는 인라인 공간을 공유하기 때문에 인라인(inline)으로 보기도 한다. 인플로 레이어가 다른 줄에 나타나기를 원한다면
레이어 앞에 여백을 삽입하거나, <DIV> 태그에서 레이어를 래핑(wrap)한다.
상대 위치를 갖는 레이어에서는 left나 top, 또는 속성(properties)를
사용하여 문서의 현재 위치에서 레이어의 좌측 상단 구석까지의 가지거리
(오프셋, offset)을 지정할 수 있다.
<ILAYER>와 </ILAYER> 태그를 사용하여 인플로 레이어를 만들 수 있다.
스타일로 정의된 레이어에 있어서는 position 프로퍼티를 relative로 설정하여
인플로 레이어를 만든다.
예:
<ILAYER ID=layer2>
<P>Layer 2 content goes here</P>
</ILAYER>
<STYLE type="text/css">
<!--
#layer2 {position:relative;}
-->
</STYLE>
8.2 속성(attribute)과 프로퍼티(property)
이 절에서는 레이어를 만들기 위해 <LAYER> 태그를 사용할지 <ILAYER>
태그를 사용할지, 레이어를 스타일로 정의할지 등, 레이어를 정의할 때
지정할 수 있는 속성과 프로퍼티에 대해 설명한다.
이 절에서는 다음과 같이 용어들을 간략히 줄여서 사용하기로 한다.
* 매개변수(parameter) : HTML 속성 혹은 스타일 프로퍼티
예) <LAYER> 태그와 함께 사용할 수 있는 ID 속성
ID 스타일 프로퍼티
* 속성(attribute) : HTML 태그에 대한 속성 * 프로퍼티(property) : 스타일 프로퍼티
<LAYER> 태그는 항상 픽셀 단위를 사용하기 때문에 사용자가 측정 단위를
따로 명시하지 않아도 된다. 그러나, 스타일 프로퍼티에서는, 숫자값을
프로퍼티에 대해 항상 측정 단위를 명시해야 한다.
■ POSITION
#block1 {position:absolute;}
#block2 {psoition:relative;}
position 프로퍼티는 스타일로 정의된 레이어에만 적용된다. 이는 스타일이위치가 정해진 HTML 블럭을 표시하고 있음을 나타낸다. 그 값은 absolute이거나
relative이다.
position 프로퍼티가 absolute인 스타일은 <LAYER> 태그로 만든 레이어와
비슷한 레이어를 만든다. position 프로퍼티가 relative인 스타일은 <ILAYER>
태그로 만든 레이어와 비슷한 레이어를 만든다.
■ ID
<LAYER ID=block1>
#block1 {position:absolute;} /* CSS */
ID 매개변수는 레이어에 대한 식별 핸들이거나 이름으로, ID는 반드시
영문자로 시작해야 한다. (ID 속성을 이전에는 NAME이라고 했었다. NAME
속성을 아직까지 사용하고 있기는 하지만 <LAYER> 태그에서만 동작하기
때문에 쓰지 않기를 권한다.)
레이어의 id를 HTML 내에서, 그리고 자바스크립트 같은 외부 스크립트
언어에서 레이어를 참조하기 위한 이름으로 사용할 수도 있다.
이 속성은 선택사항이고, 기본적으로 레이어에는 이름이 할당되어 있지
않다. 즉, 레이어 id가 없다.
■ LEFT와 TOP
LEFT 매개변수와 TOP 매개변수는 포함하는 레이어 안에서의 레이어 좌측상단 구석의 수평 위치와 수직 위치를 나타낸다. 레이어가 최상위 단계에
있을 경우에는 문서 내의 레이어 좌측 상단 구석의 위치를 나타낸다.
이 두 가지 매개변수는 선택사항이고, 기본값은 레이어 컨텐트가 레이어에
포함되어 있지 않은 것과 같은 수평 위치값과 수직 위치값이다. 값은
반드시 정수여야 한다.
절대 위치를 가지는 레이어에서 원점은 문서나 포함하는 레이어의 좌측 상단
구석이고, 아래로 갈 수록, 그리고 오른쪽으로 갈 수록 그 값은 증가한다.
<LAYER> 태그에서 사용되는 LEFT와 TOP의 기본 단위는 픽셀이다. 그러나,
레이어를 스타일로 정의하면 단위를 지정해 주어야 한다.
예:
=================
<LAYER> 태그 구문
=================
<LAYER BGCOLOR="yellow" TOP=300 LEFT=70
WIDTH=400 HEIGHT=200>
<P>Paragraph in layer with absolute position.</P>
<LAYER BGCOLOR=teal TOP=50 LEFT=20
WIDTH=200 HEIGHT=100>
<P>Paragraph in embedded layer with absolute position</P>
</LAYER>
</LAYER>
========
CSS 구문
========
<DIV STYLE="position:absolute; background-color:yellow;
top:30px; left:70px; width:200px; height:200px;
border-width:1;"
<P>Paragraph in layer with absolute position.</P>
<DIV STYLE="position:absolute; background-color:teal;
top:30px; left:20px; width:150px; height:120px;
border-width:1px;">
<P>Paragraph in embedded layer with absolute position.</P>
</DIV>
</DIV>
상대 위치를 가지는 레이어에서 원점은 포함하는 레이어나 페이지의 상단 좌측
구석이 아니라, 흐름에 있어서 레이어의 "원래" 위치가 된다. LEFT와 TOP을
사용하여 흐름에서의 원래 위치에서 상대적 위치 레이어까지의 가지거리
(offset)를 지정할 수 있다.
=================
<LAYER> 태그 구문
=================
<P>Paragraph above relatively positioned layer.</P>
<P><ILAYER LEFT=2>
This relatively positioned layer is displaced 2 pixels to the right of
its normal posions.
</ILAYER></P>
<P>Paragraph below relatively positioned layer</P>
<P>This <ILAYER TOP=3>word</ILAYER> is nudged down 3 pixels.</P>
========
CSS 구문========
<P>Paragraph above relatively positioned layer.</P>
<P STYLE="position:relative; left:2px;">
This relatively positioned layer is displaced 2 pixels to the right of
its normal position.</P>
<P>Paragraph below reatively positioned layer.</P>
<P>This <SPAN STYLE="position:relative; top:3px;>word </SPAN> is nudged
down 3 pixels.</P>
아래의 ㅗ드는 스타일로 정의된 상대 위치 레이어의 또다른 예이다.
<STYLE TYPE="text/css">
<!--
all.UP {position:relative; top:-10pt;}
all.DOWN {position:relative; top:10pt;}
-->
</STYLE>
<BODY>
<P>This <SPAN CLASS=DOWN>text </SPAN>goes <SPAN CLASS=UP>up</SPAN>
and <SPAN CLASS=DOWN>down, </SPAN>up
<SPAN CLASS=DOWN>and <SPAN CLASS=DOWN>down. </SPAN></SPAN>
</P>
</BODY>
이 예제의 결과는 다음 페이지를 참고한다.
http://developer.netscape.com/library/documentation/communicator/
dynhtml/updown.htm
(참고: This text goes up and down, up an down. 이라는 텍스트가
파도 모양으로 위아래로 디스플레이된다.)
▶ 레이어 배치를 위해 인라인 자바스크립트 사용하기
<LAYER> 태그를 사용하면, 인라인 자바스크립트를 사용하여 레이어를
배치할 수도 있다.
아래의 예제는 인라인 자바스크립트 코드를 사용한 것으로, ID가 suspect1
인 레이어를 정의하고, 이어서 첫번째 레이어의 하단으로부터 10 픽셀
밑에 있는, ID가 suspect2인 또다른 레이어를 정의한다.
<LAYER ID="suspect1">
<IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">
<P>Name = Al Capone
<P>Residence = Chicago
</LAYER>
<LAYER ID="suspect2">
LEFT=&{"&"}; {window.document.suspect1.left);
TOP=&{"&"}; {window.document.suspect1.top +
document.suspect1.document.height + 10);>
<IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpb">
<P>Name = Lucky Luciano
<P>Residence = New York
</LAYER>
여기에서 주의해야 할 것이 있다.
* 닫는 괄호 밖에는 세미콜론을 사용해야 한다.
* top 값은 레이어에서 가져오지만 height 값은 레이어의 문서에 가져온다.
레이어에 대한 스타일 정의에서 인라인 자바스크립트 사용법에 대해서
모른다고 해도, 미리 정의된 레이어의 위치를 다시 정하기 위해
자바스크립트를 사용할 수 있다.
■ PAGEX 와 PAGEY
<LAYER PAGEX=100 PAGEY=100>
이 속성들은 <LAYER> 태그와 함께 사용해야 하고, 이와 동일한 스타일
프로퍼티는 없다.
PAGEX와 PAGEY는 둘러싸고 잇는 레이어가 아니라 둘러싸고 있는 문서에 대해
상대적인 레이어의 좌측 상단 수직/수평 위치를 픽셀 단위로 지정한다.
■ SRC 와 source-include
<LAYER SRC="htmlsource/meals/special.html>
source-include:url("htmlsource/meals/special.html"); /* CSS */
<LAYER> 태그에 대한 SRC 속성과 source-include 스타일 프로퍼티는
레이어에 디스플레이될 HTML 방식의 텍스트가 있는 외부 파일을 지정한다.
(주의 : source-include 스타일 프로퍼티는 W3C에서 채택되지 않았다.)
지정된 파일은 임의의 HTML 문서를 가지고 있을 수 있다.
아래 코드는 SRC 속성과 source-include 프로퍼티의 사용례이다.
========
CSS 구문
========
<STYLE TYPE="text/css">
<!--
#layer1 {
position:absolute;
top:50pt; left:250pt; width:175pt;
source-include:url("content1.htm");
background-color:purple;
color:yellow; border-width:1; }
-->
</STYLE>
<BODY BGCOLOR=white>
<DIV ID=layer1>
</DIV>
=================
<LAYER> 태그 구문=================
<LAYER top=50 left=250 width=175 src="content1.htm" BGCOLOR="#8888FF">
</LAYER>
</BODY>
위 예제의 결과를 보려면
http://developer.netscape.com/library/documentation/communicator/
dynhtml/source1.htm
소스 파일에는 자바스크립트 코드를 포함시킬 수 있다. 소스 파일에 있는모든 레이어는 컨텐트를 제공하는 소스 파일에 대한 레이어의 자식 레이어로
간주된다.
외부 소스를 레이어의 컨텐트로 사용하는 것은 레이어의 컨텐트를 동적으로
변경하고자 할 경우 특히 유용하다. 예를 들어, 레스토랑 홈페이지를 만들 때
그날의 특식을 소개하는 레이어를 만들 수 있다. 아침마다 주방장이 그날의
특식을 결정한 후에 그 음식을 설명하는 "special.htm"만 간단히 편집하면
된다.
즉, 주방장이 그날의 특식 정보를 수정하기 위해 전체 페이지를 재작성하지
않아도 된다.
또한 레이어를 지원하지 않는 브라우저를 위해 또다른 컨텐트를 제공하고자
할 때도 외부 소스를 레이어 컨텐트로 사용할 수도 있다. 이 경우, <NOLAYER>태그를 사용하면 레어를 지원하지 않는 브라우저에 디스플레이될 컨텐트를
에워쌀 수 있다.
------------------------------------------------------------------------------
------------------------------------------------------------------------------
*
■ WIDTH
<LAYER WIDT=200>
<LAYER WIDHT="80%">
width:200px; /* CSS */
width:80%; /* CSS */
WIDTH 매개변수는 레이어 컨텐트 전체를 포괄하는(wrap) 폭을 결정한다.
폭은 정수값이나 포함하는 레이어 폭에 대한 백분율값으로 표현할 수 있다.
그러나, 이미지 같이 지정된 폭을 넘어서는, 레이어가 모두 포괄할 수
없는 요소를 가지고 있을 경우, 그에 맞춰 실제 레이어 폭이 확장된다.
이 매개변수가 명시되어 있지 않을 경우, 레이어 컨텐트는 포함하는 레이어의
오른쪽 경계까지 포괄한다.
■ HEIGHT
<LAYER HEIGHT=200>
<LAYER HEIGHT= "50%">
height:200px; /* CSS */
height:50%; /* CSS */
HEIGHT 매개변수는 레이어의 클리핑 영역의 초기 높이를 결정한다.
높이는 정수값이나 포함하는 레이어의 높이에 대한 백분율값으로 표현한다.
그러나, 지정된 높이로 다 포괄할 수 없을 경우, 레이어는 모든 컨텐트를
포함할 수 있을 정도로 높이를 확장한다.
HEIGHT 매개변수의 주된 목적은 백분율값으로 높이를 지정하는 자식 레이어의
참조 높이로 동작하게 하는 것이다.
기본적으로 높이는 모든 레이어 컨텐트를 포함할 수 있는 최소 높이이다.
■ CLIP
<LAYER CLIP="20,20,50,100">
clip:rect(0,100,100,0); /* CSS */
CLIP 매개변수는 레이어의 클리핑 사각형을 정의한다. 즉, 레이어의
가시 영역의 테두리를 결정하는 것이다.
값은 네 가지 숫자로 이루어져 있는데, 쉼표로 분리되어 있고, 따옴표를
생략하게 되면 네 가지 숫자 간에 여백을 두지는 않았는지 확인해야 한다.
숫자들은 차례로 왼쪽, 상단, 오른쪽 하단 값이다. 왼쪽값과 오른쪽 값은
레이어 왼쪽 모서리부터의 거리를 픽셀 단위로 지정한 것이고, 상단값과하단값은 레이어 상단 모서리부터의 거리를 픽셀 단위로 지정한 것이다.
네 가지 값 모두 픽셀 단위이다. 이 값을 두 개의 숫자로만 지정할 수도 있는데
이 경우, 왼쪽값과 상단값은 0이 된다.
예:
CLIP="10,20"
은
CLIP="0,0,10,20"과 똑같다.
CLIP 속성이 생략되면 레이어의 클리핑 사각형은 레이어의 WIDTH와 HEIGHT,
그리고 컨텐트에 의해 결정된다. 이들 값 중 한가지도 주어지지 않으면왼쪽값 0, 상단값 0, 그리고 오른쪽값은 래핑(wrapping) 폭, 높이는 모든
컨텐트를 표시하기 위해 필요한 높이로 자동 설정된다.
■ Z-INDEX, ABOVE, BELOW
<LAYER Z-INDEX=3>
<LAYER ABOVE=layer1>
<LAYER BELOW=greenlayer>
z-index:3; /* CSS */
ABOVE와 BELOW 속성은 <LAYER> 태그와 같이 사용되고, 이와 동일한 스타일
프로퍼티는 없다.
이들 매개변수는 레이어의 Z축 순서(쌓는 순서)를 지정한다. 이들 매개변수
중 하나를 설정하면 기존 모든 레이어의 최상위에 새로운 레이어를
갖다 놓으면서 결정된 기본 순서를 무시한다. Z-INDEX나 ABOVE,
BELOW 매개변수 중 주어진 레이어를 위해 사용되는 것은 한가지 뿐이다.
Z-INDEX 매개변수는 레이어의 z축 순서를 정수값으로 지정할 수 있게
만들어준다. Z-INDEX 값이 좀더 큰 레이어는 값이 작은 레이어보다 위에
쌓인다. Z-INDEX 값은 양수만 사용할 수 있다.
ABOVE 속성은 레이어를 즉시 새로 만들어진 레이어 최상위에 지정한다.
즉, 새로운 레이어는 ABOVE 속성에 의해 지정된 레이어 밑에 배치된다.(ABOVE와 BELOW 속성은 스타일 프로퍼티로 사용할 수 없다.)
마찬가지로, BELOW 속성은 새로 만들어진 레이어 밑에 레이어를 지정한다.
다른 속성을 위해 named 레이어가 존재해야 한다. 다른 레이어를 앞으로
참조하면 (ABOVE 속성이나 BELOW 속성이 나타나지 않은 것처럼)
기본 레이어를 만든다.
현재 포함되어 있는 모든 레이어는 쌓기 순서에 따라 그 부모 레이어
위에 놓이게 된다. Z-INDEX와 ABOVE, BELOW 값은 형제 레이어에 대해
상대적이다. 즉, 다른 레이어들도 같은 부모 레이어를 가진다.
■ VISIBILITY
<LAYER VISIBILITY=SHOW>
<LAYER VISIBILITY=HIDE>
<LAYER VISIBILITY=INHERIT>
visibility:show; /* CSS */
visibility:hide; /* CSS */
visibility:inherity /* CSS */
VISIBILITY 매개변수는 레이어가 보이는지의 여부를 결정한다. HIDE는
레이어를 감추는 것이고, SHOW는 레이어를 나타나게 하는 것이며,
INHERIT를 선택하면 부모 레이어와 같은 가시성(visibility)를 가지게 된다.최상위 단계의 레이어는 본문 문서가 항상 보이기 때문에 INHERIT 값이나
SHOW 값은 같은 효과를 낸다.
기본적으로, 레이어는 그 부모 레이어와 같은 가시성을 가진다. 즉,
VISIBILITY 속성 값은 INHERIT이다.
레이어의 visibility가 SHOW로 되어 있어도 불투명한 레이어가 최상위에
놓여 있지 않아야 볼 수 있다.
상대 위치를 가진 레이어의 visiblity가 HIDE라면 레이어 컨텐트는 볼
수 없지만, 문서 흐름 내에서 그 공간은 계속 차지하고 있다.
■BGCOLOR와 BACKGROUND-COLOR
<LAYER BGCOLOR="#00FF00">
<LAYER BGCOLOR="green">
background-color:green;
background-color:00FF00;
BGCOLOR 속성과 background-color 스타일 프로퍼티는 <BODY> 태그의
BGCOLOR 속성과 마찬가지로 HTML 컨텐트 블록의 배경색을 정의한다.
배경색은 red 같은 표준 색상 이름이거나 #334455 같은 RGB 값이 된다.
(33은 빨간색, 44는 초록색, 55는 파란색에 대한 16진수 값이다)
기본적으로 레이어는 투명하다.
레이어가 <LAYER> 태그를 사용해서 정의되었다면 배경색은 레이어가
차지하는 사각 영역에 적용된다. 레이어가 스타일로 정의되었다면
배경색은 전체 레이어 영역이 아닌 레이어의 실제 컨텐트에만 적용된다.
스타일에 테두리가 있을 경우, 테두리로 둘러쌓인 영역은 배경색을 사용하지만
이 영역은 계속해서 컨텐트를 포함하고 있어야 한다. 스타일에서 정의된
높이와 폭에 대한 값이 충분히 컨텐트를 디스플레이할 수 있는 영역보다
더 넓은 영역을 지정한다면 실제 컨텐트 밖의 영역은 버려진다.
넷스케이프 네비게이터 4.0도 layer-background-color CSS 스타일
프로퍼티를 지원하고, 따라서 전체 레이어의 배경색을 설정할 수 있지만,
이 프로퍼티는 W3C에서 채택되지 않았다.
이것들을 말로 설명하는 것은 어렵지만 결과를 보면 쉽게 알 수 있다.
결과는 다음과 같은 페이지에 있다:
http://developer.netscape.com/library/documnet/communicator/
dynhtml/bgtest.htm
■ BACKGROUND와 BACKGROUND-IMAGE
<LAYER BACKGROUND="image/dogbg.gif">
background-image:url("image/dogbg.gif"); /* CSS */
BACKGROUND 속성과 background-image 스타일 프로퍼티는 HTML 컨텐트블록의 배경 전체에 그려지는 바둑판식 이미지를 나타낸다. 값은 이미지의
URL이다.
기본적으로 레이어는 투명하다.
넷스케이프 네비게이터 4.0은 layer-background-image CSS 스타일 프로퍼티도
지원하므로 스타일을 사용하는 전체 블록에 대한 배경 이미지를 설정할 수
있다. 그러나, 이 프로퍼티는 W3C에서 채택되고 있지 않다.
레이어가 <LAYER> 태그를 사용하여 정의되었다면 배경 이미지는 레이어가
차지하는 사각 영역에 적용된다. 레이어가 스타일로 정의되었다면 배경
이미지는 레어의 실제 컨텐트를 포함하는 영역에만 적용된다. 스타일에서
지정한 폭과 높이가 컨텐트를 디스플레이할 수 있는 충분한 영역을 넘어설
경우, 배경 이미지는 실제 컨텐트를 포괄하는 영역에만 적용된다.
이에 대한 예제 페이지는 다음과 같다:
http://developer.netscape.com/library/document/communicator/
dynhtml/bgimage.htm
■ OnMouseOver, OnMouseOut
이 속성은 <LAYER> 태그에만 적용된다.
<LAYER OnMouseOver="highlight(); return false;">
<LAYER OnMouseOut="dehighlight(); return false;">
이것은 이벤트 핸들러이고, 값은 반드시 함수이거나 자바스크립트 코드여야
한다. OnMouseOver 핸들러는 마우스가 레이어를 클릭했을 때 시작되고,
OnMouseOut 핸들러는 마우스가 레이어를 벗어났을 때 시작된다.
■ OnFocus, OnBlur
이 속성은 <LAYER> 태그에만 적용된다.
OnLoad="dosomething(); return false;"
이것은 이벤트 핸들러이고, 값은 반드시 함수이거나 자바스크립트 코드여야
한다. OnLoad 핸들러는 레이어를 볼 수 있는지의 여부와는 상관없이레이어가 로드될 때 시작된다.
8.3 <NOLAYER> 태그
이미 위치가 정해진 HTML 컨텐트 블록을 포함하는 HTML 파일이
컨텐트 배치 방법을 모르는 브라우저에 표시될 경우, 컨텐트는 배치되지
않은 것처럼 디스플레이된다. 파일에 레이어 기능성을 요구하는 스크립트가
포함되어 있을 경우, 배치(포지셔닝, positioning)를 지원하지 않는 브라우저로
로드되면 자바스크립트 오류를 발생시킬 것이다.
넷스케이프 네비게이터 4가 무시하는 <NOLAYER>와 </NOLAYER> 태그를 사용할
수 있다. 이렇게 하면 컨텐트 배치를 할 수 없는 브라우저에서 디스플레이할
또다른 컨텐트를 만들 수 있다.
<LAYER SRC=layerContent.html></LAYER>
<NOLAYER>
This page would show some really cool things if you had
a browser that can position content.
</NOLAYER>
8.4 애플릿, 플러그인, 폼
레이어는 폼 요소와 애플릿, 플러그인을 포함할 수 있고, 윈도우 형식의요소로 인식한다. 이들 요소들은 포함하는 레이어가 확실하지 않더라도
다른 모든 레이어 위에 떠다니기 때문에 특별하다.
윈도우 형식 요소가 포함하는 레이어의 모서리로 이동하면 요소의 테두리가
레이어의 테두리에 닿자마자 요소가 사라져 버린다. 폼 요소에서는 전체 폼이
아니라 레이어의 테두리에 닿는 부분만 보이지 않는 개별적인 요소가 있다.
그러나, 윈도우 형식 요소들이 포함하는 레이어에 따라 이동하고 visibility를
변경한다는 점에 주의해야 한다.
폼은 레이어를 회전시키지 못한다. 즉, 한 레이어에서 폼의 일부를 가지고,
다른 레이어에서 폼의 다른 부분을 가지지 못한다.
커뮤니케이터는 윈도우가 없는 플러그인을 도입하는데, 윈도우의 최상위에나타나지 않고, 윈도우의 다른 항목 아래에 그려질 수 있는 플러그인이다.
윈도우가 없는 플로그인은 Plug-In 가이드에 설명되어 있다.
Plug-In Guide
http://developer.netscape.com/library/documentation/communicator/
plugin/index.htm
이 장에서는 HTML 컨텐트 블럭에 대한 절대 위치나 상대 위치를 지정하는
방법에 대해 설명한다. 위치가 정해진 HTML 컨텐트 블럭을 지정하는
모든 특성들을 나열한 후, <NOLAYER> 태그를 설명하고, 위치가 정해진
HTML 컨텐트 블럭에서의 애플릿과 플러그인, 폼에 대해 설명한다.
8.1 절대 위치와 상대 위치
■ 절대 위치
레이어가 절대 위치를 가지고 있을 경우, 포함하는 레이어 안에 위치를 지정할
수도 있고, 혹은 다른 레이어 안에 있지 않을 때는 문서 안에 그 위치를
지정할 수 있다. left 속성이나 top 속성, 혹은 프로퍼티를 설정해서
레이어의 상단과 좌측 구석의 정확한 위치를 결정한다.
절대 위치를 사용하는 레이어에서 left속성이나 top 속성, 혹은 프로퍼티에
값을 지정하지 않으면 포함하는 레이어에서 현재 위치의 값이 디폴트 값이
된다. 최상위 레벨에 있는 레이어에 대해서는 문서를포함하는 레이어로
생각해도 된다.
절대 위치를 사용한 레이어는 한줄로 나타나지 않고, HTML 문서의 어디에나
나타날 수 있으며, 문서에서 공간을 차지하지 않는다.
절대 위치를 갖는 레이어를 만들려면 <LAYER>와 </LAYER> 태그를 사용한다.스타일로 정의된 레이어에서는 position 속성을 absolute로 지정함으로써
간단히 절대 위치를 갖는 레이어를 만든다.
예:
<LAYER ID=layer1 TOP=200 LEFT=260>
<P>Layer 1 content goes here</P>
</LAYER>
<STYLE type="text/css">
<!-
#layer1 {position:absolute; top:200px; left260px;}
-->
</STYLE>
■ 상대 위치
상대 위치를 갖는 레이어는 흔히 인플로(inflow) 레이어라고 하는데,
문서 흐름에서 끌고 가는 위치 아무데나 나타난다. 인플로 레이어는
문서 흐름 상에서 공간을 차지하기 때문에 양방향 인플로로 볼 수도 있고,
다른 HTML 요소가 차지하는 인라인 공간을 공유하기 때문에 인라인(inline)으로 보기도 한다. 인플로 레이어가 다른 줄에 나타나기를 원한다면
레이어 앞에 여백을 삽입하거나, <DIV> 태그에서 레이어를 래핑(wrap)한다.
상대 위치를 갖는 레이어에서는 left나 top, 또는 속성(properties)를
사용하여 문서의 현재 위치에서 레이어의 좌측 상단 구석까지의 가지거리
(오프셋, offset)을 지정할 수 있다.
<ILAYER>와 </ILAYER> 태그를 사용하여 인플로 레이어를 만들 수 있다.
스타일로 정의된 레이어에 있어서는 position 프로퍼티를 relative로 설정하여
인플로 레이어를 만든다.
예:
<ILAYER ID=layer2>
<P>Layer 2 content goes here</P>
</ILAYER>
<STYLE type="text/css">
<!--
#layer2 {position:relative;}
-->
</STYLE>
8.2 속성(attribute)과 프로퍼티(property)
이 절에서는 레이어를 만들기 위해 <LAYER> 태그를 사용할지 <ILAYER>
태그를 사용할지, 레이어를 스타일로 정의할지 등, 레이어를 정의할 때
지정할 수 있는 속성과 프로퍼티에 대해 설명한다.
이 절에서는 다음과 같이 용어들을 간략히 줄여서 사용하기로 한다.
* 매개변수(parameter) : HTML 속성 혹은 스타일 프로퍼티
예) <LAYER> 태그와 함께 사용할 수 있는 ID 속성
ID 스타일 프로퍼티
* 속성(attribute) : HTML 태그에 대한 속성 * 프로퍼티(property) : 스타일 프로퍼티
<LAYER> 태그는 항상 픽셀 단위를 사용하기 때문에 사용자가 측정 단위를
따로 명시하지 않아도 된다. 그러나, 스타일 프로퍼티에서는, 숫자값을
프로퍼티에 대해 항상 측정 단위를 명시해야 한다.
■ POSITION
#block1 {position:absolute;}
#block2 {psoition:relative;}
position 프로퍼티는 스타일로 정의된 레이어에만 적용된다. 이는 스타일이위치가 정해진 HTML 블럭을 표시하고 있음을 나타낸다. 그 값은 absolute이거나
relative이다.
position 프로퍼티가 absolute인 스타일은 <LAYER> 태그로 만든 레이어와
비슷한 레이어를 만든다. position 프로퍼티가 relative인 스타일은 <ILAYER>
태그로 만든 레이어와 비슷한 레이어를 만든다.
■ ID
<LAYER ID=block1>
#block1 {position:absolute;} /* CSS */
ID 매개변수는 레이어에 대한 식별 핸들이거나 이름으로, ID는 반드시
영문자로 시작해야 한다. (ID 속성을 이전에는 NAME이라고 했었다. NAME
속성을 아직까지 사용하고 있기는 하지만 <LAYER> 태그에서만 동작하기
때문에 쓰지 않기를 권한다.)
레이어의 id를 HTML 내에서, 그리고 자바스크립트 같은 외부 스크립트
언어에서 레이어를 참조하기 위한 이름으로 사용할 수도 있다.
이 속성은 선택사항이고, 기본적으로 레이어에는 이름이 할당되어 있지
않다. 즉, 레이어 id가 없다.
■ LEFT와 TOP
LEFT 매개변수와 TOP 매개변수는 포함하는 레이어 안에서의 레이어 좌측상단 구석의 수평 위치와 수직 위치를 나타낸다. 레이어가 최상위 단계에
있을 경우에는 문서 내의 레이어 좌측 상단 구석의 위치를 나타낸다.
이 두 가지 매개변수는 선택사항이고, 기본값은 레이어 컨텐트가 레이어에
포함되어 있지 않은 것과 같은 수평 위치값과 수직 위치값이다. 값은
반드시 정수여야 한다.
절대 위치를 가지는 레이어에서 원점은 문서나 포함하는 레이어의 좌측 상단
구석이고, 아래로 갈 수록, 그리고 오른쪽으로 갈 수록 그 값은 증가한다.
<LAYER> 태그에서 사용되는 LEFT와 TOP의 기본 단위는 픽셀이다. 그러나,
레이어를 스타일로 정의하면 단위를 지정해 주어야 한다.
예:
=================
<LAYER> 태그 구문
=================
<LAYER BGCOLOR="yellow" TOP=300 LEFT=70
WIDTH=400 HEIGHT=200>
<P>Paragraph in layer with absolute position.</P>
<LAYER BGCOLOR=teal TOP=50 LEFT=20
WIDTH=200 HEIGHT=100>
<P>Paragraph in embedded layer with absolute position</P>
</LAYER>
</LAYER>
========
CSS 구문
========
<DIV STYLE="position:absolute; background-color:yellow;
top:30px; left:70px; width:200px; height:200px;
border-width:1;"
<P>Paragraph in layer with absolute position.</P>
<DIV STYLE="position:absolute; background-color:teal;
top:30px; left:20px; width:150px; height:120px;
border-width:1px;">
<P>Paragraph in embedded layer with absolute position.</P>
</DIV>
</DIV>
상대 위치를 가지는 레이어에서 원점은 포함하는 레이어나 페이지의 상단 좌측
구석이 아니라, 흐름에 있어서 레이어의 "원래" 위치가 된다. LEFT와 TOP을
사용하여 흐름에서의 원래 위치에서 상대적 위치 레이어까지의 가지거리
(offset)를 지정할 수 있다.
=================
<LAYER> 태그 구문
=================
<P>Paragraph above relatively positioned layer.</P>
<P><ILAYER LEFT=2>
This relatively positioned layer is displaced 2 pixels to the right of
its normal posions.
</ILAYER></P>
<P>Paragraph below relatively positioned layer</P>
<P>This <ILAYER TOP=3>word</ILAYER> is nudged down 3 pixels.</P>
========
CSS 구문========
<P>Paragraph above relatively positioned layer.</P>
<P STYLE="position:relative; left:2px;">
This relatively positioned layer is displaced 2 pixels to the right of
its normal position.</P>
<P>Paragraph below reatively positioned layer.</P>
<P>This <SPAN STYLE="position:relative; top:3px;>word </SPAN> is nudged
down 3 pixels.</P>
아래의 ㅗ드는 스타일로 정의된 상대 위치 레이어의 또다른 예이다.
<STYLE TYPE="text/css">
<!--
all.UP {position:relative; top:-10pt;}
all.DOWN {position:relative; top:10pt;}
-->
</STYLE>
<BODY>
<P>This <SPAN CLASS=DOWN>text </SPAN>goes <SPAN CLASS=UP>up</SPAN>
and <SPAN CLASS=DOWN>down, </SPAN>up
<SPAN CLASS=DOWN>and <SPAN CLASS=DOWN>down. </SPAN></SPAN>
</P>
</BODY>
이 예제의 결과는 다음 페이지를 참고한다.
http://developer.netscape.com/library/documentation/communicator/
dynhtml/updown.htm
(참고: This text goes up and down, up an down. 이라는 텍스트가
파도 모양으로 위아래로 디스플레이된다.)
▶ 레이어 배치를 위해 인라인 자바스크립트 사용하기
<LAYER> 태그를 사용하면, 인라인 자바스크립트를 사용하여 레이어를
배치할 수도 있다.
아래의 예제는 인라인 자바스크립트 코드를 사용한 것으로, ID가 suspect1
인 레이어를 정의하고, 이어서 첫번째 레이어의 하단으로부터 10 픽셀
밑에 있는, ID가 suspect2인 또다른 레이어를 정의한다.
<LAYER ID="suspect1">
<IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">
<P>Name = Al Capone
<P>Residence = Chicago
</LAYER>
<LAYER ID="suspect2">
LEFT=&{"&"}; {window.document.suspect1.left);
TOP=&{"&"}; {window.document.suspect1.top +
document.suspect1.document.height + 10);>
<IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpb">
<P>Name = Lucky Luciano
<P>Residence = New York
</LAYER>
여기에서 주의해야 할 것이 있다.
* 닫는 괄호 밖에는 세미콜론을 사용해야 한다.
* top 값은 레이어에서 가져오지만 height 값은 레이어의 문서에 가져온다.
레이어에 대한 스타일 정의에서 인라인 자바스크립트 사용법에 대해서
모른다고 해도, 미리 정의된 레이어의 위치를 다시 정하기 위해
자바스크립트를 사용할 수 있다.
■ PAGEX 와 PAGEY
<LAYER PAGEX=100 PAGEY=100>
이 속성들은 <LAYER> 태그와 함께 사용해야 하고, 이와 동일한 스타일
프로퍼티는 없다.
PAGEX와 PAGEY는 둘러싸고 잇는 레이어가 아니라 둘러싸고 있는 문서에 대해
상대적인 레이어의 좌측 상단 수직/수평 위치를 픽셀 단위로 지정한다.
■ SRC 와 source-include
<LAYER SRC="htmlsource/meals/special.html>
source-include:url("htmlsource/meals/special.html"); /* CSS */
<LAYER> 태그에 대한 SRC 속성과 source-include 스타일 프로퍼티는
레이어에 디스플레이될 HTML 방식의 텍스트가 있는 외부 파일을 지정한다.
(주의 : source-include 스타일 프로퍼티는 W3C에서 채택되지 않았다.)
지정된 파일은 임의의 HTML 문서를 가지고 있을 수 있다.
아래 코드는 SRC 속성과 source-include 프로퍼티의 사용례이다.
========
CSS 구문
========
<STYLE TYPE="text/css">
<!--
#layer1 {
position:absolute;
top:50pt; left:250pt; width:175pt;
source-include:url("content1.htm");
background-color:purple;
color:yellow; border-width:1; }
-->
</STYLE>
<BODY BGCOLOR=white>
<DIV ID=layer1>
</DIV>
=================
<LAYER> 태그 구문=================
<LAYER top=50 left=250 width=175 src="content1.htm" BGCOLOR="#8888FF">
</LAYER>
</BODY>
위 예제의 결과를 보려면
http://developer.netscape.com/library/documentation/communicator/
dynhtml/source1.htm
소스 파일에는 자바스크립트 코드를 포함시킬 수 있다. 소스 파일에 있는모든 레이어는 컨텐트를 제공하는 소스 파일에 대한 레이어의 자식 레이어로
간주된다.
외부 소스를 레이어의 컨텐트로 사용하는 것은 레이어의 컨텐트를 동적으로
변경하고자 할 경우 특히 유용하다. 예를 들어, 레스토랑 홈페이지를 만들 때
그날의 특식을 소개하는 레이어를 만들 수 있다. 아침마다 주방장이 그날의
특식을 결정한 후에 그 음식을 설명하는 "special.htm"만 간단히 편집하면
된다.
즉, 주방장이 그날의 특식 정보를 수정하기 위해 전체 페이지를 재작성하지
않아도 된다.
또한 레이어를 지원하지 않는 브라우저를 위해 또다른 컨텐트를 제공하고자
할 때도 외부 소스를 레이어 컨텐트로 사용할 수도 있다. 이 경우, <NOLAYER>태그를 사용하면 레어를 지원하지 않는 브라우저에 디스플레이될 컨텐트를
에워쌀 수 있다.
------------------------------------------------------------------------------
------------------------------------------------------------------------------
*
■ WIDTH
<LAYER WIDT=200>
<LAYER WIDHT="80%">
width:200px; /* CSS */
width:80%; /* CSS */
WIDTH 매개변수는 레이어 컨텐트 전체를 포괄하는(wrap) 폭을 결정한다.
폭은 정수값이나 포함하는 레이어 폭에 대한 백분율값으로 표현할 수 있다.
그러나, 이미지 같이 지정된 폭을 넘어서는, 레이어가 모두 포괄할 수
없는 요소를 가지고 있을 경우, 그에 맞춰 실제 레이어 폭이 확장된다.
이 매개변수가 명시되어 있지 않을 경우, 레이어 컨텐트는 포함하는 레이어의
오른쪽 경계까지 포괄한다.
■ HEIGHT
<LAYER HEIGHT=200>
<LAYER HEIGHT= "50%">
height:200px; /* CSS */
height:50%; /* CSS */
HEIGHT 매개변수는 레이어의 클리핑 영역의 초기 높이를 결정한다.
높이는 정수값이나 포함하는 레이어의 높이에 대한 백분율값으로 표현한다.
그러나, 지정된 높이로 다 포괄할 수 없을 경우, 레이어는 모든 컨텐트를
포함할 수 있을 정도로 높이를 확장한다.
HEIGHT 매개변수의 주된 목적은 백분율값으로 높이를 지정하는 자식 레이어의
참조 높이로 동작하게 하는 것이다.
기본적으로 높이는 모든 레이어 컨텐트를 포함할 수 있는 최소 높이이다.
■ CLIP
<LAYER CLIP="20,20,50,100">
clip:rect(0,100,100,0); /* CSS */
CLIP 매개변수는 레이어의 클리핑 사각형을 정의한다. 즉, 레이어의
가시 영역의 테두리를 결정하는 것이다.
값은 네 가지 숫자로 이루어져 있는데, 쉼표로 분리되어 있고, 따옴표를
생략하게 되면 네 가지 숫자 간에 여백을 두지는 않았는지 확인해야 한다.
숫자들은 차례로 왼쪽, 상단, 오른쪽 하단 값이다. 왼쪽값과 오른쪽 값은
레이어 왼쪽 모서리부터의 거리를 픽셀 단위로 지정한 것이고, 상단값과하단값은 레이어 상단 모서리부터의 거리를 픽셀 단위로 지정한 것이다.
네 가지 값 모두 픽셀 단위이다. 이 값을 두 개의 숫자로만 지정할 수도 있는데
이 경우, 왼쪽값과 상단값은 0이 된다.
예:
CLIP="10,20"
은
CLIP="0,0,10,20"과 똑같다.
CLIP 속성이 생략되면 레이어의 클리핑 사각형은 레이어의 WIDTH와 HEIGHT,
그리고 컨텐트에 의해 결정된다. 이들 값 중 한가지도 주어지지 않으면왼쪽값 0, 상단값 0, 그리고 오른쪽값은 래핑(wrapping) 폭, 높이는 모든
컨텐트를 표시하기 위해 필요한 높이로 자동 설정된다.
■ Z-INDEX, ABOVE, BELOW
<LAYER Z-INDEX=3>
<LAYER ABOVE=layer1>
<LAYER BELOW=greenlayer>
z-index:3; /* CSS */
ABOVE와 BELOW 속성은 <LAYER> 태그와 같이 사용되고, 이와 동일한 스타일
프로퍼티는 없다.
이들 매개변수는 레이어의 Z축 순서(쌓는 순서)를 지정한다. 이들 매개변수
중 하나를 설정하면 기존 모든 레이어의 최상위에 새로운 레이어를
갖다 놓으면서 결정된 기본 순서를 무시한다. Z-INDEX나 ABOVE,
BELOW 매개변수 중 주어진 레이어를 위해 사용되는 것은 한가지 뿐이다.
Z-INDEX 매개변수는 레이어의 z축 순서를 정수값으로 지정할 수 있게
만들어준다. Z-INDEX 값이 좀더 큰 레이어는 값이 작은 레이어보다 위에
쌓인다. Z-INDEX 값은 양수만 사용할 수 있다.
ABOVE 속성은 레이어를 즉시 새로 만들어진 레이어 최상위에 지정한다.
즉, 새로운 레이어는 ABOVE 속성에 의해 지정된 레이어 밑에 배치된다.(ABOVE와 BELOW 속성은 스타일 프로퍼티로 사용할 수 없다.)
마찬가지로, BELOW 속성은 새로 만들어진 레이어 밑에 레이어를 지정한다.
다른 속성을 위해 named 레이어가 존재해야 한다. 다른 레이어를 앞으로
참조하면 (ABOVE 속성이나 BELOW 속성이 나타나지 않은 것처럼)
기본 레이어를 만든다.
현재 포함되어 있는 모든 레이어는 쌓기 순서에 따라 그 부모 레이어
위에 놓이게 된다. Z-INDEX와 ABOVE, BELOW 값은 형제 레이어에 대해
상대적이다. 즉, 다른 레이어들도 같은 부모 레이어를 가진다.
■ VISIBILITY
<LAYER VISIBILITY=SHOW>
<LAYER VISIBILITY=HIDE>
<LAYER VISIBILITY=INHERIT>
visibility:show; /* CSS */
visibility:hide; /* CSS */
visibility:inherity /* CSS */
VISIBILITY 매개변수는 레이어가 보이는지의 여부를 결정한다. HIDE는
레이어를 감추는 것이고, SHOW는 레이어를 나타나게 하는 것이며,
INHERIT를 선택하면 부모 레이어와 같은 가시성(visibility)를 가지게 된다.최상위 단계의 레이어는 본문 문서가 항상 보이기 때문에 INHERIT 값이나
SHOW 값은 같은 효과를 낸다.
기본적으로, 레이어는 그 부모 레이어와 같은 가시성을 가진다. 즉,
VISIBILITY 속성 값은 INHERIT이다.
레이어의 visibility가 SHOW로 되어 있어도 불투명한 레이어가 최상위에
놓여 있지 않아야 볼 수 있다.
상대 위치를 가진 레이어의 visiblity가 HIDE라면 레이어 컨텐트는 볼
수 없지만, 문서 흐름 내에서 그 공간은 계속 차지하고 있다.
■BGCOLOR와 BACKGROUND-COLOR
<LAYER BGCOLOR="#00FF00">
<LAYER BGCOLOR="green">
background-color:green;
background-color:00FF00;
BGCOLOR 속성과 background-color 스타일 프로퍼티는 <BODY> 태그의
BGCOLOR 속성과 마찬가지로 HTML 컨텐트 블록의 배경색을 정의한다.
배경색은 red 같은 표준 색상 이름이거나 #334455 같은 RGB 값이 된다.
(33은 빨간색, 44는 초록색, 55는 파란색에 대한 16진수 값이다)
기본적으로 레이어는 투명하다.
레이어가 <LAYER> 태그를 사용해서 정의되었다면 배경색은 레이어가
차지하는 사각 영역에 적용된다. 레이어가 스타일로 정의되었다면
배경색은 전체 레이어 영역이 아닌 레이어의 실제 컨텐트에만 적용된다.
스타일에 테두리가 있을 경우, 테두리로 둘러쌓인 영역은 배경색을 사용하지만
이 영역은 계속해서 컨텐트를 포함하고 있어야 한다. 스타일에서 정의된
높이와 폭에 대한 값이 충분히 컨텐트를 디스플레이할 수 있는 영역보다
더 넓은 영역을 지정한다면 실제 컨텐트 밖의 영역은 버려진다.
넷스케이프 네비게이터 4.0도 layer-background-color CSS 스타일
프로퍼티를 지원하고, 따라서 전체 레이어의 배경색을 설정할 수 있지만,
이 프로퍼티는 W3C에서 채택되지 않았다.
이것들을 말로 설명하는 것은 어렵지만 결과를 보면 쉽게 알 수 있다.
결과는 다음과 같은 페이지에 있다:
http://developer.netscape.com/library/documnet/communicator/
dynhtml/bgtest.htm
■ BACKGROUND와 BACKGROUND-IMAGE
<LAYER BACKGROUND="image/dogbg.gif">
background-image:url("image/dogbg.gif"); /* CSS */
BACKGROUND 속성과 background-image 스타일 프로퍼티는 HTML 컨텐트블록의 배경 전체에 그려지는 바둑판식 이미지를 나타낸다. 값은 이미지의
URL이다.
기본적으로 레이어는 투명하다.
넷스케이프 네비게이터 4.0은 layer-background-image CSS 스타일 프로퍼티도
지원하므로 스타일을 사용하는 전체 블록에 대한 배경 이미지를 설정할 수
있다. 그러나, 이 프로퍼티는 W3C에서 채택되고 있지 않다.
레이어가 <LAYER> 태그를 사용하여 정의되었다면 배경 이미지는 레이어가
차지하는 사각 영역에 적용된다. 레이어가 스타일로 정의되었다면 배경
이미지는 레어의 실제 컨텐트를 포함하는 영역에만 적용된다. 스타일에서
지정한 폭과 높이가 컨텐트를 디스플레이할 수 있는 충분한 영역을 넘어설
경우, 배경 이미지는 실제 컨텐트를 포괄하는 영역에만 적용된다.
이에 대한 예제 페이지는 다음과 같다:
http://developer.netscape.com/library/document/communicator/
dynhtml/bgimage.htm
■ OnMouseOver, OnMouseOut
이 속성은 <LAYER> 태그에만 적용된다.
<LAYER OnMouseOver="highlight(); return false;">
<LAYER OnMouseOut="dehighlight(); return false;">
이것은 이벤트 핸들러이고, 값은 반드시 함수이거나 자바스크립트 코드여야
한다. OnMouseOver 핸들러는 마우스가 레이어를 클릭했을 때 시작되고,
OnMouseOut 핸들러는 마우스가 레이어를 벗어났을 때 시작된다.
■ OnFocus, OnBlur
이 속성은 <LAYER> 태그에만 적용된다.
OnLoad="dosomething(); return false;"
이것은 이벤트 핸들러이고, 값은 반드시 함수이거나 자바스크립트 코드여야
한다. OnLoad 핸들러는 레이어를 볼 수 있는지의 여부와는 상관없이레이어가 로드될 때 시작된다.
8.3 <NOLAYER> 태그
이미 위치가 정해진 HTML 컨텐트 블록을 포함하는 HTML 파일이
컨텐트 배치 방법을 모르는 브라우저에 표시될 경우, 컨텐트는 배치되지
않은 것처럼 디스플레이된다. 파일에 레이어 기능성을 요구하는 스크립트가
포함되어 있을 경우, 배치(포지셔닝, positioning)를 지원하지 않는 브라우저로
로드되면 자바스크립트 오류를 발생시킬 것이다.
넷스케이프 네비게이터 4가 무시하는 <NOLAYER>와 </NOLAYER> 태그를 사용할
수 있다. 이렇게 하면 컨텐트 배치를 할 수 없는 브라우저에서 디스플레이할
또다른 컨텐트를 만들 수 있다.
<LAYER SRC=layerContent.html></LAYER>
<NOLAYER>
This page would show some really cool things if you had
a browser that can position content.
</NOLAYER>
8.4 애플릿, 플러그인, 폼
레이어는 폼 요소와 애플릿, 플러그인을 포함할 수 있고, 윈도우 형식의요소로 인식한다. 이들 요소들은 포함하는 레이어가 확실하지 않더라도
다른 모든 레이어 위에 떠다니기 때문에 특별하다.
윈도우 형식 요소가 포함하는 레이어의 모서리로 이동하면 요소의 테두리가
레이어의 테두리에 닿자마자 요소가 사라져 버린다. 폼 요소에서는 전체 폼이
아니라 레이어의 테두리에 닿는 부분만 보이지 않는 개별적인 요소가 있다.
그러나, 윈도우 형식 요소들이 포함하는 레이어에 따라 이동하고 visibility를
변경한다는 점에 주의해야 한다.
폼은 레이어를 회전시키지 못한다. 즉, 한 레이어에서 폼의 일부를 가지고,
다른 레이어에서 폼의 다른 부분을 가지지 못한다.
커뮤니케이터는 윈도우가 없는 플러그인을 도입하는데, 윈도우의 최상위에나타나지 않고, 윈도우의 다른 항목 아래에 그려질 수 있는 플러그인이다.
윈도우가 없는 플로그인은 Plug-In 가이드에 설명되어 있다.
Plug-In Guide
http://developer.netscape.com/library/documentation/communicator/
plugin/index.htm
