HTML 요소의 아래쪽 테두리(bottom border) 스타일을 설정하려면 JavaScript의 borderBottomStyle 속성을 사용하면 됩니다. 이 속성을 활용하면 버튼 클릭이나 특정 이벤트 발생 시 동적으로 요소에 아래쪽 테두리를 추가하거나 기존 스타일을 변경할 수 있습니다.
사용 가능한 테두리 스타일 값
borderBottomStyle 속성에는 다양한 값을 지정할 수 있으며, 상황에 맞게 선택하여 사용하면 됩니다.
- dashed – 짧은 선이 이어진 점선 테두리
- dotted – 점으로 이루어진 테두리
- solid – 한 줄의 실선 테두리
- double – 두 줄로 된 이중선 테두리
- groove / ridge / inset / outset – 입체적인 음각·양각 효과가 있는 테두리
- none / hidden – 테두리를 표시하지 않음
예제
아래 예제 코드를 실행한 후 버튼을 클릭하면, div 요소의 아래쪽 테두리 스타일이 dashed(점선)로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id="box">Demo Text</div>
<br>
<button onclick="display()">Click to set style of bottom border</button>
<script>
function display() {
document.getElementById("box").style.borderBottomStyle = "dashed";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 display() 함수가 호출됩니다. 이 함수는 document.getElementById("box")를 통해 id가 'box'인 요소를 가져온 뒤, 해당 요소의 style.borderBottomStyle 속성에 "dashed" 값을 할당합니다. 그 결과 화면에는 아래쪽 테두리가 점선 형태로 나타납니다.