티스토리 뷰

IT 이야기/프로그래밍

[HTML] <DIV> 태그

하늘과 나b 2010. 7. 31. 12:34

원본 : http://tong.nate.com/cho7234/26100947

 

레이어란? .................................................

레이어(Layer)란 층을 의미한다. 포토샵을 시작한 사람은 레이어의 의미를 잘 알고 있을 것이다. 웹문서에 여러 겹의 층을 만들어 그 위에 올릴 수 있는 것이다.

자바스크립트와 CSS를 이용하면 원하는 층을 숨길 수도 보여줄 수도 있게 되는 것이다.

* 익스플로러와 네비게이터에서 사용법이 다르다.




■ 레이어 태그
네비게이터 전용으론 <Layer>, <iLayer> 태그를 사용하는데 익스플로러에서도 지원하는 <Div> 태그를 이용하는게 좋다.


■ <Div> ~ </Div> 태그의 속성

id 레이어 이름으로 CSS. 자바스크립트에서 이용함
position 절대좌표 position:absolute; top:100px; left:150px
브라우저 상에서 100px, 좌에서 150px 떨어짐 곳에서 시작

상대 좌표 position:relative; top:100px; left:150px
상위태그의 오른쪽 상단에서 100px, 좌에서 150px 떨어짐 곳에서 시작
top X좌표 (상단 기준)
left Y좌표 (좌측 기준)
width 레이어 너비
height 레이어 높이
overflow 레이어속의 내용이 레이어보다 클 경우
scroll 은 스크롤바 생성
auto는 내용에 따라 자동으로 스크롤바 생성
visible은 레이어 크기가 변경
hidden은 넘치는 영역을 보여주지 않는다.
visibility 레이어를 보여줄지 말지를 결정하는 속성으로
visible 은 보여주고
hidden 은 보여주지 않는다.
inherit 은 레이어 안에 레이어가 있을 경우 부모 레이어의 이 속성을 상속한다.
z-index 레이어가 겹칠 경우 이 값이 큰 경우 더 위(앞)로
background-color 레이어의 배경색


■ 레이어 위치 absolute : 브라우저 기준으로 위치
(레이어 태그 위치와 무관)
<div id="Layer1" style="position:absolute; width:200px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible; left: 100; top: 1100;"></div>
절대좌표 레이어 넣은 곳 :


■ 레이어 위치 relative : 상위 태그를 기준으로 위치한다 (td,font)

<div id="Layer2" style="position:relative; width:200px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible; left:100px"></div>
상대좌표 레이어 넣은 곳 :
레이어 위치를 절대 좌표를 이용할 경우 브라우저 전체 기준으로 위치하며 레이어 태그의 위치와는 관계가 없다

그러나 상대좌표로 하게되면 레이어 태그의 상위 태그(font 나 td 같은 태그)를 기준으로 위치하므로 레이어 태그를 잘 두어야 한다.

left와 top으로 상위 태그로부터 간격을 조정할 수 있다.

* 상대좌표의 예제 경우는 테이블 속에 있으므로 상위태그로 td 태그임.
레이어 속의 내용은 <div> ~ </div> 사이에 넣으면 되고 실제 이 속에도 테이블 태그를 이용해서 배치나 디자인을 하게된다.

출처 : Tong - cho7234님의 dhtml/css통

댓글