HTML DOM Style marginTop 속성 – 요소의 위쪽 여백 읽기와 수정하기

DOM의 style marginTop 속성은 HTML 문서에서 특정 요소의 위쪽 바깥 여백(top margin)을 반환하거나 수정하는 데 사용됩니다. 자바스크립트만으로도 CSS 파일을 변경하지 않고 동적으로 요소의 상단 여백을 조절할 수 있어, 인터랙티브한 웹 페이지를 만들 때 유용하게 활용됩니다.

구문(Syntax)

marginTop 속성의 기본 구문은 다음과 같습니다.

1. marginTop 값 가져오기

object.style.marginTop

이 방식은 해당 요소에 현재 적용된 위쪽 여백 값을 문자열 형태(예: "50px")로 반환합니다.

2. marginTop 값 설정하기

object.style.marginTop = "value"

지정 가능한 주요 값은 다음과 같습니다.

length – px, em, rem 등 고정 단위로 여백 지정 (예: "50px")
% – 부모 요소 너비 기준 백분율로 지정 (예: "10%")
auto – 브라우저가 여백을 자동으로 계산
inherit – 부모 요소의 marginTop 값을 상속받음

예제(Example)

버튼을 클릭하면 문단(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 marginTop 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.marginTop = "50px";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Style marginTop 속성 – 요소의 위쪽 여백 읽기와 수정하기

문단 요소에 위쪽 여백을 추가하려면 "Add margin" 버튼을 클릭하세요.

HTML DOM Style marginTop 속성 – 요소의 위쪽 여백 읽기와 수정하기

버튼을 클릭하는 순간 자바스크립트의 querySelector('p')가 첫 번째 문단 요소를 선택하고, style.marginTop = "50px" 코드에 의해 해당 문단의 위쪽 여백이 50픽셀로 설정되어 아래로 밀려나는 것을 확인할 수 있습니다.