HTML DOM의 Style left 속성은 위치가 지정된(positioned) 요소의 왼쪽 위치를 설정하거나 현재 값을 반환하는 데 사용됩니다. 이 속성을 실제로 적용하려면 해당 요소의 position 속성이 relative, absolute 또는 fixed로 반드시 설정되어 있어야 한다는 점에 유의하세요.
left 속성 문법
left 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.left = "auto|length|%|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| auto | 기본값으로, 브라우저가 자동으로 왼쪽 위치를 계산하여 지정합니다. |
| length | px, em 등 길이 단위로 왼쪽 위치를 정의합니다. 음수 값도 허용됩니다. |
| % | 부모 요소 너비를 기준으로 백분율(%) 단위로 왼쪽 위치를 설정합니다. |
| initial | 해당 속성을 초기 기본값으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
left 속성 활용 예제
다음 예제는 버튼을 클릭할 때마다 div 요소가 오른쪽으로 50px씩 이동하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
margin-top:70px;
position:absolute;
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
var setLeft=50;
function changeLeft() {
document.getElementById("DIV1").style.left = setLeft+"px";
setLeft+=50;
}
</script>
</head>
<h1>left 속성 예제</h1>
<body>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하여 div의 왼쪽 위치를 변경해 보세요.</p>
<button type="button" id="myBtn" onclick="changeLeft()">왼쪽 위치 변경</button>
</body>
</html>실행 결과
위 코드를 실행한 후 “왼쪽 위치 변경” 버튼을 클릭하면 빨간색 박스가 클릭할 때마다 오른쪽으로 50px씩 이동합니다.
정리
HTML DOM의 left 속성은 JavaScript를 통해 요소의 위치를 동적으로 제어할 수 있는 강력한 도구입니다. 애니메이션 효과, 드래그 앤 드롭 인터페이스, 팝업 레이어 배치 등 다양한 UI 구현에 활용되므로, position 속성과 함께 익혀두면 웹 개발 시 큰 도움이 됩니다.