23. 레이어의 다양한 속성
.NET프로그래밍/CSS 2.0 2009. 7. 29. 22:54 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>레이어의 다양한 속성</title>
</head>
<body>
<div style="background-color:Red;width:100px;height:100px;
position:absolute;z-index:1;left:170px;top:170px;"> <!-- position, z-index, left, top은 짝꿍처럼 같이 쓰인다. -->
1번 영역(레이어)
</div>
<div style="background-color:Green;width:100px;height:100px;
position:absolute;z-index:0;left:100px;top:110px;">
2번 영역(레이어)
</div>
<div style="background-color:Blue;width:100px;height:100px;
overflow-y:scroll;white-space:normal;"> <!-- 'overflow'는 정해진 사이즈의 레이어(영역)를 초과하는 텍스트를 말함 -->
3번 영역 : 안녕하세요. 반갑습니다. 또 만나요...언제요?
</div>
<div style="background-color:Silver;width:100px;height:100px;
overflow:hidden;white-space:nowrap;"> <!-- 영역(레이어)만큼만 텍스트 보이게 함. 레이어 밖으로 나간 텍스트는 안보임. -->
4번 영역 : 안녕하세요. 반갑습니다. 또 만나요...
</div>
<div id="five" style="background-color:Yellow;width:100px;height:100px;
visibility:hidden; display:block;
">
5번 영역
</div>
<!-- 이 부분은 JavaScript 사용 : 동적인 기능 처리 -->
<script type="text/javascript">
function Showfive() {
if (document.getElementById("five").style.visibility != "visible") { /* != "visible" --> "안보이면", not의 의미이다 */
document.getElementById("five").style.visibility = "visible";
document.getElementById("five").style.display = "block";
}
else {
document.getElementById("five").style.visibility = "hidden";
document.getElementById("five").style.display = "none";
}
}
</script>
<input type="button" value="5번 레이어 보이기" onclick="Showfive();" /> <!-- 클릭시 Showfive함수 호출 -->
</body>
</html>
<!--
'1번영역'과 '2번영역'에서 position:absolute;z-index:1;left:170px;top:170px;를 보면
- absolute:절대좌표(웹 브라우저에 떠있는 형태로 바꿀 수 있음) / relative:상대좌표
- z-index : 레이어 포개는 순서
- left:170px;top:170px; ==> 가로로 170px, 세로로 170px 떨어져 있음
'3번영역'에서
- overflow-y:scroll; ==> 세로 스크롤바 생김. overflow만 쓰면 가로 세로 스크롤바 생김
- white-space:normal; ==> 영역(레이어)내부에서 텍스트가 아랫줄로 밀림
'4번영역'에서
- overflow:hidden; ==> 레이어 크기 만큼만 텍스트를 잘라 보여줌. 게시판 목록 레이아웃 시 많이 쓰임. 원래는 밑으로 밀려 내려오는게(=워드랩) 정상.
- white-space:nowrap; ==> nowrap(=no word rap). 텍스트가 아랫줄로 밀리는 현상 없앰. <nobr>태그와 같은 속성.
'5번영역'에서
- visibility:hidden; ==> 웹브라우저에 보이지는 않지만 영역(레이어)도 차지하고 있고, 레이어 안에 텍스트도 그대로 존재한다.
'hidden'대신 'visible'로 하면 레이어와 내부에 텍스트 모두 보인다.
- display:block; ==> 'display:none;'으로 하면 레이어와 안에 있는 텍스트가 모두 없어진다. 'block'으로 하면 visibility:hidden으로 해도
눈에는 보이지 않지만 영역(레이어)와 텍스트 모두 존재한다.
--->
< 실행결과 >
23.레이어의 다양한 속성.htm
--> '5번 레이어 보이기'버튼 클릭 후 결과화면
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| CSS로 레이아웃 잡기 관련 사이트 (0) | 2009.07.29 |
|---|---|
| 24. CSS 2.0관련 속성정리 (0) | 2009.07.29 |
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 20. 리스트(목록)관련스타일 (0) | 2009.07.29 |