HTML DOM style paddingLeft 속성 완벽 정리

HTML 문서에서 DOM style의 paddingLeft 속성은 특정 요소의 왼쪽 패딩(left padding) 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 JavaScript로 요소의 내부 여백을 동적으로 제어할 수 있어, 버튼 클릭이나 사용자 상호작용에 따라 레이아웃을 유연하게 변경할 수 있습니다.

문법(Syntax)

1. paddingLeft 값 가져오기

object.style.paddingLeft

2. paddingLeft 값 설정하기

object.style.paddingLeft = "value";

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

예제(Example)

다음은 style paddingLeft 속성을 활용한 실전 예제입니다. 버튼을 클릭하면 문단 요소의 왼쪽 패딩이 동적으로 추가됩니다.

<!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 paddingLeft 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.paddingLeft = "30px";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM style paddingLeft 속성 완벽 정리 – 문법과 실전 예제

여기서 “Add padding” 버튼을 클릭하면, JavaScript의 querySelector()로 선택한 문단(p) 요소에 30px의 왼쪽 패딩이 즉시 적용되어 텍스트가 오른쪽으로 밀려나는 것을 확인할 수 있습니다.

HTML DOM style paddingLeft 속성 완벽 정리 – 문법과 실전 예제

정리

paddingLeft 속성은 요소의 왼쪽 안쪽 여백을 읽고 쓸 수 있는 DOM 스타일 속성입니다.
값을 설정할 때는 CSS 길이 단위(px, em, % 등)를 문자열 형태로 지정해야 합니다.
인라인 스타일로 직접 반영되므로, 기존 CSS 클래스보다 우선순위가 높게 적용됩니다.