웹 페이지를 프린트 할 때, 특정 요소 사이에 구분선을 추가하는 것은 일반적인 요구사항입니다. 자바스크립트를 사용하여 이를 수행하는 방법에 대해 알아보겠습니다.

1. CSS를 사용한 방법

아래는 CSS를 사용하여 프린트 시에 페이지 상단 및 페이지 하단에 구분선을 추가하는 방법입니다.

@media print {
  body::before {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    margin: 10px 0;
  }
  body::after {
    content: "";
    display: block;
    border-top: 1px solid #000;
    margin: 10px 0;
  }
}

2. 자바스크립트를 사용한 방법

특정 요소 사이에 구분선을 추가하려면 해당 요소들 사이에 <hr> 요소를 추가하면 됩니다. 아래는 자바스크립트를 사용하여 이를 수행하는 간단한 예제입니다.

function addSeparatorBetweenElements(element1, element2) {
  var separator = document.createElement('hr');
  element1.parentNode.insertBefore(separator, element2);
}

위 예제는 addSeparatorBetweenElements 함수를 사용하여 두 요소 사이에 구분선을 추가하는 방법을 보여줍니다. 이 함수는 적절한 요소를 선택하고 createElement 및 insertBefore 메소드를 사용하여 구분선을 추가합니다.

마치며

이제 프린트 시에 웹 페이지의 특정 요소 사이에 구분선을 추가하는 방법을 알아보았습니다. 이러한 방법들을 사용하면 프린트된 문서의 가독성을 향상시킬 수 있습니다.

참고 자료: MDN Web Docs