CSS의 float 속성은 웹 페이지에서 요소를 왼쪽이나 오른쪽으로 "띄워서" 배치하는 데 사용됩니다. 주로 이미지나 박스를 텍스트 옆에 배치할 때 유용하죠. 하지만 float를 사용하면 다른 요소의 배치에 영향을 줄 수 있어서, 이를 정리하기 위해 clear 속성도 함께 사용합니다.
1. CSS Float 속성 이해하기
float 속성은 요소를 문서의 일반 흐름에서 벗어나게 해서 왼쪽이나 오른쪽으로 띄우는 역할을 합니다. 주로 이미지와 텍스트를 함께 배치하거나, 박스를 나란히 배치할 때 사용됩니다.
(1) Float 속성 값
float 속성은 다음과 같은 값을 가질 수 있습니다:
- none: 요소를 띄우지 않음 (기본값).
- left: 요소를 왼쪽으로 띄움.
- right: 요소를 오른쪽으로 띄움.
실습 예제 1
Float로 이미지와 텍스트 배치
(2) Float와 다른 레이아웃 방식 비교
float는 CSS에서 레이아웃을 만들 때 자주 사용되었지만, 현대에는 flexbox나 grid가 더 많이 사용됩니다. 그 이유는:
- float: 과거에 주로 사용되었지만, 복잡한 레이아웃에서는 한계가 있음.
- flexbox/grid: 더 유연하고 직관적인 레이아웃을 만들 수 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 속성 사용해보기</title>
<style>
img {
width: 150px;
height: 100px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="https://picsum.photos/200/300" alt="샘플이미지">
<p>이 이미지는 왼쪽으로 띄워져 있습니다. 텍스트는 자역습럽게 배치 됩니다.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellendus molestiae laudantium tenetur error, aut libero cumque reiciendis earum!
Nostrum veritatis hic recusandae distinctio dolores laboriosam quas debitis atque sed doloremque?</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid rgb(154, 154, 216);
margin: 5px;
border-radius: 10px;
}
.box1 {
background-color: aqua;
float: left;
}
.box2 {
background-color: aqua;
float: left;
/* clear 속성 추가
float 된 요소의 영향을 정리하여 float된 요소 아래도 이동 처리하고
더 이상 주변 요소에 영향을 주지 않도록 함.
clear lett 왼쪽 정리, right 오른쪽 정리 both 양쪽 정리 정리 개념이다.
*/
clear: left;
}
.box3 {
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS flexbox 사용해보기(2) (0) | 2025.07.18 |
|---|---|
| CSS flexbox 사용해보기 (2) | 2025.07.18 |
| CSS Transition(부드러운 애니메이션 만들기) (1) | 2025.07.18 |
| CSS position 관련 속성(Position, Z-Index, Overflow) (3) | 2025.07.18 |
| CSS font 속성 (2) | 2025.07.18 |