HTML DOM style marginRight 속성 – 요소의 오른쪽 마진 제어하기

HTML DOM의 style marginRight 속성은 HTML 문서 내 특정 요소의 오른쪽 바깥 여백(margin)을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 요소의 우측 마진을 동적으로 변경할 수 있어, 버튼 클릭과 같은 사용자 인터랙션에 반응하는 레이아웃 조정이 가능합니다.

문법(Syntax)

marginRight 속성의 기본 문법은 다음과 같습니다.

1. marginRight 값 가져오기

object.style.marginRight

현재 요소에 적용된 오른쪽 마진 값을 문자열 형태(예: "50px")로 반환합니다.

2. marginRight 값 설정하기

object.style.marginRight = "value"

지정한 값으로 요소의 오른쪽 마진을 변경합니다. 값은 px, em, rem, % 등 CSS에서 허용하는 길이 단위를 사용할 수 있습니다.

예제(Example)

다음은 style marginRight 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 단락(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 marginRight 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.marginRight = "50px";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM style marginRight 속성 – 요소의 오른쪽 마진 제어하기

화면 하단의 “Add margin” 버튼을 클릭하면, 자바스크립트의 add() 함수가 실행되어 단락 요소에 오른쪽 마진 50px가 적용됩니다. 그 결과 텍스트가 오른쪽으로 밀려나는 것을 확인할 수 있습니다.

HTML DOM style marginRight 속성 – 요소의 오른쪽 마진 제어하기

정리

style marginRight 속성은 인라인 스타일을 통해 요소의 오른쪽 마진을 읽고 쓸 수 있는 간편한 방법입니다. 참고로 이 속성은 인라인 스타일에만 접근하므로, 외부 CSS나 내부 스타일시트로 정의된 마진 값을 가져오려면 getComputedStyle() 메서드를 함께 사용하는 것이 좋습니다.