HTML DOM borderTopWidth 속성이란?
HTML DOM의 borderTopWidth 속성은 웹 페이지 내 특정 요소의 위쪽 테두리(top border) 너비를 JavaScript로 설정하거나, 현재 적용된 값을 읽어올 때 사용되는 스타일 속성입니다.
CSS에서 테두리 전체가 아닌 상단 테두리만 개별적으로 제어해야 할 때 유용하게 활용되며, 버튼 클릭 같은 이벤트와 함께 동적으로 테두리 두께를 변경하는 인터랙티브한 UI를 만들 수 있습니다.
기본 문법(Syntax)
borderTopWidth 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderTopWidth = "thin|medium|thick|length|initial|inherit";
속성 값(Property Values)
borderTopWidth에 지정할 수 있는 값과 각각의 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| thin | 얇은(thin) 테두리를 지정합니다. |
| medium | 중간 두께(medium)의 테두리를 지정하며, 기본(default) 값입니다. |
| thick | 두꺼운(thick) 테두리를 지정합니다. |
| length | px, em 등 길이 단위를 사용해 테두리 너비를 직접 지정합니다. 예: "5px", "0.3em" |
| initial | 해당 속성을 브라우저의 초기(initial) 값으로 되돌립니다. |
| inherit | 부모 요소의 borderTopWidth 값을 상속받습니다. |
예제(Example)
다음 예제는 div 요소의 위쪽 테두리 너비를 버튼 클릭 한 번으로 동적으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-top-width: 30px;
}
</style>
<script>
function changeTopWidth() {
document.getElementById("DIV1").style.borderTopWidth = "1px";
document.getElementById("Sample").innerHTML
= "위쪽 테두리 너비가 줄어들었습니다.";
}
</script>
</head>
<body>
<div id="DIV1">SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 위 div의 상단 테두리 너비가 변경됩니다.</p>
<button onclick="changeTopWidth()">상단 너비 변경</button>
<p id="Sample"></p>
</body>
</html>코드를 살펴보면, 처음에는 CSS에서 border-top-width: 30px;로 상단 테두리를 굵게 지정했습니다. 그리고 changeTopWidth() 함수가 실행되면 style.borderTopWidth = "1px"를 통해 상단 테두리를 1px로 줄이고, 결과 메시지를 화면에 출력합니다.
실행 결과(Output)
페이지를 처음 열면 다음과 같이 두꺼운 주황색 상단 테두리가 표시됩니다.
“상단 너비 변경(Change Top Width)” 버튼을 클릭하면 상단 테두리가 1px로 가늘어진 것을 확인할 수 있습니다.
정리
borderTopWidth 속성은 요소의 상단 테두리 두께만 선택적으로 제어할 수 있는 편리한 DOM 스타일 속성입니다. 키워드 값(thin, medium, thick)뿐 아니라 px 단위의 정확한 수치 지정도 가능하므로, 마우스 오버 효과나 강조 애니메이션 등 다양한 UI 인터랙션에 활용해 보시기 바랍니다.