HTML DOM borderStyle 속성이란?
HTML DOM의 borderStyle 속성은 요소의 테두리(border) 스타일을 한 번에 가져오거나 설정할 수 있는 단축 속성(shorthand)입니다. 값은 최소 1개에서 최대 4개까지 지정할 수 있으며, 값의 개수에 따라 적용 방식이 달라집니다.
- 값을 4개 지정하는 경우: 시계 방향(위 → 오른쪽 → 아래 → 왼쪽) 순서로 각 테두리에 스타일이 차례대로 적용됩니다.
- 값을 1개만 지정하는 경우: 동일한 스타일이 네 방향 테두리 모두에 적용됩니다.
- 값을 2개 지정하는 경우: 첫 번째 값은 위·아래 테두리에, 두 번째 값은 왼쪽·오른쪽 테두리에 적용됩니다.
문법(Syntax)
borderStyle 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderStyle = value;borderStyle 속성 값 종류
| 값 | 설명 |
|---|---|
| none | 기본값으로, 테두리를 표시하지 않습니다. |
| hidden | none과 동일하지만 테두리 공간은 그대로 차지합니다. 눈에 보이지 않지만 실제로는 존재하는 상태입니다. |
| dotted | 점선(dotted) 테두리를 정의합니다. |
| dashed | 파선(dashed) 테두리를 정의합니다. |
| solid | 실선(solid) 테두리를 정의합니다. |
| double | 이중선(double) 테두리를 정의합니다. |
| groove | 3D 홈(groove) 테두리를 정의하며, ridge의 반대 효과를 냅니다. |
| ridge | 3D 융기(ridge) 테두리를 정의하며, groove의 반대 효과를 냅니다. |
| inset | 3D 내장(inset) 테두리를 정의하며, 요소가 안으로 파여 있는 것처럼 보입니다. outset의 반대 효과입니다. |
| outset | 3D 돌출(outset) 테두리를 정의하며, 요소가 밖으로 솟아 있는 것처럼 보입니다. inset의 반대 효과입니다. |
| initial | 이 속성을 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
borderStyle 속성 활용 예제
다음은 borderStyle 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 div 요소의 테두리 스타일이 홈(groove)에서 파선(dashed)으로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle(){
document.getElementById("DIV1").style.borderStyle="dashed";
document.getElementById("Sample").innerHTML="테두리 스타일이 파선(dashed)으로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="DIV1">샘플 텍스트</div>
<p>아래 버튼을 클릭하면 위 div의 테두리 스타일이 변경됩니다.</p>
<button onclick="changeBorderStyle()">테두리 스타일 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 다음과 같이 groove 스타일의 테두리가 표시됩니다.
"테두리 스타일 변경" 버튼을 클릭하면 아래 그림처럼 테두리가 파선(dashed) 스타일로 바뀌는 것을 확인할 수 있습니다.
