레이어(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 로 변경 시켜 화면에서 사라지게 합니다.
소스를 꼭 다운받으셔서 보시는것을 추천드립니다.
'Programming > CSS,HTML5,JAVA Script' 카테고리의 다른 글
[JavaScript] 레이어,텍스트,이미지 변환 (0) | 2013.02.14 |
---|---|
[CSS] footer 하단에 배치하기 (0) | 2013.01.30 |
[JavaScript] 번호있는 롤링배너 (0) | 2013.01.30 |
[JavaScript] 이미지 롤링 스크립트 (깜빡이는 효과) (0) | 2013.01.30 |