HTML DOM borderRightColor 속성 완벽 가이드 – 요소 오른쪽 테두리 색상 제어하기

HTML DOM의 borderRightColor 속성은 HTML 요소의 오른쪽 테두리 색상을 가져오거나 설정하는 데 사용됩니다. JavaScript를 통해 동적으로 테두리 색상을 변경해야 할 때 유용하게 활용할 수 있습니다.

문법

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

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

속성 값 설명

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

예제

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

<!DOCTYPE html>
<html>
<head>
<style>
    #IMG1 {
        border-right: solid 8px;
        border-right-color: orange;
    }
</style>
<script>
    function changeBorderRight(){
        document.getElementById("IMG1").style.borderRightColor = "lightgreen";
        document.getElementById("Sample").innerHTML = "오른쪽 테두리 색상이 연두색으로 변경되었습니다";
    }
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg">
<p>아래 버튼을 클릭하여 이미지의 오른쪽 테두리 색상을 변경해 보세요</p>
<button onclick="changeBorderRight()">테두리 색상 변경</button>
<p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 이미지의 오른쪽 테두리가 주황색(orange)으로 표시됩니다.

“테두리 색상 변경” 버튼을 클릭하면 다음과 같이 테두리가 연두색(lightgreen)으로 바뀌고, 변경 결과 메시지가 화면에 출력됩니다.

예제 코드 분석

1. CSS 스타일 정의

id가 “IMG1”인 이미지 요소에 CSS 스타일을 적용했습니다. 이 스타일은 오른쪽 테두리의 스타일(solid 8px)과 색상(주황색)을 지정합니다.

#IMG1 {
   border-right: solid 8px;
   border-right-color: orange;
}

2. 버튼 생성 및 이벤트 연결

“테두리 색상 변경”이라는 이름의 버튼을 만들고, 사용자가 클릭하면 changeBorderRight() 함수가 실행되도록 onclick 이벤트를 연결했습니다.

<button onclick="changeBorderRight()">테두리 색상 변경</button>

3. JavaScript 함수 동작 원리

changeBorderRight() 함수는 getElementById() 메서드로 id가 “IMG1”인 <img> 요소를 가져온 뒤, 해당 요소의 borderRightColor 스타일 속성을 lightgreen으로 설정합니다. 이를 통해 오른쪽 테두리 색상이 즉시 변경되며, innerHTML 속성을 사용해 id가 “Sample”인 단락(<p>)에 변경 완료 메시지를 표시합니다.

function changeBorderRight(){
   document.getElementById("IMG1").style.borderRightColor = "lightgreen";
   document.getElementById("Sample").innerHTML = "오른쪽 테두리 색상이 연두색으로 변경되었습니다";
}

정리

borderRightColor 속성은 CSS의 border-right-color와 동일한 역할을 하지만, JavaScript에서 동적으로 제어할 수 있다는 점이 큰 장점입니다. 사용자 인터랙션에 반응하여 테두리 색상을 실시간으로 변경하는 UI를 구현할 때 활용해 보세요.