하이브리드웹설계

(1)

하이브리드웹설계

9주-1회 DHTML LAYER

(2)

강의 내용

 레이어 소개

 레이어 이용한 웹페이지 구성

 나모 웹 에디터에서의 레이어 사용

(3)

레이어를 이용한 웹 페이지의 구성



레이어란?

 하나의 문서 내에서 여러 곳에 배치가 가능한 웹 페이지의 내 용

 레이어를 사용하면 기존의 HTML 태그로는 불가능했던 웹 페이지 구성요소의 자유로운 위치 지정이 가능

 자바스크립트를 이용해 레이어의 이동, 감추기, 크기 변화, 스타일 속성 수정, 내용 수정, 새로운 레이어 생성 등 레이어 의 조작 가능

 Navigator에서는 <LAYER>라는 태그를 이용해 손쉽게 레이 어를 만들 수 있지만 Internet Explorer에서 사용할 수 없으 므로 CSS를 이용해 레이어를 정의하는 것이 좋다.

레이어(Layer)란?

(4)

레이어 만들기에 필요한 태그 : <DIV>, <SPAN>



<DIV> 태그와 <SPAN> 태그의 역할

 HTML 문서의 한 부분을 묶어 인위적으로 구조를 덧붙이는 역할

 CLASS, ID 속성을 이용해 웹 페이지의 원하는 부분을 묶어 스타일 지정 가능



<DIV> 태그

 블록레벨에 사용하여 문서의 블록을 묶는 역할

 <DIV>태그로 묶인 부분의 시작과 끝에서는 줄바꿈



<SPAN>태그

 인라인(inline)스타일로 사용

 예 : <DIV ID=notice>

<P> <SPAN CLASS=warning>경고합니다. </SPAN>

암호를 입력하세요.

</P>

</DIV>

(5)

레이어의 정의



레이어의 정의 방법

 ID attribute을 이용해 스타일을 정의하고, 여기에 'position' 속성을 추가하면 레이어로써 정의됨.

 position 속성

• 레이어 위치에 대한 기준을 지정

• 속성값 absolute

문서 전체에 대한 절대적 위치 지정.

Relative

레이어가 서술된 곳을 기준으로 한 상대적 위치 지정.

 left, top Property을 이용해 레이어 위치 지정

 width, height Property을 이용해 레이어의 크기 지정

(6)



레이어 정의의 예 소스코드

<html>

<style>

#place {position: absolute; left:40; top:20; width:320;

background-color:rgb(255,220,220);

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

</style></head>

<body>

<p><img src="images/lugano.jpg" width="160"

height="110" ALIGN="left"> 스위스 남부의 조그만 도시 로 ………..</p>

</div>

</body></html>

(7)



레이어 정의의 결과

(8)



절대적 위치와 상대적 위치 비교 소스코드

<style>

#name0 { position : absolute; left :40px; top: 152px; }

#name1 { position : absolute; left :185px; top: 152px; }

#name2 { position : relative; left : 178px; top: -194px; }

</style> </head>

<body>

<div id="name1"><p>-- 오스트리아 </p></div>

<p><img src="images/map.gif" width="250"

height="258" alt="유럽지도" border="3"></p>

</div>

</body> </html>

절대적 위치 지정 : 문서의 왼쪽 위 점을 기준 (0,0)으로

상대적 위치 지정

(9)



절대적 위치와 상대적 위치 비교 결과

(10)



상대적 위치를 사용한 소스코드

(11)



실행 결과

( 50 , 10 )

( 50 , 20 )

( 50 , 30 )

( 50 , 40 )

(12)



레이어를 사용하지 않은 웹 페이지와

레이어를 사용한 웹 페이지의 비

교

(13)

나모 웹 에디터에서의 레이어 사용하기



메뉴 : 삽입 | 레이어 선택

레이어 서식 부호 ( 레이어 태그가 실제로 삽입되어 있는 곳을 부호로 나타냄 )

레이어 핸들 ( 레이어 선택 및 이동할 때 사용 )

레이어 영역 ( 레이어 속에 글이나 그림 등 실제 삽입하는 영역 )

(14)

나모 웹 에디터에서의 레이어 사용하기



메뉴 : 삽입 | 레이어 선택

그림을 삽입

(15)

나모 웹 에디터에서의 레이어 사용하기



메뉴 : 삽입 | 레이어 선택

레이어 핸들 ( 레이어 선택 및 이동할 때 사용 )

그림을 삽입

“레이아웃 정렬” 도구 막대의 내용 맞추기 버튼

레이어 안의 내용에 맞게 레이어의 크기가 조정

(16)

( 350, 50 ) 좌표

좌표 변경

이동

(17)

( 350, 50 ) 좌표

( 20, 400 ) 좌표 이동

(18)

 z-index 속성

z-index : 1 설정

z-index : 2 설정

z-index : 3 설정

<< z-index 값이 크면 레이어 앞에 나타남 >>

z-index : 3

z-index : 2

(19)

하이브리드웹설계