[ 천리안  Network User Group 정기 강좌 교재 ]

DynamicHTML 강좌#2

Positioning HTML Content

(Layer의 사용)

최  철  우 (id: JAVA7)

steve7@mail.com

Positioning HTML Content

이번 장에서는 HTML문서를 Positioning하는 방법에 대해 알아본다.

보통 새로운 언어를 접하면 가장 첫장에 있는 것이 어떤 문법 사항 보다도 □Hello, World'라는 메시지를 화면에 출력하는게 아닐까 싶다.

우리도 화면에 파란 바탕의 'Hello, World'메시지를 출력 해 보자.

<STYLE TYPE="text/css">

#layer1 { position: absolute;

top: 20px;  left: 30px;

background-color: green;

}

</STYLE>

<DIV id=layer1>

Hello, World.

</DIV>

<Layer ID=layer1 TOP=20 LEFT=30 BGCOLOR=green>

Hello,  World.

</Layer>

HTML문서를 Positioning 하는 방법에는 위와 같이 Castcading Style Sheet(이하CSS)을 이용하는 방법과 <Layer> Tag를 이용하는 방법 두가지가 있다. (Javascrpit를 이용하는 방법은 후에 설명하기로 한다.) CSS를 이용할떄는 ID 지정 형식을 사용하는데 일반적으로 하나의 Layer는 전체 HTML문서 내에서 따로 묶여진 영역이기 때문에 라고 생각하면 쉽게 이해 될 것이다.

Defining Positioned Block of HTML Content

· Layer의 절대적 위치와 상대적 위치 지정

· Layer 사용되는 Properties

· <NOLAYER> Tag

1. 절대적 위치 와 상대적 위치

레이어를 Positioning하는 데는 크게 절대적 위치(absolute position)로 지정하는 방법과 상대적 위치(relative position)로 지정하는 방법이 있다.

1.1 절대적 위치

말 그대로 layer에 대한 절대적 위치를 지정하는 것이다. 지정하려는 위치가 다른 layer 안이던 밖이던 상관 없다. 무조건 좌측으로 부터의 left값, 상위로 부터의 top 값을 지정함으로서 그 layer의 위치를 정의 한다.

절대적 위치를 나타낼때 Tag는 <LAYER> tag를 사용하며 스타일로 정의된 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; left: 260px;

}

</STYLE>

1.2 상대적 위치

상대적 위치는 상위 문서(어떤것이든)에 대한 상대적 위치를 지정 한다.

상대적 위치를 지정할 때는 <ILAYER> Tag를 사용하고, 스타일로서 정의하려면 position의 속성을 relative로 하면 된다. 일반적인 스타일은 다음과 같다.

<ILAYER ID=layer2>

<p>Layer2 content goes here</p>

</ILAYER>

<STYLE type="text/css">

#layer2 {position: relative }

</STYLE>

이제 다음의 예제를 보면 상대적 위치에 대해서 쉽게 이해 할 수 있을 것이다.

