{"id":952,"date":"2024-08-17T14:56:17","date_gmt":"2024-08-17T05:56:17","guid":{"rendered":"https:\/\/youngrihan.com\/?p=952"},"modified":"2024-08-19T16:24:59","modified_gmt":"2024-08-19T07:24:59","slug":"javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80","status":"publish","type":"post","link":"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/","title":{"rendered":"Javascript \ub780 \ubb34\uc5c7\uc778\uac00"},"content":{"rendered":"\n<p>JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \ud544\uc218\uc801\uc778 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub85c, HTML\uacfc CSS\uc640 \ud568\uaed8 \uc6f9 \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud558\ub294 \ud575\uc2ec \uae30\uc220 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. JavaScript\ub294 \uc8fc\ub85c \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ub3d9\uc801\uc778 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\uba70, \uc6f9 \uac1c\ubc1c \uc678\uc5d0\ub3c4 \uc11c\ubc84, \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158, \uac8c\uc784 \uac1c\ubc1c \ub4f1 \ub2e4\uc591\ud55c \ubd84\uc57c\uc5d0\uc11c \ud65c\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_68_1 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >\uae00 \ubaa9\ucc28<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/#JavaScript%EC%9D%98_%ED%8A%B9%EC%A7%95\" title=\"JavaScript\uc758 \ud2b9\uc9d5\">JavaScript\uc758 \ud2b9\uc9d5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/#JavaScript%EC%9D%98_%EC%82%AC%EC%9A%A9_%EC%98%88\" title=\"JavaScript\uc758 \uc0ac\uc6a9 \uc608\">JavaScript\uc758 \uc0ac\uc6a9 \uc608<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/#JavaScript%EC%99%80_DOM\" title=\"JavaScript\uc640 DOM\">JavaScript\uc640 DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/#JavaScript%EC%9D%98_%EB%B0%9C%EC%A0%84\" title=\"JavaScript\uc758 \ubc1c\uc804\">JavaScript\uc758 \ubc1c\uc804<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/#JavaScript_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EC%99%80_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC\" title=\"JavaScript \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac\">JavaScript \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/#%EA%B2%B0%EB%A1%A0\" title=\"\uacb0\ub860\">\uacb0\ub860<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript%EC%9D%98_%ED%8A%B9%EC%A7%95\"><\/span>JavaScript\uc758 \ud2b9\uc9d5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\ub3d9\uc801<\/strong>: JavaScript\ub294 \uc0ac\uc6a9\uc790\uc758 \ub3d9\uc791\uc5d0 \ubc18\uc751\ud558\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4. \ud074\ub9ad, \uc785\ub825, \uc2a4\ud06c\ub864 \uac19\uc740 \uc0ac\uc6a9\uc790 \uc774\ubca4\ud2b8\uc5d0 \ub530\ub77c \ud398\uc774\uc9c0\uc758 \ub0b4\uc6a9\uc774\ub098 \uc2a4\ud0c0\uc77c\uc744 \uc2e4\uc2dc\uac04\uc73c\ub85c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc \uc2e4\ud589<\/strong>: JavaScript\ub294 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\ud589\ub418\ubbc0\ub85c \uc11c\ubc84\uc640\uc758 \ud1b5\uc2e0 \uc5c6\uc774\ub3c4 \uc989\uac01\uc801\uc778 \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uac1d\uccb4 \uc9c0\ud5a5 \uc5b8\uc5b4<\/strong>: JavaScript\ub294 \uac1d\uccb4\ub97c \uae30\ubc18\uc73c\ub85c \ub3d9\uc791\ud558\uba70, \uac1d\uccb4\uc758 \uc18d\uc131\uacfc \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574 \ubcf5\uc7a1\ud55c \ub3d9\uc791\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uba40\ud2f0 \ud328\ub7ec\ub2e4\uc784<\/strong>: JavaScript\ub294 \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d, \uac1d\uccb4 \uc9c0\ud5a5 \ud504\ub85c\uadf8\ub798\ubc0d, \uc774\ubca4\ud2b8 \uae30\ubc18 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \ubaa8\ub450 \uc9c0\uc6d0\ud558\ub294 \uc720\uc5f0\ud55c \uc5b8\uc5b4\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uacbd\ub7c9\uc131<\/strong>: \ub2e4\ub978 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0 \ube44\ud574 \ube44\uad50\uc801 \uac00\ubccd\uace0 \uac04\uacb0\ud558\uba70, \ucd08\ubcf4\uc790\ub3c4 \ube44\uad50\uc801 \uc27d\uac8c \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript%EC%9D%98_%EC%82%AC%EC%9A%A9_%EC%98%88\"><\/span>JavaScript\uc758 \uc0ac\uc6a9 \uc608<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\ud3fc \uc720\ud6a8\uc131 \uac80\uc0ac<\/strong>: \uc0ac\uc6a9\uc790\uac00 \uc6f9 \ud398\uc774\uc9c0\uc758 \ud3fc\uc5d0 \ub370\uc774\ud130\ub97c \uc785\ub825\ud588\uc744 \ub54c, \uc11c\ubc84\ub85c \uc804\uc1a1\ud558\uae30 \uc804\uc5d0 JavaScript\ub85c \uc785\ub825\ub41c \ub370\uc774\ud130\uc758 \uc720\ud6a8\uc131\uc744 \uac80\uc0ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;form onsubmit=&quot;return validateForm()&quot;&gt;\n    &lt;input type=&quot;text&quot; id=&quot;name&quot; placeholder=&quot;\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694&quot;&gt;\n    &lt;input type=&quot;submit&quot; value=&quot;\uc81c\ucd9c&quot;&gt;\n&lt;\/form&gt;\n\n&lt;script&gt;\n    function validateForm() {\n        const name = document.getElementById(&quot;name&quot;).value;\n        if (name == &quot;&quot;) {\n            alert(&quot;\uc774\ub984\uc744 \uc785\ub825\ud574\uc57c \ud569\ub2c8\ub2e4!&quot;);\n            return false;\n        }\n        return true;\n    }\n&lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;form<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">onsubmit<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">return validateForm()<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">name<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">placeholder<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">submit<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\uc81c\ucd9c<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/form&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    function validateForm() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">name<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">name<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">name<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">==<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">alert<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\uc774\ub984\uc744 \uc785\ub825\ud574\uc57c \ud569\ub2c8\ub2e4!<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            return false;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">true<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>2. <strong>\ub3d9\uc801\uc778 \ucf58\ud150\uce20 \uc5c5\ub370\uc774\ud2b8<\/strong>: JavaScript\ub97c \uc0ac\uc6a9\ud558\uba74 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c \uace0\uce68\ud558\uc9c0 \uc54a\uace0\ub3c4 HTML \uc694\uc18c\uc758 \ub0b4\uc6a9\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;button onclick=&quot;changeText()&quot;&gt;\ud074\ub9ad\ud558\uc138\uc694&lt;\/button&gt;\n&lt;p id=&quot;text&quot;&gt;\uc5ec\uae30\uac00 \ubc14\ub014 \ub0b4\uc6a9\uc785\ub2c8\ub2e4.&lt;\/p&gt;\n\n&lt;script&gt;\n    function changeText() {\n        document.getElementById(&quot;text&quot;).innerHTML = &quot;\uc774\uc81c \ub0b4\uc6a9\uc774 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4!&quot;;\n    }\n&lt;\/script&gt;\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">onclick<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">changeText()<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub9ad\ud558\uc138\uc694<\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;p<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\uc5ec\uae30\uac00 \ubc14\ub014 \ub0b4\uc6a9\uc785\ub2c8\ub2e4.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    function changeText() <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\uc774\uc81c \ub0b4\uc6a9\uc774 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4!<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>3. <strong>\ube44\ub3d9\uae30 \ud1b5\uc2e0(AJAX)<\/strong>: \uc11c\ubc84\uc640 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \ud1b5\uc2e0\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uc5ec, \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c \uace0\uce68\ud558\uc9c0 \uc54a\uace0\ub3c4 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript%EC%99%80_DOM\"><\/span>JavaScript\uc640 DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript\ub294 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870\ub97c \ub098\ud0c0\ub0b4\ub294 **DOM(Document Object Model)**\uacfc \uc0c1\ud638\uc791\uc6a9\ud558\uc5ec HTML \uc694\uc18c\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 JavaScript\ub294 \ud398\uc774\uc9c0\uc758 \ucf58\ud150\uce20\ub098 \uc2a4\ud0c0\uc77c\uc744 \uc870\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>document.getElementById()<\/code>: \ud2b9\uc815 ID\ub97c \uac00\uc9c4 \uc694\uc18c\ub97c \uc120\ud0dd\ud558\ub294 \ud568\uc218.<\/li>\n\n\n\n<li><code>innerHTML<\/code>: \uc120\ud0dd\ud55c \uc694\uc18c\uc758 \ub0b4\uc6a9\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \uc18d\uc131.<\/li>\n\n\n\n<li><code>addEventListener()<\/code>: \uc774\ubca4\ud2b8\ub97c \uac10\uc9c0\ud558\uace0 \ud574\ub2f9 \uc774\ubca4\ud2b8\uc5d0 \ubc18\uc751\ud558\ub294 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\ub294 \uba54\uc11c\ub4dc.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript%EC%9D%98_%EB%B0%9C%EC%A0%84\"><\/span>JavaScript\uc758 \ubc1c\uc804<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript\ub294 \uc2dc\uac04\uc774 \uc9c0\ub098\uba74\uc11c \ub354\uc6b1 \uac15\ub825\ud55c \uae30\ub2a5\ub4e4\uc744 \uc9c0\uc6d0\ud558\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 ES6(ECMAScript 2015) \uc774\ud6c4 \ub9ce\uc740 \uae30\ub2a5 \uac1c\uc120\uacfc \ubb38\ubc95 \uac1c\uc120\uc774 \uc774\ub8e8\uc5b4\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>let\uacfc const<\/strong>: \ubcc0\uc218\ub97c \uc120\uc5b8\ud560 \ub54c <code>var<\/code> \ub300\uc2e0 <code>let<\/code>\uacfc <code>const<\/code>\uac00 \ub3c4\uc785\ub418\uc5b4 \ubcc0\uc218\uc758 \uc720\ud6a8 \ubc94\uc704(scope)\ub97c \ub354 \uba85\ud655\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ud654\uc0b4\ud45c \ud568\uc218<\/strong>: \uac04\uacb0\ud55c \ud568\uc218 \ud45c\ud604\uc2dd\uc73c\ub85c \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc600\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4<\/strong>: \ubb38\uc790\uc5f4 \ub0b4\uc5d0 \ubcc0\uc218\ub098 \ud45c\ud604\uc2dd\uc744 \uc0bd\uc785\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EC%99%80_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC\"><\/span>JavaScript \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript\ub294 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \uacb0\ud569\ud558\uc5ec \ub354 \ubcf5\uc7a1\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React<\/strong>: \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uac1c\ubc1c \ubc29\uc2dd\uc744 \ucc44\ud0dd\ud574 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c UI \uc694\uc18c\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Vue.js<\/strong>: \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ube44\uad50\uc801 \uac04\uacb0\ud558\uace0 \ubc30\uc6b0\uae30 \uc26c\uc6b4 \uad6c\uc870\ub85c \uc778\uae30\ub97c \ub04c\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Node.js<\/strong>: \uc11c\ubc84 \uce21 JavaScript \uc2e4\ud589 \ud658\uacbd\uc73c\ub85c, JavaScript\ub97c \uc0ac\uc6a9\ud574 \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc774 \uac00\ub2a5\ud558\uac8c \ub9cc\ub4e4\uc5b4\uc90d\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EA%B2%B0%EB%A1%A0\"><\/span>\uacb0\ub860<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\uba70, \ub2e8\uc21c\ud55c \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ub3d9\uc801 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \uac83\ubd80\ud130 \ub300\uaddc\ubaa8 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uae4c\uc9c0 \ub2e4\uc591\ud55c \ubaa9\uc801\uc73c\ub85c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ud2b9\ud788 \uc6f9 \uac1c\ubc1c\uc758 \uae30\ubcf8 \uc694\uc18c\uc778 HTML, CSS\uc640 \ud568\uaed8 \ud559\uc2b5\ud560 \uacbd\uc6b0, JavaScript\ub294 \uc6f9\uc744 \ub354\uc6b1 \uc0dd\ub3d9\uac10 \uc788\uac8c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uac00 \ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \ud544\uc218\uc801\uc778 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub85c, HTML\uacfc CSS\uc640 \ud568\uaed8 \uc6f9 \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud558\ub294 \ud575\uc2ec \uae30\uc220 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. JavaScript\ub294 \uc8fc\ub85c \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ub3d9\uc801\uc778 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\uba70, \uc6f9 \uac1c\ubc1c \uc678\uc5d0\ub3c4 \uc11c\ubc84, \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158, \uac8c\uc784 \uac1c\ubc1c \ub4f1 \ub2e4\uc591\ud55c \ubd84\uc57c\uc5d0\uc11c \ud65c\uc6a9\ub429\ub2c8\ub2e4. JavaScript\uc758 \ud2b9\uc9d5 JavaScript\uc758 \uc0ac\uc6a9 \uc608 2. \ub3d9\uc801\uc778 \ucf58\ud150\uce20 \uc5c5\ub370\uc774\ud2b8: JavaScript\ub97c \uc0ac\uc6a9\ud558\uba74 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c \uace0\uce68\ud558\uc9c0 \uc54a\uace0\ub3c4 HTML \uc694\uc18c\uc758 \ub0b4\uc6a9\uc744&hellip;&nbsp;<a href=\"https:\/\/youngrihan.com\/javascript-%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b8%ea%b0%80\/\" class=\"\" rel=\"bookmark\">\ub354 \ubcf4\uae30 &raquo;<span class=\"screen-reader-text\">Javascript \ub780 \ubb34\uc5c7\uc778\uac00<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[130],"tags":[133,134],"class_list":["post-952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-javascript-"],"_links":{"self":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts\/952"}],"collection":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/comments?post=952"}],"version-history":[{"count":2,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts\/952\/revisions"}],"predecessor-version":[{"id":1089,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts\/952\/revisions\/1089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/media\/953"}],"wp:attachment":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/media?parent=952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/categories?post=952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/tags?post=952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}