메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

web accessibility DIV를 이용하여 페이지의 특정 부분만 인쇄하는 방법

흑묘 2010.06.07 11:00 read.645

2010.06.07 11:00:57

DIV를 이용하여 페이지의 특정 부분만 인쇄하는 방법


웹 페이지가 상당히 길 때 사용자로 하여금 특정 부분만 인쇄할 수 있는 인터페이스를 제공해 주고 싶은 경우들이 종종 있다. 하지만 일반 브라우저는 페이지의 특정 부분만을 인쇄할 수 있는 메쏘드를 제공하고 있지 않다. 물론, 브라우저의 인쇄 대화 상자에서 일부 페이지를 인쇄할 수 있기는 하지만 우리가 원하는 것은 그런 기능이 아니다. 백문이 불여일견! 아래 있는 "소스실행하기"버튼을 클릭한 후 나타난 화면에서 원하는 인쇄 영역을 선택한 다음 "특정 부분 인쇄" 버튼을 클릭해 보기 바란다.

<DIV> 태그를 잘 이용하면 특정 DIV 영역만 인쇄할 수가 있다. 인 터넷 익스플로러는 window.onbeforeprint와 window.onafterprint 이벤트 핸들러를 지원하는데, 이들은 인쇄 전과 후의 웹 페이지 내용을 변경할 수 있도록 도와준다. 이 기능을 이용하여 특정 DIV 영역은 보이게 하고 나머지 영역은 숨길 수가 있다. (불행히 넷스케이프는 이 이벤트 핸들러를 지원하지 않는다.

하지만 여기서는 약간의 제약이 있긴 하지만 넷스케이프에서도 약간의 보이기 속성을 조절하여 비슷하게 구현해 보기로 한다.)


<HTML>

<HEAD>

    <STYLE>DIV { position: relative; }</STYLE>
    <SCRIPT>
        var div2print;
        function printDiv (id) {
            if (document.all && window.print) {
               div2print = document.all[id];
                window.onbeforeprint = hideDivs;
                window.onafterprint = showDivs;
                window.print();
            }
           else if (document.layers) {
                div2print = document[id];
                hideDivs();
                window.print();
            }
        }
        function hideDivs () {
            if (document.all) {
                var divs = document.all.tags('DIV');
                for (var d = 0; d < divs.length; d++)
                if (divs[d] != div2print)
                divs[d].style.display = 'none';
            }
            else if (document.layers) {
                for (var l = 0; l < document.layers.length; l++)
                if (document.layers[l] != div2print)
                document.layers[l].visibility = 'hide';
            }
        }
        function showDivs () {
            var divs = document.all.tags('DIV');
            for (var d = 0; d < divs.length; d++)
            divs[d].style.display = 'block';
        }
    </SCRIPT>
</HEAD>
<BODY>
<DIV>
    <FORM>
        <SELECT NAME="divSelect">
            <OPTION>첫 번째 영역만 인쇄
            <OPTION>두 번째 영역만 인쇄
            <OPTION>세 번째 영역만 인쇄
        </SELECT>
        <INPUT TYPE="button" ONCLICK="var s = this.form.divSelect;var divID = s.options[s.selectedIndex].text;
printDiv(divID);"VALUE="특정 부분 인쇄">
    </FORM>
</DIV>
<DIV ID="d1">
    <b>[첫 번째 영역]</b><br>
    첫 번째 영역입니다!<br><br>
</DIV>
<DIV ID="d2">
    <b>[두 번째 영역]</b><br>
    두 번째 영역입니다!<br>
    두 번째 영역을 선택하여 인쇄해 보세요!<br><br>
</DIV>
<DIV ID="d3">
    <b>[세 번째 영역]</b><br>
    세 번째 영역입니다!<br>
    세 번째 영역을 선택하여 인쇄해 보세요!<br>
    From 코리아인터넷닷컴
</DIV>
</BODY>
</HTML>

출처 : 코리아인터넷닷컴

추가메뉴 목록
위로