레이어(Layer)란 ?

그래듀에이션보다 많은 층을 표현할 때 사용하는 것 레이어 : 위가 짧고 아래가 긴 스타일 레이어 : 90도 이상 각도를 들어서 자르는 층이 많은 커트 (출처 - http://kin.naver.com/openkr/detail.nhn?docId=173794 )

라고 합니다.


더 쉽게 예기하면 포토샾을 하신분들은 레이어를 많이사용하시니 같은개념으로 이해하심 됩니다.

즉 하나의 층을 이야기합니다.


css로 2개의 층을 만들고 그것을 띄웠다 사라졌다를 관리할 수 있습니다.


고양이 메일링 서비스 ( http://bubibuba.tistory.com/77 ) 소스를 참고하여 설명 드리겠습니다.


style.css 파일을 보시면 레이어가 구현이 되어있습니다.

이중 Layer1를 띄웠다 사라졌다 하는 부분을 설명드리면


 
//레이어 1번
#Layer1 {
              border:2px solid #ff6600;
              background:white;
              position:absolute; 
              top:50%; 
              left:50%; 
              width:450px; 
              height:500px; 
              margin-left: -225px; 
              margin-top: -300px;
              visibility:hidden;
          }
위처럼 레이어를 css로 구현을 해 둡니다.

그리고 위 이미지의 Join 버튼을 누르면 Layer1이 출력이 되게 되는데 main.php 의 소스를 보면

<input type="button" value="JOIN" class="button" onclick="Layer1.style.visibility='visible'" style="margin-left:30px">

위 부분에서 구현이 되는걸 확인할 수 있습니다.

OnClick를 보시면 Layer1이 hidden -> visible로 변경되면서 화면이 출력됩니다.




이런식으로 말이죠.. 반대로 Back부분을 보면 화면이 사라지는데

그부분은 위와 마찬가지로

<input class="button" type="button" value="BACK" OnClick="Layer1.style.visibility='hidden'" style="margin-left:30px"> 


 Layer1을  visible -> hidden 로 변경 시켜 화면에서 사라지게 합니다.


소스를 꼭 다운받으셔서 보시는것을 추천드립니다.


 
#footer {
              position:absolute; 
              clear:left; 
              float:left; 
              width:100%; 
              
              left:0; 
              bottom:0px;            
          }


아래속성을 참고로하여 필요한 부분만 수정해주면 됩니다.


+ Recent posts