[Sample #1]

<BODY>.

이 부분은 최상위 HTML Content부분 입니다.<br>

절대적 위치로 지정하면 이 Content와 상관 없이 위치가 지정되만<br>

상대적 위치로 지정하면 Content가 끝나는 부분 뒤로<br>

Layer가 생깁니다.

<DIV STYLE="position:absolute; top:15px; left:250px; height:250px;>

절대적 위치로 설정하였습니다.

</DIV>

<DIV STYLE="position:relative; top:0px; left:0px; height:150px;>

상대적 위치로 설정하였습니다.

</DIV>

</BODY>

relative속성으로 지정된 Layer는 그림과 같이 계속 되는 문서의 부분으로 인식되어 진다. 만약 content부분 끝에 <BR> 태그를 붇이면 레이어는 새로운 행에 위치된다.

[Sample2]

......................................

<BODY bgcolor="DDDDDD">

<DIV CLASS=MAIN>

<DIV CLASS=INTROBLOCK>

<LAYER bgcolor=green top=10 left=10 width=200 height=50>

절대적 위치로 Positioning 되었습니다.

</LAYER>

<ILAYER bgcolor=#ff66aa top=0 left=0 width=200 height=50>

상대적 위치로 Positioning 되었습니다.

</ILAYER>

<H1  CLASS=INTROHEAD>Style Sheets Ink.</H1>

......................................

absolute속성으로 지정된 Layer는 상위에 어떤 Block Level이 있던지 무시하고 무조건 페이지 내에서의 절대 좌표를 잡는다. 반면에 relative속성의 Layer는  상위 Block에 대한 좌표를 계산해서 상위 Block에 대한 상대적 좌표를 잡는다.

절대적 위치를 지정할때 한가지 유의하여할 사항있는데 모든 레이어는 부모, 자식 관계가 성립한다는 것이다.

<b>모두 Abolute Position 입니다.</b>

<LAYER top=50 left=50 width=230 height=150 bgcolor=magenta>

부모 Layer입니다.

<LAYER top=10 left=10 width=170 height=50 bgcolor=green>

자식 Layer입니다.

</LAYER>

</LAYER>

이 형태는 하나의 Layer안에 다른 Layer가 종속되어진  상태 이다. 그러므로 자식 Layer의 절대 좌표는 문서 전체가 기준이 아니라 부모 Layer를 기준으로 계산되어 Positioning 되어진다. (* 여기서 자식 Layer가 relative 속성이라면 부모 Layer의 content에 대한 상대적 위치로 Positioning 되어 진다.)

2. Atrributes and Properties

여기서는 CSS 또는 <Layer> 태그를 사용할때 지정되는 속성들에 대해 살펴본다.

* Layer tag는 항상 pixel 단위를 사용하기 때문에 측정 단위를 명시하지 않아도 되지만 스타일로 정의를 할때는 측정단위를 명시 하여야 한다.

♠ POSITION

#block1 {position:absolute;}

#block2 {position:relative;}

이 속성은 스타일로 정의된 레이어에만 적용된다. 이것에 대한 값은 absolute, relative중 하나를 갖고 absolute는 <LAYER> 태그, relative는 <ILAYER>태그와 같은 형식의 레이어를 만든다.

♠ ID

<LAYER ID=block1>

#block1 {position:absolute;}

이것은 레이어에 대한 핸들러 또는 이름이다. 또한 이 레이어의 id를 HTML또는 Javascript같은 곳에서 참조하기 위한 이름으로도 사용 가능하다. (option 사양)

♠ LEFT and TOP

이 속성은 각각 레이어의 수직, 수평위치를 나타낸다. <LAYER> 태그에서의 기본 단위는 pixel이고 스타일로 정의를 할때는 단위를 표시 해 줘야 한다.

[Sample 1]

<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>

[Smaple 2]

(아래 예에서 다시 한번더 relative 속성을 이해하길 바란다.)

</BODY>

<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>

==========

<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>

♠ PAGEX and PAGEY

<LAYER PAGEX=100 PAGEY=100>

이 속성은 오직 <LAYER> 태그만 사용 가능하다.  스타일에서 같은 역할을 하는 속성은 없다. 이것은 현재 Layer가 자식 Layer이던 상관 없이 무조건 현 페이지에서 좌표값을 계산하여 Loaction 한다.

♠ SRC and source-include

<LAYER SRC="myhome/lecture/content.htm">

source-include:url("myhome/lecture/content.htm");

해당하는 layer의 content부분을 외부에서 가져다가 사용한다.

이것은 아주 큰 페이지에서 해당 layer만 자주 바뀐다면 매번 그 큰 문서를 열어서 수정하지 않고 해당 html 문서만을 uplaod함으로써 유용하게 사용될 수 있다.

(□ source-include 스타일 속성은 W3C에 의해 승인 되지 않았다.)

<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 top=50 left=250 width=175 src="content1.htm" BGCOLOR="#8888FF">

</LAYER>

</BODY>

레이어를 지원하지 않는 브라우저가 브라우징 할 때도 외부 소스를 레이어 컨텐트로 사용할 수도 있다. 이 경우, <NOLAYER> 태그를 사용하면 레어를 지원하지 않는 브라우저에 디스플레이될 컨텐트를 보여줄 수 있다.

♠ WIDTH and HEIGHT

<LAYER WIDTH=200>	width:200px;

<LAYER WIDTH="80%">	width:80%;

<LAYER HEIGHT=200>	height:200px;

<LAYER HEIGHT="50%">	height:50%;

각각의 매개 변수는 pixel값과 browser 창 크기에 대한 percentage값을 사용 할 수 있다. 만약 image가 이 폭이나 높이를 넘어 선다면 레이어의 폭과 높이는 이 image를 포괄 할 수 있는 크기로 맞춰진다. 만약 이 두 값을 표기 하지 않았을때는 오른쪽, 아래 content 경계선 크기가 맞춰어 진다.

♠ CLIP

<LAYER CLIP="20,20,50,100">

clip:rect(0,100,100,0);

이 속성은 레이어에서의 클리핑 영역을 설정하는 것이다. 클리핑 영역은 왼쪽 상단과 오른쪽 하단 값을 차례로 정한후 그 점을 잊는 rectangle을 만든다. 만약 레이어의 width와 height가 각각 400 이고 클리핑 영역을 clip="20,20,50,100"으로 설정 했다면 해당 레이어에서 (x,y)=(20,20) 부터 (50,100) 에 해당 하는 영역만을 display 한다.

여기서 왼쪽 상단 값은 생략할 수도 있는데 생략하면 그 값은 (0,0)으로 계산되어 진다.

즉, CLIP="10,10" 으로 했다면 이것은 CLIP="0,0,10,20"과 같게 인식된다.

다음 그림의 오른쪽은 (다음 페이지네요~ :-) )

