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

레이어(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 : 브라우저 기준으로 위치 (레이어 태그 위치와 무관)

절대좌표 레이어 넣은 곳 :

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

상대좌표 레이어 넣은 곳 :

레이어 위치를 절대 좌표를 이용할 경우 브라우저 전체 기준으로 위치하며 레이어 태그의 위치와는 관계가 없다

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

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

* 상대좌표의 예제 경우는 테이블 속에 있으므로 상위태그로 td 태그임.

레이어 속의 내용은 <div> ~ </div> 사이에 넣으면 되고 실제 이 속에도 테이블 태그를 이용해서 배치나 디자인을 하게된다.

레이어 left,top .................................................

레이어 위치를 잡으려면 left,top 을 사용한다.

absolute에서 이 값을 사용하면 브라우저 창을 기준으로 위치를 잡기 때문에 기존 본문내용과 동 떨어져 따로 움직일 수가 있다. 특히 본문이 가운데 정렬일 경우 !!!

relative에서는 상위태그 기준이므로 상위태그내에서 항상 일정한 위치에 레이어가 놓이지만....

absolute 에서 레이어를 브라우저 기준이 아닌 항상 본문 내용의 일정한 부분에 위치시키고 싶다면 left, top 을 지정하지 않는게 좋은 방법이다!!!!!

■ absolute 에서 본문내용의 원하는 위치에 레이어 놓기

* 아래는 같은 레이어를 3개의 칸을 가진 테이블에 넣어본 것이다.
* table태그를 잘 활용하면 본문내용과 항상 일치하는 곳에 레이어를 사용할 수 있다.

* left ,top 설정 없음!

■ relative 에서는 본문내용 속에 레이어가 비집고 들어가므로 레이어 속의 내용이 그 사이에 들어와도 좋은 지를 보고 위치를 잡아야 한다.

* left,top 으로 상위태그 기준으로 위치를 줄 수 있다.

레이어 앞의 내용

레이어 뒤의 내용

레이어 앞의 내용

레이어 뒤의 내용

relative인 경우 아래 예제는 상위 태그인 td에서 left로 30, top 에서 30 떨어진 곳에 위치하게 된다.

left 값은 도움이 될 수 있지만 top 값은 내용과 이상한 배치가 일어날 수 있다.

레이어 좌표에 대해 .................................................

레이어에서 절대좌표와 상대좌표는 중요하다.

절대좌표로 사용한 경우 레이어가 본문 내용위에 올려지지만
상대좌표로 레이어를 올릴 경우 본문내용을 밀치고 아래로 들어간다.

아래는 left,top 없이 사용하여 상위태그(여기선 테이블 속이므로 td가 상위태그가 됨) 기준으로 left 정렬로 위치한다.

left,top 에 대한 자세한 애기는 앞에서 참고하시길....

■ absolute사용시

텍스트 뒤에 위치

텍스트앞에 위치

■ relative사용시

텍스트 뒤에 위치

텍스트 앞에 위치

위의 2개의 레이어는 모두 높이 20픽셀의 테이블 속에 들어가 있지만 절대좌표는 기존 테이블위에 레이어가 올라왔지만...

아래 상대좌표는 기존 태그속에 내용이 비집고 들어가게 된다.

필요에 따라 적절한 좌표를 사용해야겠다.

레이어 overflow .................................................

레이어 속의 내용이 넘칠 경우 사용할 수 있는 옵션으로

overflow:visible ==> 레이어 크기를 키워서 보여준다 (* 디폴트)
overflow:hidden ==> 레이어 크기만큼만 보여준다
overflow:auto ==> 내용에 따라 자동으로 스크롤을 만든다
overflow:scroll ==> 무조건 스크롤바를 생성한다

x,y 에 대해 다르게 적용할 경우 overflow-x:hidden;overflow-y:scroll 처럼!

* 특히 미리 내용의 크기를 알 수 없는 경우(디비의 자료를 레이어에 출력하는...) 선택을 해야한다

■ overflow:visible(디폴트)

<div id="Layer111" style="position：absolute; width:100px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;">레이어(Layer)란
층을 의미한다. 포토샵을 시작한 사람은 레이어의 의미를 잘 알고 있을 것이다. </div>