[HTML] 레이어(Layer) 속성 설정하기

=======================================================================================

레이어는 기존의 창에 투명한 창을 겹쳐놓은것과 같은 기능을 하는것입니다.

즉 투명한 창에 그림이나 글자같은 요소를 넣을수 있고 또 그것은 기존창과 독립적으로 배치가 가능하고

또 움직이는 애니메이션효과까지 적용할수 있습니다.

단 이런 레이어를 사용하게 되면 문서의 요소들을 사용자의 의도대로 배치할수 있기때문에 많이 사용하지만

브라우저마다 지원하는 태그가 약간씩 다르기 때문에 주의하셔야 합니다.

여기서는 익스플로러와 넷스케이프에서 공통적으로 사용할수 있는 레이어태그를 기준으로 설명하겠습니다.

=======================================================================================

 <Div>레이어를 만들어주는 태그
 
 레이어를 만들어 주려면 <Div>태그안에 position:absolute라는 스타일을 적용시켜야 합니다.
여기서 <Div>태그는 그안의 내용을 문단으로 나누어 주는 역할을 하는 태그입니다.

그 태그에 position:absolute속성을 주어야만 비로소 레이어의 역할을 하게 되는 것입니다.

 
<Div>태그에 id라는 속성을 사용하여 레이어의 이름을 표시할수 있습니다.

즉 레이어가 여러개일때 각각을 구분해지는 표시가 되는것이죠.

 
 레이어를 삽입하는 형태는 다음과 같습니다.

<Style type="text/css">
      #이름{ position:absolute; }
</Style>
:
:
<Div id="이름">레이어안에 들어갈 내용</Div>

=======================================================================================

 LEFT / TOP
 
 left와 top속성은 레이어의 위치를 설정하는 것으로 그 속성값은 left 는 브라우저

좌측경계으로부터의 거리..top은 브라우저 상단경계로 부터의거리를 각각 수치로 입력하면 됩니다.

그 표현은 다음과 같습니다.
그 의미는 브라우저 상단과 좌측으로부터 100픽셀씩 떨어진 곳에 임의의 레이어를 만든다는 것입니다.

#이름 { position:absolute; left:100px; top:100px; }

 =======================================================================================

 WIDTH / HEIGHT : 너비와 높이
 
 width와 height속성은 레이어의 크기를 설정하는 속성입니다.

속성값으로 width는 레이어의 너비를 height는 레이어의 높이를 수치로 입력하면 됩니다.

그 표현은 다음과 같습니다. 그 의미는 너비200px, 높이200px의 레이어를 만든다는 것입니다

#이름 {position:absolute; width:200px; height:200px;}

 =======================================================================================

 BACKGROUND-COLOR : 배경색
 
 background-color속성은 레이어의 배경색을 설정하는 속성입니다.

속성값으로 색이름이나 RGB색상코드를 입력합니다.

그 표현은 다음과 같습니다. 그 의미는 레이어의 배경색을 검은색으로 설정한다는 것입니다.

#이름 {position:absolute; background-color:black; }
 
=======================================================================================

 BACKGROUND-IMAGE : 배경이미지
 
 background-image속성은 레이어의 배경이미지를 설정하는 속성입니다.

속성값으로 url(배경이미지경로및파일명)을 가집니다.

그 표현은 다음과 같습니다. 그 의미는 레이어의 이미지를 1.gif로 설정한다는 것입니다.

#이름 {position:absolute; background-image:url(1.gif); }

 =======================================================================================

VISIBILITY
 
visibility속성을 사용해서 레이어를 보여줄것인지 또는 감출것인지를 설정하는 속성입니다.

속성값으로 hidden과 visible를 가지는데.. hidden은 레이어를 보이지 않게 visible은 레이어를 보이게 설정해줍니다.

그 표현은 다음과 같습니다. 그 의미는 레이어를 감춘다는 의미입니다.

#이름 {position:absolute; visibility:hidden; }
 
=======================================================================================

 Z-INDEX : 레이어상하관계
 
레이어를 문서에 넣어줄때는 한꺼번에 여러개의 레이어를 넣는 것도 가능합니다.

레이어는 투명한 창을 겹쳐놓은것과 같다 말씀드렸습니다.

당연히 레이어의 내용이 서로 겹치게 되면 위쪽에 있는 레이어의 내용이 보이게 되겠죠??

 
 z-index속성은 레이의 상하관계를 숫자로 설정해주는 속성으로 속성값의 숫자가 클수록

위쪽에 배치된다고 생각하시면됩니다.

즉 z-index의 속성값이 클수록 우선적으로 보여지는 것이죠..

그 표현은 다음과 같습니다.

#이름 {position:absolute; z-index:3;}
 
=======================================================================================

 CLIP
 
clip속성을 사용하게 되면 레이어의 일부분만 보여줄수 있습니다.

즉 일정영역을 설정하여 그 부분만 보여주고 나머지 부분은 보이지 않게 설정하는 것입니다.

그 속성값으로 일정영역을 설정하는 rect값을 가지는데.. rect()괄호안에는 4개의 좌표값이 순서대로 들어갑니다.

 
rect()괄호안에 들어갈 좌표가 잘못설정되면 안되니 주의해서 보세요..

첫번째 들어갈 좌표는 레이어 왼쪽경계로부터 보여줄영역의 왼쪽경계까지 거리
두번째 들어갈 좌표는 레이어 왼쪽경계로부터 보여줄영역의 오른쪽경계까지 거리
세번째 들어갈 좌표는 레이어 상단경계로부터 보여줄영역의 하단경계까지 거리
네번재 들어갈 좌표는 레이어 상단경계로부터 보여줄부분의 상단 경계까지 거리

 
그 표현은 다음과 같습니다.

의미는 레이어의 상단으로부터 50픽셀, 레이어 왼쪽으로부터 50픽셀 떨어진 거리에 가로200, 세로50만큼의 영역만 보여준다는 것입니다.

#이름 {position:absolute; clip:rect(50 250 100 50);}
 
=======================================================================================