JavaScript로 요소의 여백(margin) 설정하기
JavaScript에서 HTML 요소의 바깥 여백을 설정하려면 style.margin 속성을 사용합니다. 이 속성에 원하는 값을 지정하면 해당 요소의 네 방향 여백이 한 번에 적용됩니다.
margin 값은 위쪽 → 오른쪽 → 아래쪽 → 왼쪽 순서, 즉 시계 방향으로 지정합니다. 예를 들어 "30px 20px 40px 40px"는 위쪽 30px, 오른쪽 20px, 아래쪽 40px, 왼쪽 40px의 여백을 의미합니다.
예제
아래 코드는 버튼을 클릭하면 문단 요소의 여백이 설정되도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="display()">네 방향 여백 모두 설정</button>
<p id="myID">This is demo text.</p>
<script>
function display() {
document.getElementById("myID").style.margin = "30px 20px 40px 40px";
}
</script>
</body>
</html>동작 설명
버튼을 클릭하면 display() 함수가 호출되고, getElementById("myID")로 id가 "myID"인 문단 요소를 가져온 뒤 style.margin 속성에 여백 값이 할당됩니다. 그 결과 텍스트 주변에 지정된 크기만큼의 여백이 즉시 적용됩니다.
만약 특정 방향의 여백만 개별적으로 설정하고 싶다면 marginTop, marginRight, marginBottom, marginLeft 속성을 따로 사용할 수도 있습니다.