<layer top=10 left=10 width=480 height=150 background="main.jpg"></layer>이고

왼쪽은 이 layer에 Clipping 영역을 설정한 것이다. 즉,

<layer clip="50,5,150,140" top=10 left=10 width=480 height=150 background="main.jpg">

</layer>

위의 그림에서 확인할 수 있드시 clip은 해당 Layer의 일정 영역을 보이게 한다.

♠ Z-INDEX,  ABOVE and BELOW

<LAYER Z-INDEX=3>

<LAYER ABOVE=layer1>

<LAYER BELOW=greenlayer>

z-index:3;

우리가 이전에 HTML문서를 다룰때는 X, Y 축만을 생각해 평면상에 각종 웝문서를 표현했다. DynamicHTML에서는 Layer의 개념, 즉 Z축도 포함된 □층□개념을 추가한다.

여기서 다룰 Z-INDEX, ABOVE, BELOW는 해당 layer의 Z축을 결정한다.

일반적으로 순서대로 layer를 위치시킬 경우 가장 늦게 만들어진 layer가 이전에 만들어진 layer 상위에 놓이게 된다.

Z-INDEX: layer의 Z축 순서를 지정한다. 값을 클수록 상위에 위치한다. (양수로 지정한다.)

ABOVE: 새로 만들어질 layer는 ABOVE 속성으로 지정된 layer 아래에 위치된다.

BELOW: 새로 만들어질 layer는 BELOW 속성으로 지정된 layer 위에에 위치된다.

(□ ABOVE와 BELOW속성은 Layer Tag로서만 사용 가능하다.)

[Sample: 특별한 Z축 속성 지정없이 사용했을 때]

<layer top=10 left=10 width=200 height=150 bgcolor="yellow">

첫번째 레이어</layer>

<layer top=50 left=130 width=200 height=150 bgcolor="magenta">

두번째 레이어</layer>

<layer top=100 left=70 width=200 height=150 bgcolor="blue">

세번째 레이어</layer>

*자세한 사용은 뒤의 예제에서 확인하자.

[Sample2 ABOVE, BELOW 속성을 사용한 예제]

<layer ID=layer1 top=10 left=10 width=200 height=150 bgcolor="yellow">

첫번째 레이어</layer>

<layer ID=layer2 top=50 left=130 width=200 height=150 bgcolor="magenta">

두번째 레이어</layer>

<layer ID=layer3 ABOVE=layer1 top=100 left=70 width=200 height=150 bgcolor="blue">

세번째 레이어</layer>

[Sample3 Z-INDEX 속성을 사용한 예제]

<layer  Z-INDEX=2 top=10 left=10 width=200 height=150 bgcolor="yellow">

첫번째 레이어</layer>

<layer  Z-INDEX=1 top=50 left=130 width=200 height=150 bgcolor="magenta">

두번째 레이어</layer>

<layer  Z-INDEX=3 top=100 left=70 width=200 height=150 bgcolor="blue">

세번째 레이어</layer>

♠ VISIBILITY

<LAYER VISIBILITY=SHOW>

<LAYER VISIBILITY=HIDE>

<LAYER VISIBILITY=INHERIT>

visibility:show;

visibility:hide;

visibility:inherit;

이 속성이 SHOW일때는 레이어를 볼 수 있게 하고 HIDE일때는 숨기고 INHERIT일때는 부모 레이어와 같은 속성을 갖게 된다.

레이어가 SHOW로 되어 있어도 최상위 레이어가 HIDE일때는 보이지 않게 된다.

♠ BGCOLOR and BACKGROUND-COLOR

<LAYER BGCOLOR="#00FF00">

<LAYER BGCOLOR="green">

background-color:green;

background-color:00FF00;

배경색을 정의하는데 #334455와 같이 16진수 표현 방식인 RGB형태와 'red'와 같은 표준 이름 모두 지원한다.

레이어가 <LAYER> 태그를 사용해 정의 되었다면 배경색을 레이어 안에 모두 적용이 되지만 스타일로 정의했을 경우 배경색을 실제 배경색 전체가 아닌 실제 컨텐트 부분에만 적용된다.

♠ OnMouseOver, OnMouseOut

<LAYER OnMouseOver="highlight(); return false;">

<LAYER OnMouseOut="dehighlight(); return false;">

이것은 이벤트 헨들러로 값은 함수 이거나 javascript이어야 한다. OnMouseOver는 마우스가 레이어 위에 들어갔을때 작동하고 OnMouseOut는 마우스가 레이어를 벗어났을때 작동한다.

(□ 이것은 <LAYER> 태그에만 적용된다.)

♠ OnFocus, OnBlur

<LAYER OnFocus="function1(); return false;">

<LAYER OnBlur="function2(); return false;">

이것은이벤트 헨들러로 값은 함수 이거나 javascript이어야 한다.

OnFocus는 키보드 포커스가 왔을때 작동되며 OnBlur는 키보드 포커스가 벗어났을때 작동된다.

