장낙중의 드림위버강좌

 

1.레이어

지금까지 우리는 텍스트와 이미지와 테이블과 수평선등 객체들(Object)의 공간배치에 대해 배웠으며 이들을 어떻게 적절히 링크시키는지에 대해서도 배워왔다.
그런데 우리가 이제까지 배워 온 바에 의하면 어느 개체(Object)가 되었건 우리가 삽입하고자 하는 곳에 맘대로 배치되는 것이 아니라 브라우저의 상단좌측에서부터 순차적으로 배치되는 것을 보았다.

물론 테이블을 이용하면 테이블내에서의 각 열과 행을 이용한 수직적 또는 수평적인 배치로 조금 변화를 줄 수있었던 것은 사실이지만 테이블 자체도 가져다 놓고 싶은 곳에 맘대로 가져다 놓을 수 없는 것 아닌가.

레이어(Layer)는 우리를 이러한 제약에서부터 벗어나게 해준다.
다시 말하자면 우리는 레이어를 쓰므로써 위에 말한 모든 개체(Object)들을 자신이 가져다 놓고 싶은 곳이면 아무곳에나 가져다 놓을 수 있게 된것이다.

즉 공간배치를 마음대로 할 수 있게 되었다는 의미다.

레이어의 개념은 투명하고 손잡이가 달린 얇은 필름정도로 생각하면 쉽다.
필름위에는 적당한 그림이나 글짜 또는 다른 개체들을 배치시킬 수 있으며 손잡이를 드래그하여 브라우저 화면상의 아무 곳이나 배치시킬 수 있다.

레이어는 여러장을 겹쳐 놓을 수도 있는데 이 때 맨 위에 올려져 있는 레이어의 개체가 그 아래에 있는 개체위에 있으면 그 아래의 개체를 가려서 보이지 않게 할 수 있다.이것을 추후 다시 설명하겠지만 Z- index라고 하는데 수치가 만들어진 순서에 따라 1에서부터 1씩 증가한다.

레이어에는 적당한 색상을 입힐 수도 있다.
그러므로 공간배치뿐만이 아니라 시각적인 효과까지도 줄 수 있게 된 것이다.

레이어에는 추후에 설명되겠지만 비헤이비어라는 효과를 주어 적당한 시간에 나타나게도 할 수 있으며 사라지게 하거나 이동하게 할 수 있어서 특수한 효과를 줄 수 있다.

 

2.타임라인

지금까지 우리는 개체들의 시간적인 배치에 대해서는 공부한 바가 없다.
즉 다시 말하자면 어떤 개체를 브라우저상의 일정한 곳에 가져다 놓으면 그 개체는 브라우저상의 그곳에 놓인채 그 페이지를 떠날 때까지 꼼짝 않고 있어야만 했다.

정적인 것(Static)만 보여줄 수 있었을 뿐 동적인 것(Dynamic)은 보여줄 수 없었다는 이야기이다.
그런데 타임라인은 우리를 정적인 것에서부터 동적인 것을 보여줄 수있는 페이지를 작성하는데 유용한 툴을 제공한다.

즉 페이지가 로딩되면서 타임라인을 구동시키면 적절한 시간에 다른 페이지로 넘어가는 등의 원하는 특수효과가 나타나게 하거나 페이지내의 글짜나 그림등의 개체를 원하는 위치로 이동하게 만들 수가 있는 것이다.

3.레이어와 타임라인의 결합 =">" 다이나믹 HTML의 세계

레이어를 타임라인에 등록시켜 공간배치를 시간에 따라 제어해 보자.
또 여러장의 레이어위에 각각 개체들을 삽입해놓고 타임라인에 등록하여 각 레이어의 이동 또는 위에서 설명한 Z- index에 변화를 주어 보자.

어떤 일들이 일어날 것인가?

이제부터 드림위버에서는 레이어와 타임라인의 결합으로 간편하게 텍스트나 그림을 이동시킬 수도 있고 나타났다가 사라질 수도 있으며 자동으로 다른 페이지로의 이동이 이루어질 수도 있게 된 것이다.

우리는 이러한 툴을 이용하여 지금까지 보여왔던 정적인 홈페이지에서 벗어나 동적인 방문객의 마우스에 반응하는 그러한 홈페이지를 만들 수 있을 것이다.

레이어와 타임라인을 포함하여 앞으로 다루게 될 비헤이비어,오브젝트,커맨드등은 여러분의 홈페이지를 화려하게 수 놓을 것이다.