HTML DOM의 borderTop 속성은 요소의 위쪽(top) 테두리 관련 속성들을 한 번에 가져오거나 설정할 수 있는 단축(shorthand) 속성입니다. 이 속성 하나로 border-top-width(테두리 두께), border-top-style(테두리 스타일), border-top-color(테두리 색상) 세 가지 값을 동시에 다룰 수 있습니다.
문법
borderTop 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderTop = "width style color|initial|inherit"
각 값의 의미는 아래 표와 같습니다.
| 매개변수 | 설명 |
|---|---|
| width | 위쪽 테두리의 두께를 설정합니다. |
| style | 위쪽 테두리의 스타일(solid, dashed 등)을 설정합니다. |
| color | 위쪽 테두리의 색상을 설정합니다. |
| initial | 해당 속성을 기본값으로 초기화합니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
그럼 borderTop 속성의 실제 사용 예제를 살펴보겠습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border-top: 4px solid magenta;
font-size: 1.5rem;
}
</style>
<script>
function changeBorderTop(){
document.getElementById("P1").style.borderTop="9px dashed red";
document.getElementById("Sample").innerHTML="단락 요소의 위쪽 테두리가 변경되었습니다.";
}
</script>
</head>
<body>
<p id="P1">단락 안에 들어 있는 예시 텍스트입니다. 여기는 예시 텍스트의 또 다른 줄입니다.</p>
<p>아래 버튼을 클릭하면 위 단락의 위쪽 테두리 속성이 변경됩니다.</p>
<button onclick="changeBorderTop()">위쪽 테두리 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
“위쪽 테두리 변경” 버튼을 클릭하면 화면이 다음과 같이 바뀝니다.
예제 해설
먼저 id가 “P1”인 단락을 만들고 그 안에 텍스트를 넣은 뒤, 해당 요소에 CSS 스타일을 적용했습니다.
#P1 {
border-top: 4px solid magenta;
font-size: 1.5rem;
}
<p id="P1">단락 안에 들어 있는 예시 텍스트입니다. 여기는 예시 텍스트의 또 다른 줄입니다.</p>
그다음, 사용자가 클릭하면 changeBorderTop() 함수를 실행하는 “위쪽 테두리 변경” 버튼을 만들었습니다.
<button onclick="changeBorderTop()">위쪽 테두리 변경</button>
changeBorderTop() 함수는 getElementById() 메서드를 통해 id가 “P1”인 단락 요소에 접근한 후, 해당 요소의 borderTop 스타일 속성값을 ‘9px dashed red’로 변경합니다. 이어서 innerHTML 속성을 이용해 id가 “Sample”인 단락에 변경 사항을 알리는 메시지를 출력합니다.
function changeBorderTop(){
document.getElementById("P1").style.borderTop="9px dashed red";
document.getElementById("Sample").innerHTML="단락 요소의 위쪽 테두리가 변경되었습니다.";
}