float속성은 웹 요소를 문서 위에 떠있게 만듭니다. 여기서 떠있다 라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻입니다. float속성에서 사용할 수 있는 값은 왼쪽(left)과 오른쪽(right), 그리고 좌우 어느 쪽도 아닌 것(none)이 있습니다.
float속성-왼쪽이나 오른쪽으로 배치하기
float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다.
이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.
다음 예제는 이미지를 왼쪽에 떠있게 하는것으로 float속성을 사용하면 그 주변 다른 요소가 감쌉니다.
따라서 이미지와 텍스트를 나란히 표시하려고 할때는 이미지에 float속성을 사용합니다.
이미지를 왼쪽에 배치한 후 오른쪽에 오는 텍스트와 적당한 간격을 유지하기 위해 margin-right 속성도 사용합니다.
<예제>
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
#container {
width:800px;
margin:20px auto;
padding:20px;
}
.left-img {
float:left;
margin-right:25px;
}
p {
line-height:30px;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cover.jpg" class="left-img" alt="">
<h1>바쁜 3, 4학년을 위한 빠른 분수</h1>
<h2>3, 4학년이 꼭 알아야 할 분수를 한 권에 모았어요!</h2>
<p>한국 교육과정평가원이 최근 발표한 보고서에 따르면 ‘수포자’는 초등 3학년 때 분수를 배우면서 시작된다고 합니다. 분수를 어려워하는 이유는 분모와 분자, 2개의 수가 나와 낯설기 때문입니다. 이렇게 낯설고 어려운 분수, 어떻게 공부해야 할까요?</p>
</div>
</body>
</html>
|
cs |
<결과>
float 속성을 사용하면 너비 값은 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워둡니다.
<예제>
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
.box1{
padding:20px;
margin-right:10px;
background:#ffd800;
float:left;
}
.box2 {
background: #0094ff;
padding:20px;
margin-right:10px;
float:left;
}
.box3 {
background: #00ff21;
padding:20px;
float:left;
}
.box4 {
background:#ffffff;
padding:20px;
float:right;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
</body>
</html>
|
cs |
<결과>
box1 선택자가 적용된 요소가 표시된 후 오른쪽 공간에 box2 선택자를 사용한 요소가 옵니다.
다른 요소가 그 옆으로 계속 올 수 있죠.
box4 선택자는 float:right;을 사용했기 때문에 오른쪽에 붙은 것입니다.
float 속성을 이용한 레이아웃
현재 웹 페이지의 레이아웃은 대부분 float 속성을 이용하여 작성되고 있습니다.
div 요소는 가상의 margin값을 가지고 있어 기본적으로 세팅될 경우 아래와 같이 쌓입니다.
이때 float속성을 left로 주면 두 개의 블록을 서로 이어 붙일 수 있습니다.
float:right;의 결과 box1이 왼쪽으로, box2가 오른쪽으로 정렬된 것을 확인할 수 있습니다.
<예제>
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box1{
background-color: aquamarine;
width: 200px;
height: 600px;
float: left;
}
.box2{
background-color: brown;
width: 500px;
height: 600px;
}
</style>
</head>
<body>
<div class="box1"><h2>box1 200px</h2></div>
<div class="box2"><h2>box2 500px</h2></div>
</body>
</html>
|
cs |
<결과>
다음 예제는 float 속성을 이용해 작성된 레이아웃을 보여줍니다.
태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다.
<예제>
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
div.page {
border: 3px solid #CD5C5C;
overflow: auto;
}
h2 { text-align: center; }
header{ border: 3px solid #FFD700; }
nav {
border: 3px solid #FF1493;
width: 150px;
float: left;
}
section {
border: 3px solid #00BFFF;
margin-left: 156px;
}
footer{ border: 3px solid #00FA9A; }
</style>
</head>
<body>
<h1>float 속성을 이용한 레이아웃</h1>
<div class="page">
<header>
<h2>header 영역</h2>
</header>
<nav>
<h2>nav 영역</h2>
<p>여기에는 보통 메뉴가 들어갑니다.</p>
</nav>
<section>
<h2>section 영역</h2>
<p>여기에는 페이지에 해당하는 내용이 들어갑니다.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget scelerisque libero finibus. Phasellus quis vulputate ante. Fusce sit amet viverra justo. Donec id elementum mauris. Nam id porttitor nisl, et suscipit nunc. Vestibulum sit amet volutpat quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis placerat sem eu facilisis ultricies.
</p>
</section>
<footer>
<h2>footer 영역</h2>
</footer>
</div>
</body>
</html>
|
cs |
<결과>
clear속성-float속성 해제하기
float속성을 이용해 웹페이지 요소를 왼쪽이나 오른쪽으로 배치하면 그다음에 넣는 다른 요소들에도 똑같은 속성이 전달됩니다.
따라서 float속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데 그것이 바로 clear속성입니다.
float:left를 이용해 왼쪽으로 배치했다면 clear:right를 사용해 무효화시킬 수 있습니다.
float 값이 left인지 right인지 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear:both라고 하면 됩니다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다.
따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다.
<예제>
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
.left {
background-color: bisque;
width: 300px;
height: 200px;
float: left;
}
.right {
background-color: rosybrown;
width: 300px;
height: 200px;
float: right;
}
.box {
background-color: yellowgreen;
width: 200px;
height: 200px;
clear: both;
}
</style>
</head>
<body>
<h1>clear 속성을 이용한 위치 조정</h1>
<div class="left">왼쪽 끝에 위치하고 싶은 요소</div>
<div class="right">오른쪽 끝에 위치하고 싶은 요소</div>
<div class="box">이 글자를 아래쪽에 제대로 출력하고 싶어요!</div>
</body>
</html>
|
cs |
<결과>
'CSS' 카테고리의 다른 글
| <div>태그와 <span>태그 (0) | 2020.04.13 |
|---|---|
| position속성 (0) | 2020.04.13 |
| 여백을 조절하는 속성 / margin,padding (0) | 2020.04.12 |
| 가상 선택자 (0) | 2020.04.07 |
| 속성 선택자 (0) | 2020.04.07 |
