{"id":294,"date":"2024-09-09T08:55:54","date_gmt":"2024-09-08T23:55:54","guid":{"rendered":"https:\/\/javascript.auctionpro.co.kr\/?page_id=294"},"modified":"2024-10-22T14:12:34","modified_gmt":"2024-10-22T05:12:34","slug":"print-backgroud-color","status":"publish","type":"page","link":"https:\/\/javascript.auctionpro.co.kr\/?page_id=294","title":{"rendered":"Print backgroud color"},"content":{"rendered":"\n

Overview : \ud504\ub9b0\ud2b8\uc2dc \ubc31\uadf8\ub77c\uc6b4\ub4dc \uceec\ub7ec \ub098\uc624\uac8c \ud558\uae30 <\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\ud504\ub9b0\ud2b8\ud560 \ub54c \ubc30\uacbd\uc0c9 \uc720\uc9c0\ud558\uae30<\/h3>\n\n\n\n
<style>\n  @media print {\n    .print-style {\n      -webkit-print-color-adjust: exact; \/* Chrome, Safari \ub4f1 \uc6f9\ud0b7 \uae30\ubc18 \ube0c\ub77c\uc6b0\uc800\uc6a9 *\/\n      print-color-adjust: exact; \/* \ud45c\uc900 \uc18d\uc131 *\/\n    }\n  }\n<\/style><\/pre><\/div>\n\n\n\n
\ub300\ubd80\ubd84\uc758 \ube0c\ub77c\uc6b0\uc800\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ud504\ub9b0\ud2b8 \uc2dc \ubc30\uacbd\uc0c9\uc744 \ucd9c\ub825\ud558\uc9c0 \uc54a\ub3c4\ub85d \uc124\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574, @media print<\/code> \uaddc\uce59\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud504\ub9b0\ud2b8\ud560 \ub54c \ubc30\uacbd\uc0c9\uc774 \ucd9c\ub825\ub418\ub3c4\ub85d \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
html + css<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Print Background Example<\/title>\n  <style>\n    @media print {\n      .print-style {\n        -webkit-print-color-adjust: exact; \/* For webkit-based browsers like Chrome and Safari *\/\n        print-color-adjust: exact; \/* Standard property *\/\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"print-style\" style=\"background-color: yellow; color: black; padding: 10px;\">\n    This text will have a background color when printed.\n  <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud2b9\uc815 div<\/code> \uc694\uc18c\ub9cc \uc778\uc1c4\ud558\ub824\uba74, \uc77c\ubc18\uc801\uc778 \uc811\uadfc \ubc29\uc2dd\uc740 \ud574\ub2f9 div<\/code>\uc758 \ucf58\ud150\uce20\ub97c \uc0c8\ub85c\uc6b4 \ucc3d\uc5d0 \ubcf5\uc0ac\ud558\uace0 \uadf8 \ucc3d\uc5d0\uc11c \uc778\uc1c4\ub97c \uc2e4\ud589\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \ud398\uc774\uc9c0\uc758 \ub2e4\ub978 \uc694\uc18c\ub4e4\uc740 \uc81c\uc678\ud558\uace0 \ud2b9\uc815 div<\/code>\ub9cc \ucd9c\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uc774\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc758 \uc608\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Print Specific Div<\/title>\n<\/head>\n<body>\n    <div id=\"content-to-print\">\n        <h1>This will be printed<\/h1>\n        <p>This content is inside the div that will be printed.<\/p>\n    <\/div>\n\n    <div id=\"content-to-ignore\">\n        <h1>This will not be printed<\/h1>\n        <p>This content is outside the div and will not be printed.<\/p>\n    <\/div>\n\n    <button onclick=\"printDiv()\">Print Specific Div<\/button>\n\n    <script>\n        function printDiv() {\n            \/\/ \uc778\uc1c4\ud560 div \uc694\uc18c\ub97c \uc120\ud0dd\n            var divToPrint = document.getElementById('content-to-print').innerHTML;\n\n            \/\/ \uc0c8\ub85c\uc6b4 \ucc3d \uc5f4\uae30\n            var newWindow = window.open('', '', 'width=800,height=600');\n            \n            \/\/ \uc0c8 \ucc3d\uc5d0 HTML \uc791\uc131\n            newWindow.document.write('<html><head><title>Print<\/title>');\n            newWindow.document.write('<\/head><body>');\n            newWindow.document.write(divToPrint);\n            newWindow.document.write('<\/body><\/html>');\n\n            \/\/ \ubb38\uc11c \ub2eb\uae30 \ubc0f \uc778\uc1c4 \uc2e4\ud589\n            newWindow.document.close();\n            newWindow.print();\n        }\n    <\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
\ubc30\uacbd \uc774\ubbf8\uc9c0\uac00 \uc778\uc1c4\ub418\ub3c4\ub85d \ud558\ub824\uba74, \uae30\ubcf8\uc801\uc73c\ub85c \ube0c\ub77c\uc6b0\uc800\uac00 \uc778\uc1c4 \uc2dc \ubc30\uacbd \uc774\ubbf8\uc9c0\ub97c \uc81c\uc678\ud558\ub294 \uc124\uc815\uc774 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc JavaScript\uc640 CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac15\uc81c\ub85c \ubc30\uacbd \uc774\ubbf8\uc9c0\ub97c \uc778\uc1c4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Print Specific Div with Background<\/title>\n    <style>\n        \/* \ubc30\uacbd \uc774\ubbf8\uc9c0\ub97c \ud3ec\ud568\ud55c \uc778\uc1c4 \uc2a4\ud0c0\uc77c *\/\n        #content-to-print {\n            background-image: url('your-background-image-url.jpg');\n            background-size: cover;\n            padding: 20px;\n            color: white;\n        }\n\n        \/* \uc778\uc1c4\ud560 \ub54c \ubc30\uacbd \uc774\ubbf8\uc9c0\ub97c \uc720\uc9c0\ud558\ub3c4\ub85d \uc124\uc815 *\/\n        @media print {\n            #content-to-print {\n                background-image: url('your-background-image-url.jpg') !important;\n                -webkit-print-color-adjust: exact; \/* Chrome, Safari *\/\n                print-color-adjust: exact;         \/* Firefox *\/\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"content-to-print\">\n        <h1>This will be printed with a background image<\/h1>\n        <p>This content is inside the div that will be printed with a background image.<\/p>\n    <\/div>\n\n    <div id=\"content-to-ignore\">\n        <h1>This will not be printed<\/h1>\n        <p>This content is outside the div and will not be printed.<\/p>\n    <\/div>\n\n    <button onclick=\"printDiv()\">Print Specific Div<\/button>\n\n    <script>\n        function printDiv() {\n            \/\/ \uc778\uc1c4\ud560 div \uc694\uc18c\ub97c \uc120\ud0dd\n            var divToPrint = document.getElementById('content-to-print').innerHTML;\n\n            \/\/ \uc0c8\ub85c\uc6b4 \ucc3d \uc5f4\uae30\n            var newWindow = window.open('', '', 'width=800,height=600');\n            \n            \/\/ \uc0c8 \ucc3d\uc5d0 \uc2a4\ud0c0\uc77c \ud3ec\ud568\ud558\uc5ec HTML \uc791\uc131\n            newWindow.document.write('<html><head><title>Print<\/title>');\n            newWindow.document.write('<style>');\n            newWindow.document.write('@media print {');\n            newWindow.document.write('#content-to-print {');\n            \/\/newWindow.document.write('background-image: url(\"your-background-image-url.jpg\") !important;');\n            newWindow.document.write('-webkit-print-color-adjust: exact;');\n            newWindow.document.write('print-color-adjust: exact;');\n            newWindow.document.write('}');\n            newWindow.document.write('}<\/style>');\n            newWindow.document.write('<\/head><body>');\n            newWindow.document.write('<div id=\"content-to-print\">' + divToPrint + '<\/div>');\n            newWindow.document.write('<\/body><\/html>');\n\n            \/\/ \ubb38\uc11c \ub2eb\uae30 \ubc0f \uc778\uc1c4 \uc2e4\ud589\n            newWindow.document.close();\n            newWindow.print();\n        }\n    <\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Overview : \ud504\ub9b0\ud2b8\uc2dc \ubc31\uadf8\ub77c\uc6b4\ub4dc \uceec\ub7ec \ub098\uc624\uac8c \ud558\uae30 \ud504\ub9b0\ud2b8\ud560 \ub54c \ubc30\uacbd\uc0c9 \uc720\uc9c0\ud558\uae30 \ub300\ubd80\ubd84\uc758 \ube0c\ub77c\uc6b0\uc800\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ud504\ub9b0\ud2b8 \uc2dc \ubc30\uacbd\uc0c9\uc744 \ucd9c\ub825\ud558\uc9c0 \uc54a\ub3c4\ub85d \uc124\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574, @media print \uaddc\uce59\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud504\ub9b0\ud2b8\ud560 \ub54c \ubc30\uacbd\uc0c9\uc774 \ucd9c\ub825\ub418\ub3c4\ub85d \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. html + css JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud2b9\uc815 div \uc694\uc18c\ub9cc \uc778\uc1c4\ud558\ub824\uba74, \uc77c\ubc18\uc801\uc778 \uc811\uadfc \ubc29\uc2dd\uc740 \ud574\ub2f9 div\uc758 \ucf58\ud150\uce20\ub97c \uc0c8\ub85c\uc6b4 \ucc3d\uc5d0 \ubcf5\uc0ac\ud558\uace0 \uadf8 \ucc3d\uc5d0\uc11c …
Print backgroud color<\/span> \ub354\ubcf4\uae30<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":5,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}