HTML DOM borderLeft 속성이란?
HTML DOM의 borderLeft 속성은 요소의 왼쪽 테두리(left border) 관련 속성을 한 번에 가져오거나 설정할 수 있는 축약형(shorthand) 속성입니다. 이 속성 하나만으로 border-left-width(테두리 두께), border-left-style(테두리 스타일), border-left-color(테두리 색상) 세 가지 하위 속성 값을 동시에 제어할 수 있습니다.
문법(Syntax)
object.style.borderLeft = "width style color|initial|inherit"
각 값의 의미는 다음과 같습니다.
| 매개변수 | 설명 |
|---|---|
| width | 왼쪽 테두리의 두께를 설정합니다. |
| style | 왼쪽 테두리의 선 종류(실선, 점선 등)를 설정합니다. |
| color | 왼쪽 테두리의 색상을 설정합니다. |
| initial | 이 속성을 기본값으로 초기화합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
그럼 borderLeft 속성의 실제 사용 예를 살펴보겠습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border-left: 4px solid magenta;
font-size: 1.5rem;
}
</style>
<script>
function changeBorderLeft(){
document.getElementById("P1").style.borderLeft="9px dashed red";
document.getElementById("Sample").innerHTML="문단 요소의 왼쪽 테두리가 변경되었습니다";
}
</script>
</head>
<body>
<p id="P1">이것은 문단 안에 들어 있는 샘플 텍스트입니다. 여기는 같은 샘플 텍스트의 또 다른 줄입니다.</p>
<p>아래 버튼을 클릭하면 위 문단의 왼쪽 테두리 속성이 변경됩니다.</p>
<button onclick="changeBorderLeft()">왼쪽 테두리 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
'왼쪽 테두리 변경' 버튼을 클릭하면 다음과 같이 화면이 바뀝니다.
예제 코드 분석
위 예제에서는 먼저 id가 "P1"인 문단을 만들고, 그 안에 샘플 텍스트를 넣은 뒤 해당 문단에 CSS 스타일을 적용했습니다.
#P1 {
border-left: 4px solid magenta;
font-size: 1.5rem;
}
<p id="P1">이것은 문단 안에 들어 있는 샘플 텍스트입니다. 여기는 같은 샘플 텍스트의 또 다른 줄입니다.</p>
이어서 사용자가 클릭하면 changeBorderLeft() 함수를 실행하는 '왼쪽 테두리 변경' 버튼을 만들었습니다.
<button onclick="changeBorderLeft()">왼쪽 테두리 변경</button>
changeBorderLeft() 함수는 getElementById() 메서드를 사용해 id가 "P1"인 문단 요소의 borderLeft 스타일 속성에 접근한 뒤, 그 값을 '9px dashed red'(9px 두께의 빨간색 점선)로 변경합니다. 그런 다음 innerHTML 속성을 이용해 id가 "Sample"인 문단에 변경 사항을 알리는 메시지를 출력합니다.
function changeBorderLeft(){
document.getElementById("P1").style.borderLeft="9px dashed red";
document.getElementById("Sample").innerHTML="문단 요소의 왼쪽 테두리가 변경되었습니다";
}