자바스크립트, 특정 요소만, 특정페이지만 인쇄하기

페이지의 특정 부분만 인쇄하고 싶은 경우, 일반적인 접근 방법은 인쇄할 내용만 포함하는 새로운 팝업 창을 열고, 그 창에 인쇄할 요소의 HTML을 복사한 후 인쇄하는 것입니다. 아래는 특정 요소를 선택하여 인쇄하는 예제입니다:

javascript
Copy code
function printElement(elem) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var printSection = document.createElement("div");
        printSection.id = "printSection";
        document.body.appendChild(printSection);
    }

    printSection.innerHTML = "";
    printSection.appendChild(domClone);
    window.print();
}

function printElement(elem) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var printSection = document.createElement("div");
        printSection.id = "printSection";
        document.body.appendChild(printSection);
    }

    printSection.innerHTML = "";
    printSection.appendChild(domClone);
    window.print();
}

이 코드는 주어진 DOM 요소를 복제하고, id가 "printSection"인 div에 붙여넣은 후에 인쇄합니다. 만약 "printSection"이 없다면 새로 만들어 사용합니다.

CSS를 사용하여 특정 부분 인쇄
HTML 문서 내에서 인쇄할 부분을 CSS를 이용하여 지정할 수도 있습니다. 이 방법은 페이지의 나머지 부분을 인쇄에서 제외하고 싶을 때 유용합니다.

css
Copy code
@media print {
    body * {
        visibility: hidden;
    }
    #printableArea, #printableArea * {
        visibility: visible;
    }
    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
    }
}

@media print {
    body * {
        visibility: hidden;
    }
    #printableArea, #printableArea * {
        visibility: visible;
    }
    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
    }
}

이 CSS는 인쇄 시 #printableArea 요소만 보이도록 설정합니다. 페이지의 다른 부분은 visibility 속성을 hidden으로 설정하여 숨깁니다.

사용법
HTML에서 인쇄하고자 하는 부분을 id="printableArea"로 마크업하고, 위의 CSS와 함께 사용합니다.

html
Copy code
<div id="printableArea">
    이 부분만 인쇄됩니다.
</div>
<button onclick="window.print();">Print this section</button>
이러한 방법들을 통해 자바스크립트와 HTML, CSS를 활용하여 웹 페이지의 전체 또는 일부를 사용자의 요구에 맞게 인쇄할 수 있습니다.