HTML DOM의 paddingRight 속성은 HTML 요소의 오른쪽 안쪽 여백(padding) 값을 가져오거나 설정하는 데 사용됩니다. 자바스크립트를 통해 동적으로 요소의 오른쪽 패딩을 조절할 수 있어 레이아웃 제어에 유용합니다.
문법(Syntax)
paddingRight 속성의 기본 문법은 다음과 같습니다.
1. paddingRight 값 가져오기
object.style.paddingRight
2. paddingRight 값 설정하기
object.style.paddingRight = "값";
여기서 값(value)으로 사용할 수 있는 옵션은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| length | px, em, rem 등 길이 단위로 패딩 값을 지정합니다. |
| initial | 패딩을 기본(default) 값으로 설정합니다. |
| inherit | 부모 요소로부터 패딩 값을 상속받습니다. |
| percentage(%) | 부모 요소 너비를 기준으로 백분율(%) 단위로 패딩을 지정합니다. |
이제 HTML DOM Style paddingRight 속성의 실제 사용 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<head>
<style>
.outer-box {
background-color: #db133a;
width: 300px;
height: 300px;
margin: 1rem auto;
}
.inner-box {
background-color: #C3C3E6;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<h1>HTML DOM Style paddingRight Property Demo</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.paddingRight = '20px';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 빨간색 박스 안에 보라색 내부 박스가 표시됩니다. 이때 "Add Padding" 버튼을 클릭하면 자바스크립트의 addPadding() 함수가 호출되어 빨간색 박스의 오른쪽에 20px의 안쪽 여백이 추가됩니다.
버튼 클릭 후 내부 박스가 오른쪽 패딩만큼 좌측으로 밀려나는 것을 확인할 수 있습니다. 이처럼 paddingRight 속성을 활용하면 사용자 인터랙션에 따라 요소의 여백을 동적으로 변경할 수 있습니다.