HTML DOM style paddingBottom 속성 완벽 정리

HTML DOM의 style.paddingBottom 속성은 HTML 문서 내 요소의 아래쪽 안쪽 여백(padding)을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 특정 요소의 하단 패딩을 동적으로 제어할 수 있습니다.

문법(Syntax)

paddingBottom 속성의 기본 문법은 다음과 같습니다.

1. paddingBottom 값 가져오기

object.style.paddingBottom

2. paddingBottom 값 설정하기

object.style.paddingBottom = "value"

값에는 px, em, % 등 CSS에서 허용되는 길이 단위를 사용할 수 있습니다.

예제(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 paddingBottom 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.paddingBottom = "30px";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM style paddingBottom 속성 완벽 정리 – 사용법과 예제 코드

여기서 “Add padding” 버튼을 클릭하면, 자바스크립트의 querySelector()로 선택한 p 요소에 30px 크기의 아래쪽 패딩이 적용됩니다.

HTML DOM style paddingBottom 속성 완벽 정리 – 사용법과 예제 코드

정리

style.paddingBottom 속성은 요소의 하단 안쪽 여백을 읽고 쓸 수 있는 편리한 DOM API입니다. 버튼 클릭, 마우스 오버 등 다양한 이벤트와 함께 사용하면 사용자 인터랙션에 따라 레이아웃을 동적으로 변경하는 UI를 손쉽게 구현할 수 있습니다.