<html>
<head>
<style type="text/css">
span
{
font-size:20;width:300;height:200;background-color:yellow;
}
div
{
font-size:20;width:200;height:150;background-color:green;
}
.rel1{position:relative;top:0px;left:0px;}
.abs1{position:absolute;top:150px;left:150;}
.abs2{position:absolute;top:300px;left:200;}
#clip1 {position:absolute;top:1700;left:150;clip:rect(0px,150px,200px,0px)}
</style>
</head>
<body>
<h1>문단의 위치지정, 폭, 높이 지정 속성</h1>
position:static(위치지정 사용못함) | relative(현재 컨텐츠의 상대적) | absolute(절대적 위치)<br>
.rel1{position:relative;top:50px;left:100;}<br>
.abs1{position:absolute;top:150px;left:150;}<br>
.abs2{position:absolute;top:300px;left:200;}<br>
<span>스펜 한글로하면 스판</span><span class="rel1" style="background-color:beige;">position:relative;top:50px;left:100; 상대적위치</span><span class="abs1">position:absolute;top:150px;left:150;절대적위치</span>
<div class="abs1">절대적 위치1</div>
<div class="abs2">절대적 위치2</div>
<br><br><br><br><br>
<h1>겹친 순서지정</h1>
z-index:수치. 수치는 클수록 위쪽<br>
<div style="position:absolute;top:550px;left:150px;">A - 겹치기 z-index적용하기전</div><div style="position:absolute;top:500px;left:200px;background-color:beige;">B - 겹치기2 z-index적용하기전</div>
<div style="position:absolute;top:550px;left:450px;z-index:255;">A - 겹치기 z-index적용후</div><div style="position:absolute;top:500px;left:500px;background-color:beige;">B - 겹치기2 z-index적용후</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>보여주는지 여부</h1>
visibility:visible(보임) | hidden(보이지 않음);<br>
<h1>범위 벗어나는 글씨처리</h1>
overflow:scroll(내용에 관계없이 스크롤바) | visible(범위를 벗어나는 내용 보여줌) | auto(자동조정) | hidden(범위를 벗어나는 내용 감춤)<br>
<div style="overflow:scroll">overflow:scroll 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:visible">overflow:visible 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:auto">overflow:auto 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:hidden">overflow:didden 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<h1>잘라서 출력</h1>
<img src="../html/image/africa.jpg" id="clip1" width="500" height="400">
</body>
</html>
<head>
<style type="text/css">
span
{
font-size:20;width:300;height:200;background-color:yellow;
}
div
{
font-size:20;width:200;height:150;background-color:green;
}
.rel1{position:relative;top:0px;left:0px;}
.abs1{position:absolute;top:150px;left:150;}
.abs2{position:absolute;top:300px;left:200;}
#clip1 {position:absolute;top:1700;left:150;clip:rect(0px,150px,200px,0px)}
</style>
</head>
<body>
<h1>문단의 위치지정, 폭, 높이 지정 속성</h1>
position:static(위치지정 사용못함) | relative(현재 컨텐츠의 상대적) | absolute(절대적 위치)<br>
.rel1{position:relative;top:50px;left:100;}<br>
.abs1{position:absolute;top:150px;left:150;}<br>
.abs2{position:absolute;top:300px;left:200;}<br>
<span>스펜 한글로하면 스판</span><span class="rel1" style="background-color:beige;">position:relative;top:50px;left:100; 상대적위치</span><span class="abs1">position:absolute;top:150px;left:150;절대적위치</span>
<div class="abs1">절대적 위치1</div>
<div class="abs2">절대적 위치2</div>
<br><br><br><br><br>
<h1>겹친 순서지정</h1>
z-index:수치. 수치는 클수록 위쪽<br>
<div style="position:absolute;top:550px;left:150px;">A - 겹치기 z-index적용하기전</div><div style="position:absolute;top:500px;left:200px;background-color:beige;">B - 겹치기2 z-index적용하기전</div>
<div style="position:absolute;top:550px;left:450px;z-index:255;">A - 겹치기 z-index적용후</div><div style="position:absolute;top:500px;left:500px;background-color:beige;">B - 겹치기2 z-index적용후</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>보여주는지 여부</h1>
visibility:visible(보임) | hidden(보이지 않음);<br>
<h1>범위 벗어나는 글씨처리</h1>
overflow:scroll(내용에 관계없이 스크롤바) | visible(범위를 벗어나는 내용 보여줌) | auto(자동조정) | hidden(범위를 벗어나는 내용 감춤)<br>
<div style="overflow:scroll">overflow:scroll 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:visible">overflow:visible 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:auto">overflow:auto 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<div style="overflow:hidden">overflow:didden 가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ가나다라 라마다 사아자 닫아아 오우 가사 믕.바ㅣ다 ㅣㅏ드 ㅏ즏 ㅇ</div>
<h1>잘라서 출력</h1>
<img src="../html/image/africa.jpg" id="clip1" width="500" height="400">
</body>
</html>
