HTML DOM의 clear 속성은 부동(floating) 요소의 위치를 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 특정 요소가 다른 부동 요소 아래로 이동해야 하는지 여부를 지정할 수 있으며, 레이아웃이 의도치 않게 깨지는 현상을 방지하는 데 매우 유용합니다.
clear 속성 문법
clear 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.clear = 'none | left | right | both | initial | inherit'
속성 값 설명
각 값이 어떻게 동작하는지 자세히 살펴보겠습니다.
| 값 | 설명 |
|---|---|
| left | 왼쪽 측면에 부동된 요소가 없도록 설정합니다. |
| right | 오른쪽 측면에 부동된 요소가 없도록 설정합니다. |
| both | 왼쪽과 오른쪽 어느 쪽에도 부동된 요소가 없도록 설정합니다. |
| none | 양쪽 모두에서 부동을 허용하며, 기본(default) 값입니다. |
| inherit | 부모 요소의 clear 속성 값을 상속받습니다. |
예제 코드
다음 예제는 버튼 클릭 시 div 요소의 clear 속성 값을 left에서 right로 동적으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 5px;
float: right;
clear: both;
border: 2px solid orange;
}
#DIV1 {
clear: left;
}
</style>
<script>
function changeClear() {
document.getElementById("DIV1").style.clear = "right";
document.getElementById("Sample").innerHTML = "div의 clear 속성이 left에서 right로 변경되었습니다.";
}
</script>
</head>
<body>
<img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg">
<div id="DIV1">div 내부의 샘플 텍스트입니다. div 안의 또 다른 줄입니다. 무작위 영문 텍스트를 포함한 div입니다. 이 div는 clear 속성을 시연하기 위해 생성되었습니다.</div>
<p>아래 버튼을 클릭하면 위 div의 clear 속성이 변경됩니다</p>
<button onclick="changeClear()">Change Clear</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 이미지가 오른쪽으로 부동하고, div는 clear: left가 적용된 상태로 표시됩니다.
이후 “Change Clear” 버튼을 클릭하면 다음과 같이 div의 clear 속성이 right로 변경되고, 결과 메시지가 화면에 출력됩니다.
정리
clear 속성은 CSS float와 함께 사용되는 핵심 속성으로, JavaScript를 통해 동적으로 변경할 수 있습니다. 부동 요소로 인한 레이아웃 겹침 현상을 해결할 때 반드시 알아두어야 하며, 특히 both 값은 양방향 부동을 모두 해제하므로 실무에서 가장 널리 사용됩니다.