paddingTop 속성이란?
HTML DOM의 paddingTop 속성은 요소의 위쪽 안쪽 여백(top padding)을 설정하거나 현재 값을 반환하는 데 사용됩니다. 패딩은 요소의 테두리(border) 내부에 공간을 만들어 콘텐츠와 테두리 사이에 간격을 부여합니다. 이 속성의 기본값은 0입니다.
문법(Syntax)
paddingTop 속성의 기본 문법은 다음과 같습니다.
위쪽 패딩 값 반환하기
object.style.paddingTop
위쪽 패딩 값 설정하기
object.style.paddingTop = "%|length|initial|inherit"
각 값의 의미는 다음과 같습니다.
- % : 부모 요소 너비를 기준으로 한 백분율(%) 단위의 위쪽 패딩
- length : px, em 등 길이 단위로 지정한 위쪽 패딩
- initial : 해당 속성을 기본값(0)으로 초기화
- inherit : 부모 요소로부터 패딩 값을 상속
예제(Example)
다음은 paddingTop 속성을 실제로 구현한 예제입니다. 버튼을 클릭하면 div 요소의 위쪽 패딩이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#sample {
border: 2px dashed #ded575;
}
</style>
</head>
<body>
<div id="sample">Demo text!</div>
<br>
<button type="button" onclick="demo()">Update</button>
<script>
function demo() {
document.getElementById("sample").style.paddingTop = "80px";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 Update 버튼을 클릭하면 JavaScript의 document.getElementById()를 통해 해당 요소에 접근하고, paddingTop 속성에 "80px"가 할당되어 다음과 같이 위쪽 패딩이 적용된 모습을 확인할 수 있습니다.
정리
paddingTop 속성은 CSS의 padding-top 스타일을 JavaScript로 동적으로 제어할 수 있게 해주는 유용한 도구입니다. 버튼 클릭, 마우스 오버 등 다양한 이벤트와 결합하면 사용자 인터랙션에 따라 요소의 여백을 실시간으로 조절할 수 있습니다.