{"id":189,"date":"2024-07-26T11:40:00","date_gmt":"2024-07-26T02:40:00","guid":{"rendered":"https:\/\/wizardofcode.kr\/?p=189"},"modified":"2024-07-26T09:45:29","modified_gmt":"2024-07-26T00:45:29","slug":"%ea%b3%a0%eb%af%bc-%ed%95%b4%ea%b2%b0-%ec%9b%b9%ec%95%b1-%ea%b0%9c%eb%b0%9c%ed%95%98%ea%b8%b0-php%ec%99%80-javascript%eb%a5%bc-%ed%99%9c%ec%9a%a9%ed%95%9c-%eb%a7%88%eb%b2%95%ec%9d%98-%ec%b1%85","status":"publish","type":"post","link":"https:\/\/wizardofcode.kr\/?p=189","title":{"rendered":"\uace0\ubbfc \ud574\uacb0 \uc6f9\uc571 \uac1c\ubc1c\ud558\uae30: PHP\uc640 JavaScript\ub97c \ud65c\uc6a9\ud55c \ub9c8\ubc95\uc758 \ucc45"},"content":{"rendered":"\n

\uc5ec\ub7ec\ubd84\uc740 \ub9e4\uc77c \uc5b4\ub5a4 \uace0\ubbfc\uc744 \ud558\uace0 \uacc4\uc2e0\uac00\uc694?<\/p>\n\n\n\n

\uc624\ub298 \uc18c\uac1c\ud560 \ud504\ub85c\uadf8\ub7a8\uc740 \uc5ec\ub7ec\ubd84\uc758 \uace0\ubbfc\uc744 \ud574\uacb0\ud574 \uc904 \ub9c8\ubc95\uc758 \ucc45<\/mark><\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

https:\/\/wizardofcode.kr\/wg\/happybook<\/a><\/p>\n\n\n\n

\uc774 \ud504\ub85c\uadf8\ub7a8\uc740 PHP\uc640 JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ub418\uc5c8\uc73c\uba70, \ubc18\uc751\ud615 \ub514\uc790\uc778\uc73c\ub85c \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \uc644\ubcbd\ud558\uac8c \uc791\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

<\/div>\n\n\n\n

\ud504\ub85c\uadf8\ub7a8 \uc18c\uac1c<\/h2>\n\n\n\n

“\ub9c8\ubc95\uc758 \uace0\ubbfc \ud574\uacb0 \ucc45”<\/mark><\/strong>\uc740 \uc0ac\uc6a9\uc790\uac00 \uace0\ubbfc\uc744 \uc0dd\uac01\ud558\uace0 \ucc45\uc744 \uc5f4\uba74, \uadf8 \uace0\ubbfc\uc744 \ud574\uacb0\ud574 \uc904 \ub9cc\ud55c \uba85\uc5b8\uc774\ub098 \uc870\uc5b8\uc744 \uc81c\uacf5\ud558\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc774 \ud504\ub85c\uadf8\ub7a8\uc740 \uac04\ub2e8\ud55c \uc778\ud130\ud398\uc774\uc2a4\uc640 \uc9c1\uad00\uc801\uc778 \uc0ac\uc6a9\ubc95\uc744 \uc81c\uacf5\ud558\uc5ec \ub204\uad6c\ub098 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

<\/div>\n\n\n\n

\uad6c\ub3d9\uc6d0\ub9ac<\/h2>\n\n\n\n
    \n
  1. \uc0ac\uc6a9\uc790\uac00 \uace0\ubbfc\uc744 \uc0dd\uac01<\/mark><\/strong>\ud558\uace0 “\uc5f4\uc5b4\ubcf4\uae30” \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n
  2. “\uc5f4\uc5b4\ubcf4\uae30” \ubc84\ud2bc<\/mark><\/strong>\uc744 \ud074\ub9ad\ud558\uba74 \uc57d 1\ucd08\uc758 \uc0dd\uac01\ud560 \uc2dc\uac04\uc744 \uce74\uc6b4\ud305 \ud6c4\uc5d0 \ucc45\uc774 \uc5f4\ub9ac\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.<\/li>\n\n\n\n
  3. \ucc45\uc774 \uc5f4\ub9ac\uba74 \uace0\ubbfc\uc744 \ud574\uacb0\ud574 \uc904 \ub9cc\ud55c \uba85\uc5b8<\/mark><\/strong>\uc774 \ucc45 \ud398\uc774\uc9c0\uc5d0 \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    \ud575\uc2ec \ucf54\ub4dc \uc124\uba85<\/h2>\n\n\n\n

    HTML \ubd80\ubd84<\/h5>\n\n\n\n

    HTML \uad6c\uc870\ub294 \uac04\ub2e8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    \uccab \ud398\uc774\uc9c0\uc5d0\ub294 \ucc45 \ud45c\uc9c0\uac00 \ud45c\uc2dc\ub418\uace0, \uc0ac\uc6a9\uc790\uac00 \uace0\ubbfc\uc744 \uc0dd\uac01\ud558\ub294\ub370 \ub3c4\uc6c0\uc744 \uc8fc\ub294 \ubb38\uad6c\uc640 “\uc5f4\uc5b4\ubcf4\uae30”<\/mark><\/strong> \ubc84\ud2bc\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <div<\/span> <\/span>class<\/span>=<\/span>"<\/span>book-cover<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>bookCover<\/span>"<\/span>><\/span><\/span>\n    <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>book-cover-content<\/span>"<\/span>><\/span><\/span>\n        <\/span><h1><\/span>Happy Book<\/span><\/h1><\/span><\/span>\n        <\/span><p><\/span>\uad6c\uccb4\uc801\uc774\uace0 \ud589\ub3d9\uacfc \ubaa9\ud45c\uc5d0 \ucd08\uc810\uc744 \ub9de\ucd98 \uace0\ubbfc\uc744 \uc0dd\uac01\ud574\ubcf4\uc138\uc694.<\/span><\/p><\/span><\/span>\n        <\/span><button<\/span> <\/span>id<\/span>=<\/span>"<\/span>openBookBtn<\/span>"<\/span>><\/span>\uc5f4\uc5b4\ubcf4\uae30<\/span><\/button><\/span><\/span>\n    <\/span><\/div><\/span><\/span>\n<\/div><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    css \ubd80\ubd84<\/h5>\n\n\n\n
    CSS\ub294 \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uc801\uc6a9<\/mark><\/strong>\ud558\uc5ec \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \uc798 \ubcf4\uc774\ub3c4\ub85d \ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    \ub610\ud55c, \ucc45\uc774 \uc5f4\ub9ac\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc<\/mark><\/strong>\ub97c \uad6c\ud604\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    .<\/span>book-cover<\/span> <\/span>{<\/span><\/span>\n    <\/span>background<\/span>:<\/span> <\/span>#<\/span>001f3f<\/span>;<\/span><\/span>\n    <\/span>border<\/span>:<\/span> <\/span>2<\/span>px<\/span> <\/span>solid<\/span> <\/span>#<\/span>fff<\/span>;<\/span><\/span>\n    <\/span>padding<\/span>:<\/span> <\/span>20<\/span>px;<\/span><\/span>\n    <\/span>border-radius<\/span>:<\/span> <\/span>10<\/span>px;<\/span><\/span>\n    <\/span>box-shadow<\/span>:<\/span> <\/span>5<\/span>px<\/span> <\/span>5<\/span>px<\/span> <\/span>15<\/span>px<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0.5<\/span>)<\/span>;<\/span><\/span>\n    <\/span>width<\/span>:<\/span> <\/span>300<\/span>px;<\/span><\/span>\n    <\/span>height<\/span>:<\/span> <\/span>400<\/span>px;<\/span><\/span>\n    <\/span>text-align<\/span>:<\/span> <\/span>center;<\/span><\/span>\n    <\/span>transition<\/span>:<\/span> <\/span>transform <\/span>1<\/span>s<\/span>,<\/span> opacity <\/span>1<\/span>s;<\/span><\/span>\n    <\/span>transform-style<\/span>:<\/span> <\/span>preserve-3d;<\/span><\/span>\n    <\/span>position<\/span>:<\/span> <\/span>absolute;<\/span><\/span>\n    <\/span>display<\/span>:<\/span> <\/span>flex;<\/span><\/span>\n    <\/span>justify-content<\/span>:<\/span> <\/span>center;<\/span><\/span>\n    <\/span>align-items<\/span>:<\/span> <\/span>center;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    JavaScript \ubd80\ubd84<\/h5>\n\n\n\n
    JavaScript\ub294 “\uc5f4\uc5b4\ubcf4\uae30” \ubc84\ud2bc \ud074\ub9ad \uc2dc \ucc45\uc774 \uc5f4\ub9ac\ub294 \uc560\ub2c8\uba54\uc774\uc158\uacfc \uba85\uc5b8\uc744 \ubd88\ub7ec\uc624\ub294 \uae30\ub2a5<\/mark><\/strong>\uc744 \ub2f4\ub2f9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>openBookBtn<\/span>'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'<\/span>click<\/span>'<\/span>,<\/span> <\/span>function<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>var<\/span> <\/span>bookCover<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>bookCover<\/span>'<\/span>)<\/span>;<\/span><\/span>\n    <\/span>bookCover<\/span>.<\/span>style<\/span>.<\/span>transform<\/span> <\/span>=<\/span> <\/span>'<\/span>rotateY(-180deg)<\/span>'<\/span>;<\/span><\/span>\n    <\/span>bookCover<\/span>.<\/span>style<\/span>.<\/span>opacity<\/span> <\/span>=<\/span> <\/span>'<\/span>0<\/span>'<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>setTimeout<\/span>(<\/span>function<\/span>()<\/span> <\/span>{<\/span><\/span>\n        <\/span>bookCover<\/span>.<\/span>classList<\/span>.<\/span>add<\/span>(<\/span>'<\/span>hidden<\/span>'<\/span>)<\/span>;<\/span><\/span>\n        <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>modal<\/span>'<\/span>)<\/span>.<\/span>style<\/span>.<\/span>display<\/span> <\/span>=<\/span> <\/span>'<\/span>flex<\/span>'<\/span>;<\/span><\/span>\n<\/span>\n        <\/span>setTimeout<\/span>(<\/span>function<\/span>()<\/span> <\/span>{<\/span><\/span>\n            <\/span>fetch<\/span>(<\/span>'<\/span>get_quote.php<\/span>'<\/span>)<\/span><\/span>\n                <\/span>.<\/span>then<\/span>(<\/span>response<\/span> <\/span>=><\/span> <\/span>response<\/span>.<\/span>text<\/span>())<\/span><\/span>\n                <\/span>.<\/span>then<\/span>(<\/span>data<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n                    <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>modal<\/span>'<\/span>)<\/span>.<\/span>style<\/span>.<\/span>display<\/span> <\/span>=<\/span> <\/span>'<\/span>none<\/span>'<\/span>;<\/span><\/span>\n                    <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>answer<\/span>'<\/span>)<\/span>.<\/span>innerText<\/span> <\/span>=<\/span> <\/span>data<\/span>;<\/span><\/span>\n                    <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>result<\/span>'<\/span>)<\/span>.<\/span>style<\/span>.<\/span>display<\/span> <\/span>=<\/span> <\/span>'<\/span>block<\/span>'<\/span>;<\/span><\/span>\n                    <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>.book-opened<\/span>'<\/span>)<\/span>.<\/span>classList<\/span>.<\/span>add<\/span>(<\/span>'<\/span>show<\/span>'<\/span>)<\/span>;<\/span><\/span>\n                <\/span>}<\/span>)<\/span>;<\/span><\/span>\n        <\/span>},<\/span> <\/span>3000<\/span>)<\/span>;<\/span><\/span>\n    <\/span>},<\/span> <\/span>1000<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    PHP \ubd80\ubd84<\/h5>\n\n\n\n
    PHP\ub294 \uba85\uc5b8 \ubaa9\ub85d\uc5d0\uc11c \ubb34\uc791\uc704\ub85c \ud558\ub098\ub97c \uc120\ud0dd<\/mark><\/strong>\ud558\uc5ec \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    $<\/span>quotes<\/span> <\/span>=<\/span> <\/span>[<\/span><\/span>\n    <\/span>"<\/span>\uace0\ubbfc\uc740 \uc2dc\uac04\ub9cc \ub2a6\ucd9c\ubfd0 \ub2f9\uc7a5 \uc2e4\ud589\ud574\ubcf4\uc790.<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>\uc2dc\uac04\uc740 \uc0c8\uc640 \uac19\ub2e4 \ub0a0\uc544\uac00\uae30 \uc804\uc5d0 \uc7a1\uc544\ub77c.<\/span>"<\/span>,<\/span><\/span>\n    <\/span>\/\/ \ucd94\uac00 \uba85\uc5b8\ub4e4...<\/span><\/span>\n]<\/span>;<\/span><\/span>\n<\/span>\necho<\/span> <\/span>$<\/span>quotes<\/span>[<\/span>array_rand<\/span>(<\/span>$<\/span>quotes<\/span>)]<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    \ub9c8\uce58\uba70<\/h2>\n\n\n\n
    \uc774 \ud504\ub85c\uadf8\ub7a8\uc740 \uac04\ub2e8\ud558\uba74\uc11c\ub3c4 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc5ec\ub7ec\ubd84\uc758 \uac04\ub2e8\ud55c \uace0\ubbfc\uc744 \ud574\uacb0\ud558\ub294 \ub370 \ud070 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc5ec\ub7ec\ubd84\ub3c4 \uc9c1\uc811 \uc774 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uace0, \ub354 \ub098\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud574\ubcf4\uc138\uc694.<\/p>\n","protected":false},"excerpt":{"rendered":"
    \uc5ec\ub7ec\ubd84\uc740 \ub9e4\uc77c \uc5b4\ub5a4 \uace0\ubbfc\uc744 \ud558\uace0 \uacc4\uc2e0\uac00\uc694? \uc624\ub298 \uc18c\uac1c\ud560 \ud504\ub85c\uadf8\ub7a8\uc740 \uc5ec\ub7ec\ubd84\uc758 \uace0\ubbfc\uc744 \ud574\uacb0\ud574 \uc904 \ub9c8\ubc95\uc758 \ucc45\uc785\ub2c8\ub2e4. https:\/\/wizardofcode.kr\/wg\/happybook \uc774 \ud504\ub85c\uadf8\ub7a8\uc740 PHP\uc640 JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uad6c\ud604\ub418\uc5c8\uc73c\uba70, \ubc18\uc751\ud615 \ub514\uc790\uc778\uc73c\ub85c \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \uc644\ubcbd\ud558\uac8c \uc791\ub3d9\ud569\ub2c8\ub2e4. \ud504\ub85c\uadf8\ub7a8 \uc18c\uac1c “\ub9c8\ubc95\uc758 \uace0\ubbfc \ud574\uacb0 \ucc45”\uc740 \uc0ac\uc6a9\uc790\uac00 \uace0\ubbfc\uc744 \uc0dd\uac01\ud558\uace0 \ucc45\uc744 \uc5f4\uba74, \uadf8 \uace0\ubbfc\uc744 \ud574\uacb0\ud574 \uc904 \ub9cc\ud55c \uba85\uc5b8\uc774\ub098 \uc870\uc5b8\uc744 \uc81c\uacf5\ud558\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4. \uc774 \ud504\ub85c\uadf8\ub7a8\uc740 \uac04\ub2e8\ud55c \uc778\ud130\ud398\uc774\uc2a4\uc640 \uc9c1\uad00\uc801\uc778 \uc0ac\uc6a9\ubc95\uc744 \uc81c\uacf5\ud558\uc5ec […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[16,22,27,26],"class_list":["post-189","post","type-post","status-publish","format-standard","hentry","category-webprogram","tag-javscript","tag-php","tag-27","tag-26"],"_links":{"self":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/posts\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=189"}],"version-history":[{"count":5,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/posts\/189\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}