HTML DOM borderTopStyle 속성이란?
HTML DOM의 borderTopStyle 속성은 요소의 위쪽(top) 테두리 스타일을 설정하거나 현재 설정된 값을 반환하는 데 사용됩니다. 자바스크립트를 활용해 버튼 클릭 같은 사용자 이벤트에 따라 테두리 스타일을 동적으로 변경할 수 있어 웹 페이지에 인터랙티브한 효과를 추가할 때 유용합니다.
구문(Syntax)
borderTopStyle 속성을 설정하는 기본 구문은 다음과 같습니다.
object.style.borderTopStyle = value
속성 값(Value) 설명
borderTopStyle 속성에 사용할 수 있는 값들은 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| none | 기본값으로, 테두리를 표시하지 않습니다. |
| hidden | "none"과 동일하지만 테두리 자리의 공간은 계속 차지합니다. 즉, 눈에는 보이지 않지만 실제로는 존재하는 상태입니다. |
| dotted | 점선(dotted) 테두리를 정의합니다. |
| dashed | 파선(dashed) 테두리를 정의합니다. |
| solid | 실선(solid) 테두리를 정의합니다. |
| double | 이중선(double) 테두리를 정의합니다. |
| groove | 입체적인 홈(groove) 형태의 3D 테두리를 정의하며, ridge와 반대되는 효과를 냅니다. |
| ridge | 입체적인 능선(ridge) 형태의 3D 테두리를 정의하며, groove와 반대되는 효과를 냅니다. |
| inset | 요소가 안쪽으로 파인 것처럼 보이는 3D 테두리를 정의하며, outset의 반대 효과를 냅니다. |
| outset | 요소가 밖으로 돌출된 것처럼 보이는 3D 테두리를 정의하며, inset의 반대 효과를 냅니다. |
| initial | 해당 속성을 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제를 통해 borderTopStyle 속성의 실제 동작을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-top: 8px solid dodgerblue;
border-top-style: groove;
}
</style>
<script>
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="위쪽 테두리 스타일이 변경되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 위 div의 위쪽 테두리 스타일이 변경됩니다</p>
<button onclick="changeTopStyle()">Change Top Style</button>
<p id="Sample"></p>
</body>
</html>출력 결과(Output)
"Change Top Style" 버튼을 클릭하면 아래와 같이 테두리 스타일이 변경됩니다.
예제 코드 분석
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. CSS로 초기 테두리 스타일 지정
먼저 id가 "DIV1"인 div 요소를 생성하고, 해당 id 선택자를 통해 CSS 스타일을 적용했습니다. 이 스타일에는 주로 border-top의 두께와 색상, 그리고 테두리 스타일이 포함되어 있습니다.
#DIV1{
width:300px;
height:100px;
border-top: 8px solid dodgerblue;
border-top-style: groove;
}
<div id="DIV1">SOME SAMPLE TEXT</div>2. 스타일 변경 버튼 생성
그다음, 사용자가 클릭하면 changeTopStyle() 메서드를 실행하는 "Change Top Style" 버튼을 만들었습니다.
<button onclick="changeTopStyle()">Change Top Style</button>
3. 자바스크립트로 테두리 스타일 변경
changeTopStyle() 메서드는 getElementById()를 사용하여 id가 "DIV1"인 div 요소를 가져온 뒤, 해당 요소의 borderTopStyle 스타일 속성을 dashed로 변경합니다. 이어서 innerHTML 속성을 통해 지정된 텍스트를 출력하여 id가 "Sample"인 단락에 변경 결과를 표시합니다.
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="위쪽 테두리 스타일이 변경되었습니다";
}마무리
이처럼 borderTopStyle 속성을 활용하면 자바스크립트만으로 요소의 위쪽 테두리 스타일을 손쉽게 제어할 수 있습니다. dotted, dashed, solid, double 등 다양한 값과 3D 효과를 내는 groove, ridge, inset, outset 값을 상황에 맞게 조합하면 더욱 풍부한 UI를 구현할 수 있습니다.