borderBottomStyle 속성은 HTML 요소의 하단(bottom) 테두리 선 스타일을 설정하거나 현재 적용된 값을 가져올 때 사용하는 JavaScript DOM 속성입니다. 이 속성을 활용하면 점선, 파선, 실선 등 다양한 테두리 모양을 동적으로 변경할 수 있습니다.
문법(Syntax)
borderBottomStyle 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderBottomStyle = value
속성 값(Values)
borderBottomStyle 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | none 기본값으로, 테두리를 표시하지 않습니다. |
| 2 | hidden 'none'과 유사하게 테두리를 숨기지만, 여전히 테두리 영역의 공간을 차지합니다. 사실상 투명한 상태로 존재합니다. |
| 3 | dotted 점선(dotted) 형태의 테두리를 정의합니다. |
| 4 | dashed 파선(dashed) 형태의 테두리를 정의합니다. |
| 5 | solid 실선(solid) 형태의 테두리를 정의합니다. |
| 6 | double 이중선(double) 형태의 테두리를 정의합니다. |
| 7 | groove 3D 홈(groove)이 파인 느낌의 테두리를 정의하며, ridge의 반대 효과를 냅니다. |
| 8 | ridge 3D 융기(ridge)된 느낌의 테두리를 정의하며, groove의 반대 효과를 냅니다. |
| 9 | inset 요소가 안쪽으로 파여(embedded) 들어간 듯한 3D 효과의 테두리를 정의하며, outset의 반대 효과를 냅니다. |
| 10 | outset 요소가 바깥쪽으로 돌출(embossed)된 듯한 3D 효과의 테두리를 정의하며, inset의 반대 효과를 냅니다. |
| 11 | initial 해당 속성을 기본(initial) 값으로 설정합니다. |
| 12 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
borderBottomStyle 속성의 실제 사용 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 div 요소의 하단 테두리 스타일이 'groove'에서 'dashed'로 변경되는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-bottom: 8px solid dodgerblue;
border-bottom-style: groove;
}
</style>
<script>
function changeBottomStyle(){
document.getElementById("DIV1").style.borderBottomStyle="dashed";
document.getElementById("Sample").innerHTML="하단 테두리 스타일이 변경되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SAMPLE TEXT</div>
<p>아래 버튼을 클릭하여 div의 하단 테두리 스타일을 변경해 보세요</p>
<button onclick="changeBottomStyle()">하단 스타일 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'하단 스타일 변경' 버튼을 클릭하면 다음과 같이 테두리가 파선(dashed) 스타일로 바뀌는 것을 확인할 수 있습니다.