(□ 이것은 <LAYER> 태그에만 적용된다.)

♠ OnLoad

OnLoad="dosomething(); return false;"

이것도 <LAYER> 태그에만 적용되며 이벤트 헨들러로 값은 함수 이거나 javascript이어야 한다. OnLoad헨들러는 레이어가 보이던 안보이던 레이어가 로드 되었을때 작동한다.

위의 이벤트에 대한 것들은 예제를 보면서 적용해 볼 것이다.

3. The <NOLAYER> Tag

이것은 <LAYER> Tag를 지원하지 않는 웹브라우져를 위한 것이다.

먼저 아래 예를 보자.

<LAYER SRC=layerContent.htm></LAYER>

<NOLAYER>

This page would show some really cool things if you had

a browser that can position content.

</NOLAYER>

만약 <LAYER>태그를 지원하지 않는 브라우져가 브라우징을 할 경우 <NOLAYER>부분의 content가 display된다.

Using JavaScript with Positioned Content

javascript를 사용하면 이미 모든 컨텐트 블럭이 이미 정의 되어 있더라도 언제든 접근, 수정이 가능하다. 이번장에서는 javascript를 이용해 각 속성에 접근하는 것들을 살펴보고 javascript에서 기본적으로 제공하는 몇가지 메쏘드를 살펴본다.

♠ Layer의 Document Property 와 Document Property의 Layer

Javascprit에서는 모든 레이어의 속성을 조절할 수 있는 layers 객체가 있다.

document 속성은 이 레이어 안의 모든 최상위 레이어들을 포함하는 layers 배열을 갖는다.

javascript에서 레이어에 접근하기 위해서는 다음과 같은 몇가기 방법이 있다.

- document.레이어 이름

- document.layers[레이어 이름]         (ex: document.layers["flowerlayer"])

- document.layers[index]    :인덱스는 0번부터 붙는다. 즉, 만약 3번째 레이어라면 index는 2가 된다.

(cf. 레이어의 갯수를 알 수 있는 방법: document.layers.length로 접근하면 된다. )

♠ Layer 개체 Property

레이어 개체에 접근 하려면 layerObject.propertyName 와 같은 구문을 사용하면 된다. 예를들어

"flowerlayer"라는 레이어의 left 프로퍼티를 300 픽셀로 설정하려면 document.flowerlayer.left=300; 과 같이 해 주면 된다.

Property Name	Modifiable	Description
document	No	각 레이어 객체는 자신의 문서 개체를 가진다. 이 개체는 해당 레이어에 포함된 이미지와 애플릿, 임베딩, 링크, 앵커 및 레이어에 액세스하기 위해 사용될 수 있다.
name	No	NAME 속성이나 ID 속성을 통해 레이어에 지정된 이름
left	Yes	레이어 왼쪽의 수평 위치를 가리킨다. 즉 left값을 결정한다. 올수 있는 값은 pixel, percentage 이다.

top	Yes	레이어 상단의 수직 위치. 이 값은 부모 레이어의 원점에 대해 상대적이다. 즉, top의 속성을 결정한다. 올 수 있는 값은 pixel, percentage이고 기본으로는 pixel로 설정됨.
pageX	Yes	페이지에 대해 상대적인 레이어 수평 위치.
pageY	Yes	페이지에 대해 상대적인 레이어 수직 위치.
zIndex	Yes	Layer의 Z축에 쌓이는 순서를 결정한다. 부모, 자식 layer의 관계는 유지된다. 올수 있는 값은 0또는 양수이어야 한다
visibility	Yes	레이어를 보이게 할지 결정한다. 값이 "show" 이면 레이어를 보이게 하고, "hide"이면 레이어를 감춘다. "inherit" 이면 부모 레이어의 visibility 값을 상속한다.
clip.top clip.left clip.right clip.bottom clip.width clip.height	Yes	이들 프로퍼티는 레이어의 보이는 부분을 지정하는 클리핑 사각형을 정의한다. 클리 핑 사각형 바깥에 있는 레이어 부분은 화 면에 표시되지 않는다. 클리핑 영역은 컨텐트를 포함하는 레이어 영역 안에서 확장할 수 있다. 클리핑 값은 0이거나 양수이어야 한다. clip.top과 clip.left, clip.bottom, clip.right 값은 레이어 좌표계에 있다.
background	Yes	레이어의 배경으로 사용할 이미지. 레이어의 크기가 배경 이미지 보다 클경우 배경 이미지는 바둑판식으로 배열된다. 예를 들어 layer.background.src = "fishbg.gif"; 레이어에 배경이 없을 경우, 값은 null이다.
bgcolor	Yes	레이어의 배경색으로 사용할 색상. 사용할 수 있는 값은 RGB 값이나 기존 색상을 나타내는 문자열, 투명 레이어일 경우 null이다. // 파란색 배경: layer.bgColor = "#0000FF"; // 빨간색 배경: layer.bgColor = "red"; // 투명 레이어: layer.bgColor = null;
siblingAbove	No	레이어가 쌓이는 순서상 현재 레이어 밑에 있으면서 같은 부모 레이어를 공유하는 layer
siblingBelow	No	레이어가 쌓이는 순서상 현재 레이어 위에 있으면서 같은 부모 레이어를 공유하는 layer
above	No	above와 같은 속성. 현재 레이어가 최상위 레이어일 경우 null 값이 된다.
below	No	below와 같은 속성. 현재 레이어가 최하위 레이어일 경우 null 값이 된다.
src	Yes	URL과 같이 레이어에 대한 content 소스

