배치 방법, Position
position 프로퍼티를 이용한 배치 방법
- 정적 배치 - position : static(디폴트)
- 상대 배치 - position : relative
- 절대 배치 - position : absolute
- 고정 배치 - position : fixed
- 유동 배치 - float : left 혹은 float : right
절대 배치, Absolution
M
E
R
R
Y
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유수봉(202301001) - 절대 배치</title>
<style>
div {
display: inline-block;
position: absolute;
/* 절대 배치 */
border: 1px solid lightgray;
}
div>p {
/* div의 자식 p */
display: inline-block;
position: absolute;
/* 절대 배치 */
height: 20px;
width: 15px;
background: lightgray;
}
</style>
</head>
<body>
<h3>배치 방법, Position</h3>
<hr>
<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>절대 배치, Absolution</h3>
<hr>
<div>
<img src="christmastree.png" width="200" height="200" alt="크리스마스 트리">
<p style="left:50px; top:30px">M</p>
<p style="left:100px; top:0px">E</p>
<p style="left:100px; top:80px">R</p>
<p style="left:150px; top:110px">R</p>
<p style="left:30px; top:130px">Y</p>
</div>
<hr>
</body>
</html>
]]>