<html lang="ko">
<head>
<meta charset="utf-8">
<title>relative 배치</title>
<style>
div {
display : inline-block;
height:50px;
width:50px;
border:1px solid lightgray;
color:white;
background:red;
}
#down:hover {
position:relative;
left:20px;
top:20px;
background:green;
}
#up:hover {
position:relative;
right:20px;
bottom:20px;
background:green;
}
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
h와 k글자에 마우스를 올려 보세요.
<hr>
<div>T</div>
<div id="down">h</div>
<div>a</div>
<div>n</div>
<div id="up">k</div>
<div>s</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
span {
display:block;
width:100px;
height:60px;
background:rgb(184, 184, 222)
}
</style>
</head>
<body>
<h3>span 태그를 display:block으로</h3>
<hr>
<div>
<span>block span</span>과
<span>block span</span>입니다.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div div {
display : inline;
background : yellowgreen;
}
</style>
</head>
<body>
<h3>div를 display : inline으로</h3>
<hr>
<div style="background : orange">
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div div {
border : 2px dotted orangered;
background: powderblue;
margin:10px;
width:60px;
height:80px;
}
</style>
</head>
<body>
<h3>span을 display:block으로</h3>
<hr>
<div style="background:orange">
<div>inline DIV</div>
<div>inline DIV</div>
<div>inline DIV</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border:2px solid yellowgreen;
color:blue;
background:aliceblue;
}
span {
border:3px dotted red;
background:yellow;
}
</style>
</head>
<body>
<h3>인라인, 인라인 블록, 블록</h3>
<hr>
나는 <div style="display:none;">div(none)</div>입니다.<br><br>
나는 <div style="display:inline;">div</div><br><br>
나는 <div style="display:inline-block; height:50px;">div</div><br><br>
나는 <div>div<span style="display:block">span(block)</span>입니다.</div>
</body>
</html>
