HTML DOM borderLeftColor 속성 – 요소 왼쪽 테두리 색상 제어하기

HTML DOM의 borderLeftColor 속성은 요소의 왼쪽 테두리 색상을 가져오거나 설정하는 데 사용됩니다. 자바스크립트를 통해 동적으로 테두리 색상을 변경할 수 있어 인터랙티브한 웹 페이지 제작에 유용하게 활용됩니다.

구문

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

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

각 값의 의미는 아래 표에서 확인할 수 있습니다.

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

이제 borderLeftColor 속성을 실제로 활용한 예제를 살펴보겠습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
    #IMG1{
        border-left:solid 8px;
        border-left-color: orange;
    }
</style>
<script>
    function changeBorderLeft(){
        document.getElementById("IMG1").style.borderLeftColor="lightgreen";
        document.getElementById("Sample").innerHTML="테두리 왼쪽 색상이 연두색으로 변경되었습니다";
    }
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
<p>아래 버튼을 클릭하면 위 이미지의 왼쪽 테두리 색상이 변경됩니다</p>
<button onclick="changeBorderLeft()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>

실행 결과

HTML DOM borderLeftColor 속성 – 요소 왼쪽 테두리 색상 제어하기

"Change Border Color" 버튼을 클릭하면 다음과 같이 화면이 바뀝니다.

HTML DOM borderLeftColor 속성 – 요소 왼쪽 테두리 색상 제어하기

예제 동작 원리

위 예제가 작동하는 방식을 단계별로 살펴보겠습니다.

먼저 id가 "IMG1"인 이미지 요소를 생성하고 CSS 스타일을 적용했습니다. 이 CSS 스타일은 왼쪽 테두리의 스타일(굵기 8px의 실선)과 색상(주황색)을 지정합니다.

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

그다음, 사용자가 클릭하면 changeBorderLeft() 메서드를 실행하는 "Change Border Color" 버튼을 만들었습니다.

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

changeBorderLeft() 메서드는 getElementById() 메서드를 사용하여 id가 "IMG1"인 <img> 요소를 가져온 뒤, 해당 요소의 borderLeftColor 스타일 속성을 lightgreen(연두색)으로 설정합니다. 이를 통해 왼쪽 테두리 색상이 연두색으로 변경되며, innerHTML 속성을 이용해 id가 "Sample"인 단락에 변경 결과 메시지가 표시됩니다.

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