웹 페이지에서 특정 부분을 프린트할 때 전체 페이지가 아니라 해당 부분만 스크롤이 가능하도록 설정하고 싶을 때가 있습니다. 자바스크립트를 사용하여 이를 수행하는 방법을 살펴봅시다.

문제 이해하기

웹 페이지에는 프린트 버튼이 있고, 특정 섹션의 내용을 스크롤 가능하게 프린트해야 합니다. 기본적으로 프린트 기능을 실행하면 전체 페이지의 내용이 프린트되는 경우가 많습니다. 하지만 우리는 특정 부분의 스크롤 가능한 내용만을 프린트하고 싶습니다.

해결책: @media print를 활용하기

자바스크립트 없이도 CSS의 @media print를 활용하여 이 문제를 해결할 수 있습니다. 아래와 같이 스타일 시트에 다음 내용을 추가합니다.

@media print {
  body {
    overflow: hidden;
  }
  .print-section {
    overflow: auto;
    height: auto;
  }
}

이 스타일 시트를 통해 프린트 시에 전체 페이지의 오버플로우를 숨기고, 프린트할 섹션에만 스크롤을 허용합니다.

자바스크립트를 활용한 해결책

만약 자바스크립트를 활용하여 위 문제를 해결하고 싶다면, 아래와 같은 단계로 이를 수행할 수 있습니다.

1. 프린트 버튼에 클릭 이벤트 리스너를 추가합니다.
2. 해당 섹션의 overflow 스타일을 auto로 변경합니다.
3. 프린트가 완료되면 다시 overflow 스타일을 수정하여 초기 상태로 되돌립니다.

아래는 이를 구현한 JavaScript 코드 예시입니다.

document.getElementById('printButton').addEventListener('click', function() {
  var sectionToPrint = document.getElementById('printSection');
  sectionToPrint.style.overflow = 'auto';

  window.print();

  sectionToPrint.style.overflow = 'hidden';
});

결론

프린트 시에 웹 페이지의 특정 부분을 스크롤 가능하게 하는 방법에 대해 자바스크립트를 사용하여 해결책을 제시했습니다. 또한 CSS의 @media print를 활용하여 문제를 해결할 수 있는 방법에 대해서도 알아보았습니다. 각각의 방법은 상황에 적합한 해결책을 찾는 데 도움이 될 것입니다.

참고 자료

• W3Schools - CSS @media Rule