웹마스터 팁

CSS 와 DIV 태그로 레이어 나타내기

먼저 <head></head> 부분에 아래의 방식으로 스타일시트를 구성합니다

<style type="text/css">
#layer1{                /** 첫 번째 레이어에 사용할 레이어의 위치와 모양입니다 ***/
        position:absolute;
        LEFT:100; TOP:100; /** 위에서 100 픽셀, 왼쪽에서 100픽셀 떨어진 곳에 보여집니다 ***/
        width:200; height:100; /** 가로 200 픽셀, 높이 100 픽셀입니다 ***/
  background-color:orange; /** 배경색은 오렌지색 ***/
        }
#layer2{              /** 두 번째 레이어에 사용할 레이어의 위치와 모양입니다 ***/
        position:absolute;
        TOP:200; LEFT:300;     /** 위에서 200 픽셀, 왼쪽에서 300픽셀 떨어진 곳에 보여집니다 ***/
        width:200; height:100; /** 가로 200 픽셀, 세로 100 픽셀짜리 레이어 입니다 ***/
        background-color:lightgreen; /** 배경색은 밝은 그린색입니다 ***/
}
</style>

 <body></body> 에서는 아래처럼 레이어를 보여줄 수 있습니다

<div id=layer1>
오렌지색 레이어
</div>

<div id=layer2>
연두색 레이어
</div>

예제사이트 : http://www.itbank.kr