요소의 하단 패딩을 설정하려면 JavaScript에서 paddingBottom 속성을 사용하면 됩니다. 이 속성은 DOM 스타일 객체의 일부로, 특정 요소의 아래쪽 안쪽 여백을 동적으로 변경할 수 있어 클릭 이벤트나 다른 사용자 인터랙션에 따라 레이아웃을 실시간으로 조정할 때 유용합니다.
예제
아래 코드를 실행하고 버튼을 클릭하면, 박스 요소에 100px의 하단 패딩이 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px solid #FF0000;
width: 150px;
height: 70px;
}
</style>
</head>
<body>
<div id = "box">This is demo text.</div>
<br>
<br>
<button type = "button" onclick = "display()">Bottom padding</button>
<script>
function display() {
document.getElementById("box").style.paddingBottom = "100px";
}
</script>
</body>
</html>코드 설명
- #box 스타일: 빨간색 테두리가 있는 150px × 70px 크기의 박스를 정의하여 패딩 변화를 시각적으로 확인하기 쉽게 만듭니다.
- display() 함수: 버튼이 클릭되면
document.getElementById("box")로 요소를 가져온 뒤,style.paddingBottom속성에"100px"값을 할당합니다. - 결과: 버튼을 클릭하는 순간 텍스트와 테두리 사이의 아래쪽 여백이 늘어나면서 박스의 전체 높이도 함께 커집니다.
패딩 값에는 px뿐만 아니라 em, rem, % 등 다양한 CSS 단위를 사용할 수 있으며, 기존 패딩 값을 읽어오고 싶다면 같은 속성을 참조하면 됩니다.