HTML DOM cssFloat 속성이란?
HTML DOM의 cssFloat 속성은 요소의 수평 정렬, 즉 플로팅(floating) 상태를 설정하거나 현재 값을 가져오는 데 사용됩니다. 이 속성을 활용하면 요소를 부모 컨테이너의 왼쪽 또는 오른쪽으로 띄워 배치할 수 있습니다.
cssFloat 속성 설정 문법
object.style.cssFloat = "left|right|none|initial|inherit";
cssFloat 속성 값 정리
| 값 | 설명 |
|---|---|
| none | 기본값입니다. 요소에 플로팅을 적용하지 않습니다. |
| left | 요소를 부모 요소의 가장 왼쪽 위치로 띄웁니다. |
| right | 요소를 부모 요소의 가장 오른쪽 위치로 띄웁니다. |
| initial | 해당 속성을 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
cssFloat 속성 예제
다음 예제에서는 버튼을 클릭하면 div 요소가 왼쪽에서 오른쪽으로 플로팅되도록 변경하는 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 50px;
width: 50px;
margin: 5px;
float: left;
background-color: rebeccapurple;
}
div+p {
height: 70px;
color: red;
border: 2px solid #b8860b;
}
</style>
<script>
function changeFloat() {
document.getElementById("DIV1").style.cssFloat = "right";
document.getElementById("Sample").innerHTML = "div 요소가 이제 오른쪽으로 띄워집니다.";
}
</script>
<body>
<div id="DIV1"></div>
<p>이것은 샘플 단락입니다. 단락의 두 번째 줄이며, 여기는 세 번째 줄입니다.</p>
<p>아래 버튼을 클릭하여 위 div 요소의 float 속성을 변경해 보세요.</p>
<button onclick="changeFloat()">Change Float</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 보라색(div) 요소가 왼쪽에 배치된 것을 확인할 수 있습니다.
이제 “Change Float” 버튼을 클릭하면 다음과 같이 div 요소가 오른쪽으로 이동합니다.
참고 사항
JavaScript에서 CSS의 float 속성은 예약어 충돌을 피하기 위해 cssFloat라는 이름으로 접근해야 합니다. 일부 구형 브라우저(특히 Internet Explorer)에서는 styleFloat를 사용하기도 했으므로, 크로스 브라우저 호환성이 필요하다면 두 가지를 함께 처리하는 것이 안전합니다.