HTML DOM의 borderRightStyle 속성은 HTML 요소의 오른쪽(right) 테두리 스타일을 설정하거나 현재 적용된 값을 반환하는 데 사용됩니다.
이 속성은 JavaScript를 통해 동적으로 테두리 모양을 변경할 수 있어서, 버튼 클릭과 같은 사용자 이벤트에 반응하는 인터랙티브한 웹 페이지를 만들 때 유용합니다.
문법(Syntax)
borderRightStyle 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderRightStyle = value
속성 값(Value) 설명
borderRightStyle 속성에 사용할 수 있는 값들은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| 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) 테두리를 정의하여 요소가 돌출된 것처럼 보이게 합니다. inset의 반대 효과입니다. |
| initial | 해당 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
borderRightStyle 속성 예제
아래 예제는 div 요소의 오른쪽 테두리 스타일을 groove에서 dashed로 변경하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-Right: 8px solid dodgerblue;
border-Right-style: groove;
}
</style>
<script>
function changeRightStyle(){
document.getElementById("DIV1").style.borderRightStyle="dashed";
document.getElementById("Sample").innerHTML="오른쪽 테두리 스타일이 변경되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 위 div의 오른쪽 테두리 스타일이 변경됩니다</p>
<button onclick="changeRightStyle()">Change Right Style</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 오른쪽 테두리가 groove 스타일로 표시됩니다.
“Change Right Style” 버튼을 클릭하면 다음과 같이 오른쪽 테두리가 dashed 스타일로 즉시 변경됩니다.
정리
borderRightStyle 속성은 CSS의 border-right-style 속성을 JavaScript로 제어할 수 있게 해주는 DOM API입니다. none, dotted, dashed, solid, double 등 다양한 테두리 스타일 값을 활용하면 사용자 액션에 따라 화면을 동적으로 꾸밀 수 있습니다.