CSS의 float 속성을 사용하면 요소를 왼쪽이나 오른쪽으로 배치하여 텍스트와 함께 정렬할 수 있습니다. float는 원래 이미지 주변에 텍스트를 흐르게 하기 위해 만들어졌지만, 현재도 레이아웃 배치에 널리 활용되고 있습니다.
float 속성의 주요 값
- left – 요소를 부모 컨테이너의 왼쪽에 배치합니다.
- right – 요소를 부모 컨테이너의 오른쪽에 배치합니다.
- none – 기본값으로, 요소가 정상적인 문서 흐름을 따릅니다.
아래 예제에서는 float: right;를 적용하여 div 요소를 화면 오른쪽으로 정렬했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
float: right;
width: 200px;
border: 1px dashed blue;
padding: 5px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div class = "demo">
<p>This is demo text and right aligned.</p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 파란색 점선 테두리가 있는 div 박스가 화면 오른쪽에 정렬되어 나타납니다. 제목(Heading)은 왼쪽에 그대로 위치하고, demo 영역만 오른쪽으로 떠서(float) 배치됩니다.
참고 사항
float 속성을 사용한 후에는 후속 요소들이 float된 요소를 감싸지 않도록 clear 속성이나 clearfix 기법을 활용하는 것이 좋습니다. 또한 최신 웹 개발에서는 Flexbox나 Grid 레이아웃이 더 권장되지만, 간단한 정렬 작업에는 여전히 float가 유용하게 사용됩니다.