♠ Layer 개체 Method

레이어를 수정할때 layer 개체 상에서 수정하려면 아래와 같은 형식의 메쏘드를 호출해야 한다. ==> layer개체.메쏘드 이름(매개변수)

예를들어 lowerlayer라는 레이어 상에서 오른쪽으로 10 픽셀만큼, 아래쪽으로

10 픽셀만큼 이동시키는 moveBy() 메쏘드를 호출하는 형식은

document.flowerlayer.moveBy(10,10); 와 같다.

Method Name	Description
moveBy(dx, dy)	현재 레이어를 현재 위치에서 왼쪽으로 dx 픽셀만큼, 아래로 dy 픽셀만큼 이동시킨다.
moveTo(x, y)	레이어의 위치를 x, y 좌표로 이동한다. top, left 속성을 정하는 것과 같은 효과가 나타난다.
moveToAbsolute(x,y)	레이어 위치를 페이지내에서 지정된 픽셀 좌표로 변경한다. 이 메쏘드는 레이어 개체의 pageX와 pageY 프로퍼티를 모두 설정한 것과 같다.
resizeBy(dwidth,dheight)	지정된 높이와 폭만큼 레이어의 크기를 조절한다. 이 메쏘드는 clip,width, clip.height에서 dwidth, dheight 값을 설정하는 것과 같은 효과를 가진다.
resizeTo(width,height)	지정된 폭과 높이를 가지도록 레이어를 결정한다. 이 메쏘드는 clip.width, clip.height 의 값을 성정하는 것과 같은 효과를 가진다.
moveAbove(layer)	지정된 레이어 위에 현재 레이어를 쌓는다. 레이어 쌓기가 조정된 후에 두가지 레이어는 같은 부모 레이어를 가지게 된다.
moveBelow(layer)	지정된 레이어 아래에 현재 레이어를 쌓는다. 레이어 쌓기가 조정된 후에 두가지 레이어는 같은 부모 레이어를 가지게 된다.
load(sourcestring, width)	레이어 소스를 sourcestring에서 지정하는 html문서로 변경하고, 동시에 레이어의 폭도 변경할 수 있다. 이 메쏘드는 두 개의 매개변수를 가지는데, 첫번째 매개변수는 외부 파일 이름을 가리키는 것이고, 두번째 매개변수는 픽셀 단위인 레이어의 width값이다.

♠ Powered by Javascript

Javascript를 이용하면 new연산자를 이용하면 새로운 Layer개체를 생성할 수 있다.

bluelayer = document.bluelayer;

newbluelayer = new Layer(300, bluelayer);

여기서 첫번째 매개변수는 width값을 나타내면 부번째 매개변수는 부모레이어를 나타낸다. 부모레이어는 원도우도 될 수 있으며 이경우 새로운 layer는 현재 문서상에서 최상위에 위치하게 된다. 이 매개변수를 생략할 수도 있는데 이때 layer는 현재 문서의 최상위에 위치한다.

layer를 생성하고 그것의 content를 수정하는데 주의해야할 사항이 있는데 Page로딩이 완전히 끝난후에야만 new연산자를 사용한 새로운 layer개체 생성이 가능하다. Page로딩이 끝날때까지 레이어의 문서를 열어 쓸 수 없다.

이제 Layer안에 content를 작성해 보자.

처음 Layer를 정의 하면서 해당 document의 write 메쏘드를 사용하여 layer의 document에 내용을 쓸 수 있다.

<LAYER ID="layer1" BGcolor="green">

<HR><H1>First Heading</H1>

<SCRIPT>

document.write("<P>Here is some content<P>")

</SCRIPT>

<HR>

</LAYER>

레이어가 만들어지고 페이지가 완전히 로딩되면 write() 메쏘드를 사용하여 layer의 content를 수정할 수 있다. layer가 만들어지고 layer에 내용을 써 넣기위해 write()메쏘드를 사용하면 그 layer의 원래 내용은 지워지고 새롭게 정의된 내용으로 대체된다.

<HTML><BODY>

<LAYER ID="layer1" BGCOLOR="blue">

<HR>

<H1>First Heading</H1>

<P>Here is the original content<P>

<HR>

</LAYER>

</BODY>

</HTML>

<SCRIPT>

