* 레이어란?
레이어는 웹 문서상에 여러가지 객체들(그림, 글, 표등)을 삽입할 수 있는 객체로서 문서 내에 존제하는 하나의 작은 문서처럼 생각하면 이해하기 좋을듯 합니다. 레이어는 한 문서에 여러 개를 삽입할 수 있으며 하나의 레이어 위에 여러 개의 레이어를 겹처 쌓을 수도 있습니다. 또한 레이어를 보이게 또는 보이지 않게 지정할 수 있으며 원하는 위치에 놓고 움직이는 효과를 적용할 수 있습니다. 따라서 글이나 그림처럼 그 위치를 자유롭게 설정할 수 없던 객체들도 레이어 내부에 삽입하게 되면 객체들을 원하는 위치에 배치할 수 있으며 레이어의 특성을 이용하여 동적인 효과를 만들 수도 있습니다.
[ 레이어란 층입니다. 샌드위치나 햄버거를 생각해보면 빵안에 치즈 야채 고기를 쌓아놓습니다.
빵,치즈,야채,고기 모두 층이며 레이어입니다.
그런데 맨밑에 빵이 있고 그위에 고기가 있다고 치면 빵은 안보이죠? 왜냐 고기가 있기 때문이죠.
그 위에 다시 야채를 넣으면 고기,빵 둘다 안보입니다. 이런 개념을 웹에 도입하면 자유로운 레이아웃이 가능해집니다. 참고로 고기, 빵,야채는 사이즈도 조정할 수 있답니다.]
* 레이어 만들기
레이어를 만들려면 레이어를 삽입할 곳에 커서를 위치 시키고 메뉴에서 [삽입]->[레이어]을 선택하거나 기본 도구 막대에서 [레이어 삽입하기]버튼을 이용할 수 있습니다. 레이어를 만들 때 기본 도구 막대에서 [서식 보이기/감추기]버튼을 보이기로 설정해 놓아야 편집 창에 레이어 앵커가 표시되며 또한 메뉴에서 [보기]->[부호]->[레이어]를 선택해야 편집창에 레이어 영역이 나타납니다.
* 레이어 사용법
Div태그에 position:absolute스타일을 주어야 레이어가 됩니다.
div태그내에 스타일을 정의하여 사용하는 방법
<div style="position:absolute;">
내용
</div>
스타일로 설정할때 사용하는 방법
<style>
#name {position:absolute;}
</style>
<div id="name">
내용
</div>
LAYER Property
property skill
id 레이어 이름 지정
left 브라우저 문서 좌측상단에서 좌측거리 지정
top 브라우저 문서 좌측상단에서 상단거리 지정
width 레이어의 너비를 지정
height 레이어의 높이를 지정
z-index 레이어의 순위를 결정
background-color 레이어의 배경색상을 지정
background-image:url(파일이름) 배경이미지 지정
visibility 레이어의 숨김기능을 사용합니다.
LAYER Example(1)
<html>
<head>
<title>레이어 예제1</title>
</head>
<body bgcolor="pink">
<div style="position:absolute;left=100;top=100;width=100;height=200;background-color=red;">
요렇게 레이어가 만들어졌습니다.
</div>
</body>
</html>
LAYER Example(2)-이미지를 하나 업로드 합니다.
<html>
<head>
<title>레이어 예제2</title>
</head>
<body bgcolor="pink">
<div style="position:absolute;left=40;top=20;width=100;height=200;z-index:1">
<img src="byc.jpg">
</div>
<div style="position:absolute;left=40;top=100;width=100;height=200;z-index:2">
<img src="love.jpg">
</div>
<div style="position:absolute;left=100;top=150;width=100;height=200;z-index:3">
<img src="love.jpg">
</div>
</body>
</html>
LAYER Example(3)-이미지를 하나 업로드 합니다.
<html>
<head>
<title>레이어 예제1</title>
</head>
<body bgcolor="pink">
<div style="position:absolute;left=40;top=20;width=400;height=400;z-index:1;background-image:url(byc.jpg)">
우리 자기 뭐하나요?<br>
하하하하하하하하하<br>
배고프지 않나요?<br>
</div>
</div>
</body>
</html>
※ layer는 하나일때는 z-index가 작동을 안하고 2개 이상일때 작동한다.
※ 레이어의 크기보다 더큰 이미지를 넣으면 가로세로가 이미지 크기에 맞게 늘어나지만
텍스트일경우에는 레이어의 세로크기만 맞추어 집니다.
※ 레이어에 배경이미지를 넣을때 레이어크기보다 배경이미지가 커도 레이어크기는 원래 설정대로 보이게 됩니다.