배치 방법, Position
normal flow
- 웹 페이지에 나타난 순서대로 HTML 태그 배치
- position 프로퍼티를 이용하여 normal flow 무시 가능
position 프로퍼티를 이용한 배치 방법
- 정적 배치 - position : static(디폴트)
- 상대 배치 - position : relative
- 절대 배치 - position : absolute
- 고정 배치 - position : fixed
- 유동 배치 - float : left 혹은 float : right
상대 배치, relative
T
h
a
n
k
s
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유수봉(202301001) - 상대 배치</title>
<style>
div {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid lightgray;
text-align: center;
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>배치 방법, Position</h3>
<hr>
<h3>normal flow</h3>
<ul>
<li>웹 페이지에 나타난 순서대로 HTML 태그 배치</li>
<li>position 프로퍼티를 이용하여 normal flow 무시 가능</li>
</ul>
<h3>position 프로퍼티를 이용한 배치 방법</h3>
<ul>
<li>정적 배치 - position : static(디폴트)</li>
<li>상대 배치 - position : relative</li>
<li>절대 배치 - position : absolute</li>
<li>고정 배치 - position : fixed</li>
<li>유동 배치 - float : left 혹은 float : right </li>
</ul>
<hr>
<h3>상대 배치, relative</h3>
<hr>
<div>T</div>
<div id="down">h</div>
<div>a</div>
<div>n</div>
<div id="up">k</div>
<div>s</div>
<hr>
</body>
</html>
]]>