HTML DOM의 paddingLeft 속성은 HTML 요소의 왼쪽 안쪽 여백(padding) 값을 가져오거나 새로 설정할 때 사용하는 JavaScript 속성입니다. 이 속성을 활용하면 버튼 클릭 같은 사용자 이벤트에 반응해 요소의 왼쪽 여백을 동적으로 변경할 수 있습니다.
문법(Syntax)
paddingLeft 속성의 기본 문법은 다음과 같습니다.
1. 왼쪽 패딩 값 가져오기
object.style.paddingLeft
2. 왼쪽 패딩 값 설정하기
object.style.paddingLeft = "value";
설정 가능한 값(Values)
위 문법에서 "value" 자리에는 아래 표의 값들을 사용할 수 있습니다.
| 값 | 설명 |
|---|---|
| length | px, em, rem 등 길이 단위를 사용해 패딩 값을 지정합니다. |
| initial | 패딩을 브라우저 기본값으로 되돌립니다. |
| inherit | 부모 요소의 패딩 값을 상속받습니다. |
| percentage(%) | 부모 요소 너비를 기준으로 한 백분율(%)로 패딩을 지정합니다. |
예제(Example)
버튼을 클릭하면 빨간색 박스의 왼쪽 패딩이 늘어나는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML DOM paddingLeft 속성 예제</title>
<style>
.outer-box{
background-color:#db133a;
width:300px;
height:300px;
margin:1rem auto;
}
.inner-box{
background-color:#C3C3E6;
width:150px;
height:150px;
}
</style>
</head>
<body>
<h1>paddingLeft 속성 예제</h1>
<div class="outer-box">
<div class="inner-box">
</div>
</div>
<button type="button" onClick='addPadding()'>Add Padding</button>
<script>
function addPadding(){
var outerBox = document.querySelector('.outer-box');
outerBox.style.paddingLeft = '20px';
console.log(outerBox.style.paddingLeft);
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Add Padding” 버튼을 클릭하면 빨간색 박스(outer-box)의 왼쪽에 20px 패딩이 추가되어 내부 콘텐츠가 오른쪽으로 밀려납니다.
동시에 console.log()를 통해 설정된 패딩 값이 개발자 도구 콘솔에도 출력되는 것을 확인할 수 있습니다.
정리
paddingLeft 속성은 CSS의 padding-left 스타일을 JavaScript로 제어할 수 있게 해주는 DOM API입니다. 값을 읽어 현재 상태를 확인할 수도 있고, px·%·em 등 다양한 단위로 동적으로 변경할 수 있어 인터랙티브한 UI를 만들 때 유용하게 활용됩니다.