배치 방법, Float
position 프로퍼티를 이용한 배치 방법
- 정적 배치 - position : static(디폴트)
- 상대 배치 - position : relative
- 절대 배치 - position : absolute
- 고정 배치 - position : fixed
- 유동 배치 - float : left 혹은 float : right
유동 배치, Float
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
#float {
float: right;
/* 뷰포트의 오른쪽에 붙여 */
border: 1px dotted rgb(0, 0, 0);
width: 12em;
height: 12em;
/* 7개의 글자 크기 */
padding: 0.5em;
margin: 1em;
background-color: chartreuse;
}
</style>
</head>
<body>
<h3>배치 방법, Float</h3>
<hr>
<h3>position 프로퍼티를 이용한 배치 방법</h3>
<ul>
<li>정적 배치 - position : static(디폴트)</li>
<li>상대 배치 - position : relative</li>
<li>절대 배치 - position : absolute</li>
<li>고정 배치 - position : fixed</li>
<li><strong>유동 배치</strong> - float : left 혹은 float : right </li>
</ul>
<hr>
<h3>유동 배치, Float</h3>
<hr>
<div>
<p id="float">
<br> ▶ 배치 방법<br><br>
<a href="CSS_RELATIVE_POSITION.html" style="text-decoration : none;" target="section"> 1. Relative
Position</a><br>
<a href="CSS_ABSOLUTE_POSITION.html" style="text-decoration : none;" target="section"> 2. Absolution
Position</a><br>
<a href="CSS_FIXED_POSITION.html" style="text-decoration : none;" target="section"> 3. Fixed
Position</a><br>
<a href="CSS_FLOAT_POSITION.html" style="text-decoration : none;" target="section"> 4. Float
Position</a><br>
</div>
<hr>
</body>
</html>
]]>