function changeLayerContent() {

document.layer1.document.write("<HR><P>New content.</P><HR>");

document.layer1.document.close();

}

</SCRIPT>

<FORM NAME="form">

<INPUT TYPE=button VALUE="CHANGE CONTENT"

ONCLICK=□ChangeLayerContent();return false;□>

</FORM>

이 부분에 해당하는 예제는 "Expanding Colored Squares Example" 이다.

♠ Using Localized Scripts

Positioned content block안에서 <script> </script> tag를 사용할 수 있다. 스크립트 안에서 정의된 함수는 해당 블록 내에서만 사용가능하고 블록 바깥에서는 사용될 수 없다.

이것은 각 레이어의 이벤트 헨들러를 정의 할 떄 유용하게 사용될 수 있다.

<LAYER ID="layer1" BGCOLOR="red"

onMouseOver='changeColor("blue");'

onMouseOut='changeColor("red");'>

<P>Layer content...</P>

<SCRIPT>

function changeColor(newcolor) {

bgColor=newcolor;

return false;

}

</SCRIPT>

</LAYER>

**** CSS Syntax ****

<DIV STYLE="position:absolute; layer-background-color:red;

width:200px; height:100px">

<P>Layer content...</P>

<SCRIPT>

function onMouseOver() {changeColor("blue");}

function onMouseOut() {changeColor("red");}

function changeColor(newcol) {

bgColor=newcol;

return false;

}

</SCRIPT>

</DIV>

♠ Animation Positioned Content

layer의 Clip 영역을 폭을 5px, 높이를 5px씩 늘리며 clip.right가 450이 될때까지 animating 하는 예제다.

function expand(layer)

{

if (layer.clip.right < 450) {

layer.resizeBy(5, 5);

setTimeout(expand, 5, layer);

}

return false;

}

(여기서 setTimeout함수를 살펴모면 형식은 setTimeout(function, delay, args..) 이다. 즉, 위의 함수에서는 5millisceonds 마다 layer매개변수를 가진 expand함수가 호출된다.)

<<<  Example  >>>

이제부터 위에서 알아본 여러 layer관련 속성들과 javascript를 이용한 동적 처리에 대한 예제들을 보면서 어떻게 적용되고 사용되는지 알아 보겠다.

( 본 강좌 폴더의 하위 폴더에 여기에 기재되는 예제 소스와 소스에 사용되는 이미지 파일

을 첨부하였다. 강좌후에 소스 파일을 열어 보고 직접 눈으로 다시 확인해 보길..~

파일뒤에 'css'라고 써져 있는 것은 CSS로 작성된 것이다.)

Fancy Flowers Farm Example

Pop-up 메뉴중 하나를 선택하면 그것에 대한 image와 상세 내용이 아랫 부분에 display 된다.

<HTML><HEAD>

<TITLE>Flowering Layers Example</TITLE>

</HEAD>

<STYLE type="text/css">

<!--

#flower0 {position: absolute;

LEFT:50;  width:400;

background-color:FFFFDD;

border-color:white; border-width:1;}

#flower1 {position: absolute; visibility:hide;

LEFT:50;  width:400;

background-color:DDFFDD;

border-color:white; border-width:1;}

#flower2 {position: absolute; visibility:hide;

LEFT:50;  width:400;

background-color:DDDDFF;

border-color:white; border-width:1;}

#flower3 {position: absolute; visibility:hide;

LEFT:50;  width:400;

background-color:FFDDDD;

border-color:white; border-width:1;}

#formlayer {position:relative; left:50;}

-->

</STYLE>

<SCRIPT>

function hideAllflowerLayers() {

document.flower0.visibility = "hide";

document.flower1.visibility = "hide";

document.flower2.visibility = "hide";

document.flower3.visibility = "hide";

}

function changeFlower(n) {

hideAllflowerLayers();

document.layers["flower" + n].visibility = "show";

}

</SCRIPT>

<BODY color=white>

<HR><H1 align="center">Welcome to Fancy Flowers Farm </H1><HR>

<P>We sell bulbs, seeds, seedlings, and potted plants, in all shapes, sizes, colors, and varieties.This page presents information about our most popular varieties.</P>

<DIV ID="formlayer">

<H3>Please select a flower:</H3>

<FORM NAME=form1>

<SELECT name=menu1 onChange="changeFlower(this.selectedIndex); return false;">

<OPTION >Mona Lisa Tulip

<OPTION >Mixed Dutch Tulips

<OPTION >Bijou Violet

<OPTION >Pink Chrysanthemum

</SELECT>

</FORM>

</DIV>

<DIV ID="flower0">

<HR><H3 align="center">Mona Lisa Tulip</H3>

<IMG src="redtul.jpg" align="LEFT" hspace=5 >

<P>These tulips have been specially designed to withstand late winter frost

in areas with harsh winters.They are a beautiful red color, and we guarantee that

they'll grow for at least four years in a row. Don't wait to order them,

they sell fast!</P>

<BR CLEAR="ALL">

