JavaScript로 한 줄의 선언만으로 테두리 너비, 스타일, 색상을 한 번에 설정하는 방법

JavaScript에서 테두리의 너비(width), 스타일(style), 색상(color)을 개별 속성으로 나누어 설정하지 않고 한 번의 선언으로 모두 지정하려면 border 속성을 사용하면 됩니다.

border 속성이란?

style.border는 CSS의 단축 속성(shorthand property)으로, 다음 세 가지 값을 공백으로 구분하여 순서대로 작성합니다.

테두리 너비 — 예: thin, medium, thick 또는 px 단위 값
테두리 스타일 — 예: solid, dashed, dotted, double 등
테두리 색상 — 예: #000000, red, rgb(0,0,0) 등

예제 코드

아래 코드를 실행해 보면 버튼 클릭 시 div 요소에 두꺼운 검정색 점선 테두리가 한 번에 적용되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">Set border</button>
      <div id="box">
         <p>Demo Text</p>
         <p>Demo Text</p>
      </div>
      <script>
         function display() {
            document.getElementById("box").style.border = "thick dashed #000000";
         }
      </script>
   </body>
</html>

코드 설명

위 예제에서 핵심 부분은 다음 한 줄입니다.

document.getElementById("box").style.border = "thick dashed #000000";

이 코드는 id가 box인 요소를 선택한 뒤, border 속성에 thick(두꺼운 너비), dashed(점선 스타일), #000000(검정색) 세 가지 값을 동시에 할당합니다. 이처럼 CSS 단축 속성을 활용하면 borderWidth, borderStyle, borderColor를 각각 따로 설정하는 것보다 코드가 간결해지고 유지보수도 쉬워집니다.