CSS 레이아웃 작업 시 이미지나 다른 요소에 float 속성이 적용되어 있으면, 주변 텍스트가 해당 요소를 감싸는 형태로 배치됩니다. 이때 특정 요소가 부동(floating) 객체 아래로 내려가지 않고 새로운 줄에서 시작하도록 만들려면 JavaScript에서 clear 속성을 사용하면 됩니다.
style.clear 속성은 left, right, both, none 중 하나의 값을 가질 수 있으며, 각 값은 다음과 같은 의미를 갖습니다.
- left: 왼쪽에 있는 부동 요소 아래로 이동
- right: 오른쪽에 있는 부동 요소 아래로 이동
- both: 양쪽 모든 부동 요소 아래로 이동
- none: clear 설정 해제(기본값)
예제 코드
아래 예제는 이미지가 왼쪽으로 float 되어 있고, 그 옆에 단락이 배치되어 있습니다. 버튼을 클릭하면 display() 함수가 실행되어 해당 단락의 clear 속성을 left로 설정하고, 결과적으로 문단이 부동 이미지 아래로 이동하게 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width="170" height="150">
<p id="myP">데모 콘텐츠입니다! 데모 콘텐츠입니다! 데모 콘텐츠입니다! 데모 콘텐츠입니다! 데모 콘텐츠입니다! 데모 콘텐츠입니다!
데모 콘텐츠입니다! 데모 콘텐츠입니다! 데모 콘텐츠입니다! 데모 콘텐츠입니다!</p>
<button type="button" onclick="display()">클릭</button>
<script>
function display() {
document.getElementById("myP").style.clear = "left";
}
</script>
</body>
</html>코드 설명
1. CSS 스타일 정의
<head> 영역의 스타일시트에서 img { float: left; }를 선언하여 이미지를 왼쪽에 부동시킵니다. 이로 인해 이미지 오른쪽 공간에 텍스트가 흐르게 됩니다.
2. JavaScript로 clear 속성 변경
버튼을 클릭하면 display() 함수가 호출되고, document.getElementById("myP")로 단락 요소를 가져온 뒤 style.clear = "left"를 적용합니다. 이렇게 하면 해당 단락은 왼쪽 부동 이미지 아래로 내려가 새로운 줄부터 렌더링됩니다.
정리
JavaScript에서 element.style.clear 속성을 활용하면 런타임에 동적으로 요소와 부동 객체 간의 위치 관계를 제어할 수 있습니다. 이는 반응형 레이아웃 조정이나 사용자 인터랙션에 따른 화면 재배치가 필요할 때 유용하게 활용할 수 있습니다.