float
float 레이아웃을 구성할 때 블록레벨 요소를 가로 정렬하기 위해서 사용합니다
<!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{
border: 1px solid #000000;
width: 50%
}
.box{
border: 1px solid silver;
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{
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>
HTML content HTML content HTML content HTML content HTML content HTML content
HTML content HTML content HTML content HTML content HTML content HTML content
HTML content HTML content HTML content HTML content HTML content HTML content
HTML content HTML content HTML content HTML content HTML content HTML content
HTML content HTML content HTML content HTML content HTML content HTML content
HTML content HTML content HTML content HTML content HTML content HTML content
</p>
<p>
CSS float CSS float CSS float CSS float CSS float CSS float CSS float CSS float
CSS float CSS float CSS floatCSS float CSS float CSS float CSS float CSS float
</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>::after
.clear::after{/* ::after -> 요고 내용 끝에 새로운 컨텐츠를 추가 */
content: "";/* 빈 컨텐츠: 가상 요소(::after)를 실행시키기 위해서 필요 */
display: block;/* 한줄 차지 */
clear: both;
}
/*.클래스명 {clear: both;*/}/*-- float속성 해체*/- 이런식으로 단독으로 사용할 수 있으나 위의 방법을 사용하는 것이 좋음
하얀색 부분이 float의 clear을 사용한결과
응용 결과물
http://localhost:8080/test/CSS/11_float/11-05_float-menu.html
http://localhost:8080/test/CSS/11_float/11-06_float-menu.html
http://localhost:8080/test/CSS/11_float/11-07_quiz-menu.html
http://localhost:8080/test/CSS/11_float/Quiz_%EC%9B%B9%ED%88%B0.html
바다속 무너 개발자