HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Workin">
float-box
HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Workin">
float-box
HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Workin">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-02_float-clear</title>
<!--
# clear
- float 속성을 해제.
-->
<style type="text/css">
.clear::after { /* ::after - 요소 내용 끝에 새로운 컨텐츠를 추가 */
content: ""; /* 빈 컨텐츠 - 가상 요소(::after)를 실행시키기 위해서 필요 */
display: block; /* 한줄 차지 */
clear: both;
}
div {
font-size: 20px;
font-weight: bold;
}
.box_area {
border: 1px solid gray;
width: 600px;
height: 600px;
}
.box {
padding: 10px;
}
.red {
width: 580px;
height: 100px;
background-color: red;
}
.green {
width: 200px;
height: 300px;
background-color: green;
float: left;
}
.blue {
width: 200px;
height: 300px;
background-color: blue;
float: right;
}
.orange {
width: 580px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<h2>float-box</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="clear"></div>
<div class="box orange">orange</div>
</div>
</body>
</html>