HTML DOM의 style padding 속성은 HTML 문서 내 특정 요소의 패딩(안쪽 여백) 값을 가져오거나 수정할 때 사용하는 속성입니다. 자바스크립트를 통해 요소의 여백을 동적으로 제어할 수 있어, 버튼 클릭이나 이벤트 발생 시 레이아웃을 유연하게 변경하고 싶을 때 유용하게 활용됩니다.
문법(Syntax)
padding 속성의 기본 문법은 다음과 같습니다.
1. 패딩 값 가져오기
object.style.padding
2. 패딩 값 설정하기
object.style.padding = "value"
값(value)에는 px, em, rem 등 다양한 단위를 사용할 수 있으며, "10px 30px"처럼 공백으로 구분해 상하·좌우 여백을 각각 지정할 수도 있습니다.
예제(Example)
아래는 HTML DOM style padding 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 문단(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 padding 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 padding</button>
<script>
function add() {
document.querySelector('p').style.padding = "10px 30px";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Add padding” 버튼을 클릭하면, 자바스크립트 함수가 실행되어 문단 요소에 10px 30px 크기의 패딩이 즉시 적용됩니다.
정리
HTML DOM style padding 속성은 별도의 CSS 파일 수정 없이 자바스크립트만으로 요소의 안쪽 여백을 실시간으로 읽고 변경할 수 있는 강력한 도구입니다. 인터랙티브한 UI를 구현할 때 적극적으로 활용해 보세요.