HTML DOM 스타일 margin 속성 – 요소의 외부 여백 반환 및 설정 방법

DOM의 style margin 속성은 HTML 문서에서 특정 요소의 바깥쪽 여백(margin)을 반환하거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 요소 주변의 여백을 동적으로 제어할 수 있습니다.

문법(Syntax)

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

여백 값 반환하기

object.style.margin

여백 값 설정하기

object.style.margin = "value"

값은 CSS margin 규칙과 동일하게 px, %, em 등의 단위를 사용할 수 있으며, 상하좌우 네 방향을 개별적으로 지정하거나 축약형으로 한 번에 설정할 수도 있습니다.

예제(Example)

다음은 style margin 속성을 사용하여 버튼 클릭 시 단락(p) 요소에 여백을 추가하는 예제입니다.

<!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 margin 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.margin = "20px 30px";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 스타일 margin 속성 – 요소의 외부 여백 반환 및 설정 방법

이제 [Add margin] 버튼을 클릭하면 단락 요소에 20px 30px 크기의 여백이 적용되는 것을 확인할 수 있습니다.

HTML DOM 스타일 margin 속성 – 요소의 외부 여백 반환 및 설정 방법

핵심 정리

object.style.margin : 현재 요소에 인라인으로 지정된 margin 값을 반환합니다.
object.style.margin = "value" : 요소의 margin을 새로운 값으로 설정합니다.
예제처럼 "20px 30px" 형태로 작성하면 상하 20px, 좌우 30px가 각각 적용됩니다.