float 속성
- float 속성은 html 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.
- 현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>float 속성을 이용한 위치 설정</h1>
<p><img src="/examples/images/img_flower.png" alt="flower" width="245" height="185">
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.
Nulla et elit placerat, malesuada massa sit amet, dictum quam. Duis eu turpis non sapien molestie luctus nec a tortor. Nunc non est eget elit suscipit interdum. Maecenas iaculis lobortis lorem et dignissim. Nullam dapibus, arcu vel malesuada egestas, nisi mi accumsan tellus, at rhoncus dolor nisi in tortor. Donec at aliquam lectus, ac egestas odio. Proin convallis sapien id consectetur egestas. Sed at varius libero, ut ultricies eros. Suspendisse potenti. Vivamus non posuere mauris. Maecenas luctus elementum justo, non tempor nisl blandit id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>clear 속성
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
.left {
background-color: #FF8C00;
width: 150px;
height: 50px;
float: left;
}
.right {
background-color: #9932CC;
width: 150px;
height: 50px;
float: right;
}
p{
clear:both;
}
</style>
</head>
<body>
<h1>clear 속성을 이용한 위치 조정</h1>
<div>
<div class="left">왼쪽 끝에 위치하고 싶은 요소</div>
<div class="right">오른쪽 끝에 위치하고 싶은 요소</div>
</div>
<p>이 글자를 아래쪽에 제대로 출력하고 싶어요!</p>
</body>
</html>overflow 속성
float 속성이 적용된 html 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다. 이때, overflow의 속성값을 auto로 설정하면, 컨테이너요소가 해당요소 만큼 같이 커진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
div {
border: 3px solid #73AD21;
padding: 5px;
}
img { float: left; }
#second { clear: left; }
.good { overflow: auto; }
</style>
</head>
<body>
<h1>overflow 속성을 이용한 크기 조정</h1>
<div>이미지와 함께 하고 싶은 내용
<img src="/examples/images/img_flower.png" alt="flower" width="245" height="185">
</div>
<p id="second"><br>overflow 속성값을 auto로 주면 자동으로 컨테이너 요소의 크기도 함께 늘어납니다!</p>
<div class="good">이미지와 함께 하고 싶은 내용
<img src="/examples/images/img_flower.png" alt="flower" width="245" height="185">
</div>
</body>
</html>
백엔드 개발자