HTML DOM의 borderRight 속성은 요소의 오른쪽 테두리 관련 속성들을 한 번에 가져오거나 설정할 수 있는 축약형(shorthand) 속성입니다. 이 속성 하나로 border-right-width, border-right-style, border-right-color 세 가지 하위 속성을 모두 제어할 수 있습니다.
문법(Syntax)
borderRight 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderRight = "width style color|initial|inherit"
각 값의 의미는 아래 표와 같습니다.
| 매개변수 | 설명 |
|---|---|
| width | 오른쪽 테두리의 너비를 설정합니다. |
| style | 오른쪽 테두리의 스타일(solid, dashed 등)을 설정합니다. |
| color | 오른쪽 테두리의 색상을 설정합니다. |
| initial | 해당 속성을 기본값으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
이제 borderRight 속성의 실제 사용 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border-right: 4px solid magenta;
font-size: 1.5rem;
}
</style>
<script>
function changeBorderRight(){
document.getElementById("P1").style.borderRight="9px dashed red";
document.getElementById("Sample").innerHTML="단락 요소의 오른쪽 테두리가 변경되었습니다.";
}
</script>
</head>
<body>
<p id="P1">단락 안에 들어 있는 샘플 텍스트입니다. 여기는 샘플 텍스트의 또 다른 줄입니다.</p>
<p>아래 버튼을 클릭하면 위 단락의 오른쪽 테두리 속성이 변경됩니다.</p>
<button onclick="changeBorderRight()">테두리 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
버튼을 클릭한 후의 화면은 다음과 같습니다.
예제 동작 원리
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. 초기 스타일 설정
먼저 id가 "P1"인 단락 요소를 만들고, 여기에 마젠타색 실선 테두리를 적용하는 CSS 스타일을 지정했습니다.
#P1 {
border-right: 4px solid magenta;
font-size: 1.5rem;
}
<p id="P1">단락 안에 들어 있는 샘플 텍스트입니다.</p>2. 버튼 생성 및 이벤트 연결
다음으로 "테두리 변경" 버튼을 만들어, 사용자가 클릭하면 changeBorderRight() 함수가 실행되도록 onclick 이벤트를 연결했습니다.
<button onclick="changeBorderRight()">테두리 변경</button>
3. 자바스크립트로 테두리 속성 변경
changeBorderRight() 함수는 getElementById() 메서드를 사용해 id가 "P1"인 단락 요소의 borderRight 스타일 속성에 접근한 뒤, 그 값을 '9px dashed red'(너비 9px, 빨간색 점선)로 변경합니다. 이어서 innerHTML 속성을 이용해 id가 "Sample"인 단락에 변경 완료 메시지를 출력합니다.
function changeBorderRight(){
document.getElementById("P1").style.borderRight="9px dashed red";
document.getElementById("Sample").innerHTML="단락 요소의 오른쪽 테두리가 변경되었습니다.";
}이처럼 borderRight 속성을 활용하면 별도의 CSS 수정 없이 자바스크립트만으로 요소의 오른쪽 테두리를 동적으로 제어할 수 있습니다. 버튼 클릭, 마우스 오버 등 다양한 이벤트와 조합하면 더욱 풍부한 인터랙션을 구현할 수 있습니다.