<P>Priced at only $1 a bulb, they are a bargain.</P>

<HR>

</DIV>

<DIV ID="flower1">

<HR><H3 align = center>Mixed Dutch Tulips</H3>

<IMG src="tulmulti.jpg" align="LEFT"  hspace=5 >

<P>These colorful tulips have been specially bred for us by Dr. Hans Tulip in

Amsterdam. He has spent the last ten years perfecting the hybrid. These tulips	start blooming early, sometimes they beat the crocuses out of the ground! </P>

<BR CLEAR="ALL">

<P>They come in a variety of intense colors, and they have a velvety,

sweet-smelling bloom.</P>

<P>Priced at $5 for ten, these tulips are a cheap way to bring color to your

garden. </P> <HR>

</DIV>

<DIV ID="flower2">

<---------- 소스 생략 ---------->

</DIV>

<DIV ID="flower3">

<---------- 소스 생략 ---------->

</DIV>

</BODY>

</HTML>

Swimming Fish Example

각 물고기와 각 pole의 Z축 순서에 따라 물고기의 움직임을 표현한 예제.

(z-index, above, below 속성을 사용해서 수정 해 보는것도 좋겠죠.)

<HTML><HEAD><TITLE>Swimming Fish</TITLE></HEAD>

<SCRIPT>

unction showForm() {

document.waiting.visibility="hide";

document.formlayer.visibility="show";

return false;

}

function movefish() {

var fish = document.fish;

if (fish.left < 400) {

fish.offset(5, 0);}

else {fish.left = 10;}

setTimeout("movefish()", 10);

return;

}

</SCRIPT>

<BODY BGCOLOR="#FFFFFF" ONLOAD="showForm();">

<LAYER NAME="bluepole" LEFT=160 TOP=150>

<IMG SRC=bluepole.gif>

</LAYER>

<LAYER NAME="greenpole" LEFT=360 TOP=150>

<IMG SRC=greenpol.gif>

</LAYER>

<LAYER NAME="redpole" LEFT=260 TOP=150>

<IMG SRC=redpole.gif>

</LAYER>

<LAYER NAME="fish" LEFT=40 TOP=170  ABOVE="redpole">

<IMG SRC=fish1.gif >

</LAYER>

<H1>Fish Example 1</H1>

<ILAYER ID=formlayer VISIBILITY=HIDE>

<FORM>

<INPUT type=button value="Move the fish" OnClick="movefish(); return false;">

</FORM>

</LAYER>

<LAYER ID=waiting TOP=100 LEFT=50>

<H3>Please wait while the fish loads...</H3>

</LAYER>

</BODY></HTML>

Exanding Colored Squares Example

각 사각형 영역에 마우스를 다져가면 커지고 다시 마우스를 가져가면 작아지는 예제이다.

<HTML>

<HEAD><TITLE>Expanding Layer Example</TITLE></HEAD>

<BODY>

<STYLE TYPE="text/css">

P {margin-left:10%; margin-right:10%;}

H3 {text-align:center; margin-top:4%;}

</STYLE>

<SCRIPT>

var maxclip = 200;

var minclip = 0;

var maxclipcontracted = 150;

var minclipcontracted = 50;

var delta = 10;

function initializeTopLeft(n)

{

var thislayer = document.layers[n];

thislayer.status = "waitingToExpand";

thislayer.clip.top = maxclipcontracted;

thislayer.clip.left = maxclipcontracted;

thislayer.clip.bottom = maxclip;

thislayer.clip.right = maxclip;

thislayer.dleft = -delta;

thislayer.dtop = -delta;

thislayer.dbottom = 0;

thislayer.dright = 0;

thislayer.myposition = "topLeft";

thislayer.mysource="point1.htm"

thislayer.mytext="<LAYER TOP=160 LEFT=168><H1>1</H1></LAYER>"

return false;

}

function initializeTopRight(n)

{

var thislayer = document.layers[n];

thislayer.status = "waitingToExpand";

thislayer.clip.top = maxclipcontracted;

thislayer.clip.right = minclipcontracted;

thislayer.clip.bottom = maxclip;

thislayer.clip.left = minclip;

thislayer.dleft = 0;

thislayer.dtop = -delta;

thislayer.dbottom = 0;

thislayer.dright = delta;

thislayer.myposition = "topRight";

thislayer.mysource="point2.htm"

thislayer.mytext="<LAYER TOP=160 LEFT=18><H1>2</H1></LAYER>"

return false;

}

function initializeBottomLeft(n)

{

var thislayer = document.layers[n];

thislayer.status = "waitingToExpand";

thislayer.clip.bottom = minclipcontracted;

thislayer.clip.left = maxclipcontracted;

thislayer.clip.top = minclip;

thislayer.clip.right = maxclip;

thislayer.dleft = -delta;

thislayer.dtop = 0;

thislayer.dbottom = delta;

thislayer.dright = 0;

thislayer.myposition = "bottomLeft";

thislayer.mysource="point3.htm"

thislayer.mytext="<LAYER TOP=6 LEFT=168><H1>3</H1></LAYER>"

return false;

}

