HTML DOM borderTopColor 속성 완벽 정리 – 요소 상단 테두리 색상 설정하기

HTML DOM의 borderTopColor 속성은 요소의 상단 테두리(top border) 색상을 가져오거나 설정하는 데 사용됩니다. JavaScript를 활용하면 페이지 로드 후에도 동적으로 테두리 색상을 변경할 수 있어 인터랙티브한 UI를 구현할 때 유용합니다.

문법(Syntax)

borderTopColor 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.borderTopColor = "color|transparent|initial|inherit"

속성 값 설명

값	설명
color	상단 테두리의 색상을 지정합니다. 기본값은 검정색(black)입니다.
transparent	상단 테두리를 투명하게 만들어 그 아래에 있는 콘텐츠가 비치도록 합니다.
initial	해당 속성을 기본(default) 값으로 되돌립니다.
inherit	부모 요소의 속성 값을 상속받습니다.

예제(Example)

다음은 borderTopColor 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 이미지의 상단 테두리 색상이 주황색에서 파란색으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #IMG1 {
        border-top:solid 8px;
        border-top-color: orange;
    }
</style>
<script>
    function changeBorderTop(){
        document.getElementById("IMG1").style.borderTopColor="blue";
        document.getElementById("Sample").innerHTML="테두리 상단 색상이 파란색으로 변경되었습니다";
    }
</script>
</head>
<body>
    <img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
    <p>아래 버튼을 클릭하여 위 이미지의 상단 테두리 색상을 변경해 보세요</p>
    <button onclick="changeBorderTop()">Change Border Color</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

버튼을 클릭하기 전 화면입니다.

HTML DOM borderTopColor 속성 완벽 정리 – 요소 상단 테두리 색상 설정하기

“Change Border Color” 버튼을 클릭한 후의 화면입니다.

HTML DOM borderTopColor 속성 완벽 정리 – 요소 상단 테두리 색상 설정하기

예제 코드 분석

1. CSS로 초기 테두리 스타일 지정

먼저 id가 “IMG1”인 이미지 요소를 만들고 CSS 스타일을 적용했습니다. 이 스타일은 상단 테두리의 스타일(solid 8px)과 색상(orange)을 지정합니다.

#IMG1 {
    border-top:solid 8px;
    border-top-color: orange;
}
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">

2. 클릭 이벤트가 연결된 버튼 생성

그다음 사용자가 클릭하면 changeBorderTop() 함수를 실행하는 “Change Border Color” 버튼을 만들었습니다.

<button onclick="changeBorderTop()">Change Border Color</button>

3. changeBorderTop() 함수의 동작 원리

changeBorderTop() 함수는 getElementById() 메서드를 사용해 id가 “IMG1”인 <img> 요소를 가져온 뒤, 해당 요소의 borderTopColor 스타일 속성을 blue로 설정합니다. 이렇게 하면 상단 테두리 색상이 파란색으로 바뀌며, innerHTML 속성을 통해 id가 “Sample”인 단락에 변경 결과 메시지가 표시됩니다.

function changeBorderTop(){
    document.getElementById("IMG1").style.borderTopColor="blue";
    document.getElementById("Sample").innerHTML="테두리 상단 색상이 파란색으로 변경되었습니다";
}

정리

borderTopColor 속성은 CSS의 border-top-color와 동일한 역할을 하는 DOM 스타일 속성으로, color, transparent, initial, inherit 네 가지 값을 지원합니다. 버튼 클릭 같은 사용자 이벤트와 결합하면 테두리 색상을 실시간으로 변경하는 동적인 웹 페이지를 손쉽게 만들 수 있습니다.