<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<!--
<script>
window.onload=function(){
allP=document.getElementsByName("p");
for(i=0; i<allP.length; i++){
allP[i].onclick=function(){
allP[i].style.display="none";
}
}
}
객체.메서드(파라미터)
$(document).ready(function(){
$("p").click(function(){
$(this).hide(1000);
});
});
</script>
-->
<style>
#div1{
background-color: #9F0;
position:absolute; /* 절대 */
/* 절대위치 선언하자마자 나의 공간이 사라집니다
자리를 차지하지 않으며 붕 떠있다 */
top:100px; left:50px;
}
#div2{
background-color: yellow;
position:relative; /* 상대좌표를 쓰겠다 */
/* 상대좌표는 자신의 공간을 그대로 유지합니다
원래 자기가 있던 위치기준으로 */
top:40px; left:40px;
}
#span2{
background-color:#FC0;
/*display:block;*/
/* div에 적용된 기본속성
화면의 왼쪽 끝부터 오른쪽 끝까지 차지 */
display:none; /* 자신만의 공간이 사라집니다 */
}
#span1{
background-color:#99C;
visibility:hidden; /* 자신만의 공간을 유지한다. 화면에는 안보임 */
}
</style>
</head>
<body>
안녕하세요<br/>
<span id="span1"> 스팬1 </span>
<span id="span2"> 스팬2 </span>
<span id="span3"> 스팬3 </span>
안녕하세요<br/>
<div id="div2"> 두번째 div </div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="div1"> 첫번째 div </div> <br/><br/><br/><br/>
<div id="image1">
<img src="http://sogangori.com/www/icon/Capitan-S-icon.png" />
<div id="title"> HTML </div>
</div>
<style>
#image1{
width:200px;
}
#image1 img{
width:200px;
}
#title{
position:relative;
top:-30px;
background-color:white;
opacity:0.5;
text-align:center;
}
</style>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<!--
<script>
window.onload=function(){
allP=document.getElementsByName("p");
for(i=0; i<allP.length; i++){
allP[i].onclick=function(){
allP[i].style.display="none";
}
}
}
객체.메서드(파라미터)
$(document).ready(function(){
$("p").click(function(){
$(this).hide(1000);
});
});
</script>
-->
<style>
#div1{
background-color: #9F0;
position:absolute; /* 절대 */
/* 절대위치 선언하자마자 나의 공간이 사라집니다
자리를 차지하지 않으며 붕 떠있다 */
top:100px; left:50px;
}
#div2{
background-color: yellow;
position:relative; /* 상대좌표를 쓰겠다 */
/* 상대좌표는 자신의 공간을 그대로 유지합니다
원래 자기가 있던 위치기준으로 */
top:40px; left:40px;
}
#span2{
background-color:#FC0;
/*display:block;*/
/* div에 적용된 기본속성
화면의 왼쪽 끝부터 오른쪽 끝까지 차지 */
display:none; /* 자신만의 공간이 사라집니다 */
}
#span1{
background-color:#99C;
visibility:hidden; /* 자신만의 공간을 유지한다. 화면에는 안보임 */
}
</style>
</head>
<body>
<img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
안녕하세요<br/>
<span id="span1"> 스팬1 </span>
<span id="span2"> 스팬2 </span>
<span id="span3"> 스팬3 </span>
안녕하세요<br/>
<div id="div2"> 두번째 div </div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="div1"> 첫번째 div </div> <br/><br/><br/><br/>
<div id="image1">
<img src="http://sogangori.com/www/icon/Capitan-S-icon.png" />
<div id="title"> HTML </div>
</div>
<style>
#image1{
width:200px;
}
#image1 img{
width:200px;
}
#title{
position:relative;
top:-30px;
background-color:white;
opacity:0.5;
text-align:center;
}
</style>
<img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<!--
<script>
window.onload=function(){
allP=document.getElementsByName("p");
for(i=0; i<allP.length; i++){
allP[i].onclick=function(){
allP[i].style.display="none";
}
}
}
객체.메서드(파라미터)
$(document).ready(function(){
$("p").click(function(){
$(this).hide(1000);
});
});
</script>
-->
<style>
#div1{
background-color: #9F0;
position:absolute; /* 절대 */
/* 절대위치 선언하자마자 나의 공간이 사라집니다
자리를 차지하지 않으며 붕 떠있다 */
top:100px; left:50px;
}
#div2{
background-color: yellow;
position:relative; /* 상대좌표를 쓰겠다 */
/* 상대좌표는 자신의 공간을 그대로 유지합니다
원래 자기가 있던 위치기준으로 */
top:40px; left:40px;
}
#span2{
background-color:#FC0;
/*display:block;*/
/* div에 적용된 기본속성
화면의 왼쪽 끝부터 오른쪽 끝까지 차지 */
display:none; /* 자신만의 공간이 사라집니다 */
}
#span1{
background-color:#99C;
visibility:hidden; /* 자신만의 공간을 유지한다. 화면에는 안보임 */
}
</style>
</head>
<body>
<img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
안녕하세요<br/>
<span id="span1"> 스팬1 </span>
<span id="span2"> 스팬2 </span>
<span id="span3"> 스팬3 </span>
안녕하세요<br/>
<div id="div2"> 두번째 div </div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div id="div1"> 첫번째 div </div> <br/><br/><br/><br/>
<div id="image1">
<img src="http://sogangori.com/www/icon/Capitan-S-icon.png" />
<div id="title"> HTML </div>
</div>
<style>
#image1{
width:200px;
}
#image1 img{
width:200px;
}
#title{
position:relative;
top:-30px;
background-color:white;
opacity:0.5;
text-align:center;
}
</style>
<img style="position:fixed;" src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif"/>
<div id="background">
<div id="desc">
border-width:5px; //4방향 다
border-width:5px 10px; // 위 아래는 5, 왼쪽 오른쪽 10
border-width:5px 10px 15px; //위 5 ,오른쪽 10 ,아래 15 , 왼쪽 10
</div>
</div>
<style>
#background{
/*repeat ,no-repeat, repeat-x, repeat-y*/
background:url('http://www.w3schools.com/images/w3css3_nomirror.gif') repeat;
width:200px;
height:200px;
margin:50px;
padding:200px;
border:5px solid black;
text-align:center;
vertical-align:middle;
}
#desc{
margin:30px;
border:5px solid black;
background-color:white;
opacity:0.3;
}
</style>
</body>
</html>