function initializeBottomRight(n)

{

var thislayer = document.layers[n];

thislayer.status = "waitingToExpand";

thislayer.clip.bottom = minclipcontracted;

thislayer.clip.right = minclipcontracted;

thislayer.clip.top = minclip;

thislayer.clip.left = minclip;

thislayer.dleft = 0;

thislayer.dtop = 0;

thislayer.dbottom = delta;

thislayer.dright = delta;

thislayer.myposition = "bottomRight";

thislayer.mysource="point4.htm"

thislayer.mytext="<LAYER TOP=6 LEFT=18><H1>4</H1></LAYER>"

return false;

}

function changeNow (n)

{

var thislayer = document.layers[n];

if (thislayer.status == "waitingToExpand")

{

thislayer.src=thislayer.mysource;

expand(n);

}

else if (thislayer.status == "waitingToContract")

{

contract(n);

}

return false;

}

function expand (n)

{

var thislayer = document.layers[n];

thislayer.status = "expanding";

thislayer.clip.left=thislayer.clip.left+thislayer.dleft;

thislayer.clip.right=thislayer.clip.right+thislayer.dright;

thislayer.clip.bottom=thislayer.clip.bottom+thislayer.dbottom;

thislayer.clip.top=thislayer.clip.top+thislayer.dtop;

if (

(((thislayer.myposition == "topLeft") |

(thislayer.myposition == "bottomLeft")) &&

(thislayer.clip.left >= minclip)) ||

(((thislayer.myposition == "topRight") |

(thislayer.myposition == "bottomRight")) &&

(thislayer.clip.right <= maxclip))

)

{

setTimeout("expand(" + n + ")", 50);

}

else

{

thislayer.status = "waitingToContract";

}

return false;

}

function contract (n)

{

var thislayer = document.layers[n];

thislayer.status = "contracting";

thislayer.clip.left=thislayer.clip.left-thislayer.dleft;

thislayer.clip.right=thislayer.clip.right-thislayer.dright;

thislayer.clip.bottom=thislayer.clip.bottom-thislayer.dbottom;

thislayer.clip.top=thislayer.clip.top-thislayer.dtop;

if (

(((thislayer.myposition == "topLeft") |

(thislayer.myposition == "bottomLeft")) &&

(thislayer.clip.left < minclipcontracted)) ||

(((thislayer.myposition == "topRight") |

(thislayer.myposition == "bottomRight")) &&

(thislayer.clip.right > maxclipcontracted))

)

{

setTimeout("contract(" + n + ")", 50);

}

else {

thislayer.status = "waitingToExpand";

thislayer.document.write(thislayer.mytext);

thislayer.document.close();

}

return false;

}

</SCRIPT>

<BODY>

<LAYER ID="topleftblock" top=50 left=50

width=200 height=200

BGcolor="#FF5555"

onLoad = initializeTopLeft(0);

onMouseOver=changeNow(0); >

<LAYER TOP=160 LEFT=168>

<H1>1</H1>

</LAYER>

</LAYER>

<LAYER ID="toprightblock" top=50 left=250

width=200 height=200

BGcolor="#5555FF"

onLoad = initializeTopRight(1);

onMouseOver="changeNow(1);"

>

<LAYER TOP=160 LEFT=18>

<H1>2</H1>

</LAYER>

</LAYER>

<LAYER ID="bottomleftblock" top=250 left=50

width=200 height=200

BGcolor="#55FF55"

onLoad = initializeBottomLeft(2);

onMouseOver="changeNow(2);"

>

<LAYER TOP=6 LEFT=168>

<H1>3</H1>

</LAYER>

</LAYER>

<LAYER ID="bottomrightblock" top=250 left=250

width=200 height=200

BGcolor="#FFFF55"

onLoad = initializeBottomRight(3);

onMouseOver=changeNow(3);

>

<LAYER TOP=6 LEFT=18>

<H1>4</H1>

</LAYER>

</LAYER>

<LAYER TOP=500>

<P></P>

</LAYER>

</BODY>

</HTML>

강좌 폴더에 있는 □Nikki's Diner' 예제는 생략하겠습니다.(스스로 분석 해 볼 것~!)

*여기서 사용한 Sample 예제는 Netscape 웹페이지에서도 볼 수 있습니다.

(참조:http://developer.netscape.com/tech/dynhtml/index.html?content=/docs/manuals/dynhtml.html)

*궁금한 사항은 천리안 네트워크 유저 그룹(go net) □51.스터디 소모임□ 방내의 □다이나믹당□으로 올려 주시기 바랍니다.

본 문서의 저작권은 최철우 에게 있습니다.

천리안id: java7 / Email: steve7@mail.com

비상업적인 목적으로는 어느곳에서나 사용 가능합니다.