borderLeftStyle 속성은 HTML 요소의 왼쪽 테두리(border-left) 스타일을 설정하거나 반환하는 데 사용되는 DOM 스타일 속성입니다. 자바스크립트를 통해 동적으로 테두리 모양을 변경해야 할 때 유용하게 활용할 수 있습니다.
borderLeftStyle 속성 문법
borderLeftStyle 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderLeftStyle = value
사용 가능한 값(Value) 정리
borderLeftStyle 속성에 지정할 수 있는 값과 각 값의 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| none | 기본값으로, 테두리를 표시하지 않습니다. |
| hidden | "none"과 같지만 여전히 테두리 공간을 차지합니다. 사실상 투명하지만 존재하는 상태입니다. |
| dotted | 점선(dotted) 형태의 테두리를 정의합니다. |
| dashed | 파선(dashed) 형태의 테두리를 정의합니다. |
| solid | 실선(solid) 형태의 테두리를 정의합니다. |
| double | 이중선(double) 형태의 테두리를 정의합니다. |
| groove | 3D 홈(groove) 형태의 테두리를 정의하며, ridge의 반대 효과를 나타냅니다. |
| ridge | 3D 능선(ridge) 형태의 테두리를 정의하며, groove의 반대 효과를 나타냅니다. |
| inset | 3D 안쪽(inset) 형태의 테두리로, 요소가 파여 있는 것처럼 보입니다. outset의 반대 효과를 나타냅니다. |
| outset | 3D 바깥쪽(outset) 형태의 테두리로, 요소가 돌출된 것처럼 보입니다. |
| initial | 이 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
borderLeftStyle 속성 예제
다음 예제는 버튼을 클릭하면 div 요소의 왼쪽 테두리 스타일이 groove에서 dashed로 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-left: 8px solid dodgerblue;
border-left-style: groove;
}
</style>
<script>
function changeLeftStyle(){
document.getElementById("DIV1").style.borderLeftStyle="dashed";
document.getElementById("Sample").innerHTML="왼쪽 테두리 스타일이 변경되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하여 위 div의 왼쪽 테두리 스타일을 변경해 보세요</p>
<button onclick="changeLeftStyle()">Change Left Style</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지를 처음 열면 왼쪽 테두리가 groove(홈) 스타일로 표시됩니다.
"Change Left Style" 버튼을 클릭하면 다음과 같이 왼쪽 테두리가 dashed(파선) 스타일로 즉시 변경됩니다.
정리
borderLeftStyle 속성은 CSS의 border-left-style 속성에 대응하는 DOM 인터페이스로, 자바스크립트만으로 요소의 왼쪽 테두리 모양을 실시간으로 제어할 수 있습니다. none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 등 다양한 값을 지원하며, initial과 inherit 키워드도 사용할 수 있습니다. 버튼 클릭 이벤트와 함께 활용하면 사용자 인터랙션에 따라 UI를 동적으로 변화시키는 효과적인 방법이 됩니다.