JavaScript로 외곽선(Outline)을 오프셋하여 테두리 경계 밖에 그리는 방법

외곽선 오프셋이란?

요소의 외곽선(outline)을 오프셋하려면 outlineOffset 속성을 사용합니다. 이 속성을 활용하면 테두리(border) 가장자리보다 바깥쪽으로 외곽선을 그릴 수 있어, 요소와 외곽선 사이에 간격을 만들 수 있습니다.

outlineOffset은 CSS에서도 사용할 수 있지만, JavaScript의 style 객체를 통해 동적으로 설정하는 것도 가능합니다.

JavaScript로 외곽선 오프셋 적용하기

아래 예제 코드를 실행한 후 버튼을 클릭하면, div 요소에 두꺼운 실선 외곽선이 추가되고 7px만큼 오프셋되어 테두리 경계 밖에 그려지는 것을 확인할 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            background-color: orange;
            border: 3px solid red;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <p>아래 버튼을 클릭하면 외곽선 오프셋이 적용됩니다.</p>
      <div id="box">
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
      </div>
      <br>
      <button type="button" onclick="display()">외곽선 오프셋 설정</button>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.outline = "thick solid";
            document.getElementById("box").style.outlineColor = "#5F5F5F";
            document.getElementById("box").style.outlineOffset = "7px";
         }
      </script>
   </body>
</html>

핵심 코드 설명

style.outline = "thick solid"; — 외곽선의 두께와 스타일을 지정합니다.
style.outlineColor = "#5F5F5F"; — 외곽선의 색상을 회색 계열로 지정합니다.
style.outlineOffset = "7px"; — 외곽선을 테두리 바깥으로 7픽셀 떨어뜨려 그립니다.

이처럼 outlineOffset 값을 조절하면 외곽선과 요소 사이의 간격을 자유롭게 디자인할 수 있으며, 음수 값을 사용하면 외곽선을 테두리 안쪽으로 당겨 그릴 수도 있습니다.