float


float

HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다

HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한"> 11-01_float

float


float

HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다

HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한"> 11-01_float

float


float

HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다

HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-01_float</title>
<!--
	# float
	- 레이아웃을 구성할 때 블록레벨 요소를 가로 정렬하기 위해 사용.  
-->
<style type="text/css">
/* content */
.content {
	border: 1px solid gray;
	width: 50%;
	padding: 10px;
}
.logo {
	float: left;
}

/* box */
.box_area {
	width: 50%;
}
.box {
	width: 100px;
	height: 100px;
	font-size: 20px;
	font-weight: bold;
}

.red { background-color: red; }
.green { background-color: green;}
.blue { background-color: blue;}
.orange { background-color: orange;}

.red, .green { float: left;}
.blue, .orange { float: right;}
</style>
</head>
<body>
	<h1>float</h1>
	<br>
	<h2>float</h2>
	<div class="content">
		<p class="logo"><img src="../../image/img/html5.jpg"></p>
		<p>
			HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 
웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다
		</p>
		<p>
		HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.
		</p>
	</div>
	<br>
	<hr>
	<h2>float box</h2>
	<div class="box_area">
		<div class="box red">red</div>
		<div class="box green">green</div>
		<div class="box blue">blue</div>
		<div class="box orange">orange</div>
	</div>
</body>
</html>