HTML DOM style marginLeft 속성 – 요소의 왼쪽 여백 제어하기

HTML DOM의 style marginLeft 속성은 HTML 문서 내 특정 요소의 왼쪽 바깥 여백(margin-left)을 가져오거나(반환) 수정할 때 사용되는 속성입니다. 이 속성을 활용하면 자바스크립트만으로도 페이지 로딩 후 동적으로 요소의 좌측 여백을 조절할 수 있습니다.

문법(Syntax)

1. marginLeft 값 반환하기

object.style.marginLeft

2. marginLeft 값 설정하기

object.style.marginLeft = "value"

설정 시 값에는 px, em, rem, % 등 CSS에서 허용하는 길이 단위를 사용할 수 있으며, 예를 들어 "50px"처럼 문자열 형태로 지정합니다.

예제 코드

아래는 style marginLeft 속성의 실제 사용 예시입니다. 버튼을 클릭하면 문단(p 태그)의 왼쪽 여백이 50px로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style marginLeft Property Example</h1>
<p>Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text.
</p>
<button onclick="add()" class="btn">Add margin</button>
<script>
    function add() {
        document.querySelector('p').style.marginLeft = "50px";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM style marginLeft 속성 – 요소의 왼쪽 여백 제어하기

여기서 “Add margin” 버튼을 클릭하면, 문단 요소에 왼쪽 여백 50px가 적용되어 아래와 같이 문단이 오른쪽으로 밀려나는 것을 확인할 수 있습니다.

HTML DOM style marginLeft 속성 – 요소의 왼쪽 여백 제어하기

정리

style marginLeft 속성은 인라인 스타일 방식으로 요소의 왼쪽 여백을 동적으로 제어할 수 있는 간편한 도구입니다. 버튼 클릭, 마우스 이벤트 등 다양한 상황에서 레이아웃을 실시간으로 조정해야 할 때 유용하게 활용할 수 있습니다.