[HTML] <DIV> 태그

원본 : 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통