{"id":359,"date":"2026-06-26T13:34:50","date_gmt":"2026-06-26T13:34:50","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=359"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"%ec%8b%9c%ec%9e%91-2","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=359","title":{"rendered":"\uc2dc\uc791"},"content":{"rendered":"<p><a href=\"http:\/\/qwerewqwerew.github.io\/source\/js\/1\/ppt\/1-role\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac1c\uc694<\/a><\/p>\n<h2>1. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc5ed\ud560<\/h2>\n<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc6f9\uc758 \ucd08\ucc3d\uae30 \uc2dc\uc808\ubd80\ud130 \uc9c0\uae08\uae4c\uc9c0 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uafb8\uc900\ud788 \uc0ac\uc6a9\ud574\uc628 \uc5b8\uc5b4\uc774\ub2e4. \ub610\ud55c \uacc4\uc18d \ubc1c\uc804\ud558\uace0 \uc788\ub2e4.<br \/>\n<a href=\"https:\/\/www.ecma-international.org\/\">ECMA script \uacf5\uc2dd\uc0ac\uc774\ud2b8<\/a><br \/>\n<a href=\"https:\/\/ko.javascript.info\/\">\ubaa8\ub358\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud29c\ud1a0\ub9ac\uc5bc<\/a><br \/>\n<a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\">MDN JS tutorial<\/a><\/p>\n<h3>1.1. \uc6f9\uc758 \uc694\uc18c \uc81c\uc5b4<\/h3>\n<ul>\n<li>html\uc740 \ub0b4\uc6a9\uc744 \uad6c\uc131\ud55c\ub2e4<\/li>\n<li>css \ub294 \ub514\uc790\uc778\uc744 \uc9c0\uc815\ud55c\ub2e4.<\/li>\n<li>js\ub294 \uc694\uc18c\ub97c \uc6c0\uc9c1\uc774\uac70\ub098 \ub370\uc774\ud130\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud55c\ub2e4.<\/li>\n<\/ul>\n<h3>1.2. \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc81c\uc791<\/h3>\n<p>\uacfc\uac70\uc758 \uc6f9\uc774 \ub2e8\uc21c\ud55c \uc815\ubcf4 \uc81c\uacf5\uc774 \ubaa9\uc801\uc774\uc5c8\ub2e4\uba74 \uadfc\ub300\uc758 \uc6f9\uc740 \uc0ac\uc6a9\uc790\uc640\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ud558\uba70 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucc98\ub7fc \ub3d9\uc791\ud558\uace0 \uc788\ub2e4.<br \/>\n\uc6f9 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc5d0\uc11c \ubb38\uc11c\uc791\uc131\uc774\ub098 \uadf8\ub9bc\uc744 \uadf8\ub9b4\uc218 \uc788\uc73c\uba70 \uac8c\uc784\ub3c4 \ud560\uc218 \uc788\ub2e4.<br \/>\n\ub0af\uc120 \uacf3\uc744 \ucc3e\uc544 \uac08\ub54c \uac80\uc0c9\ud558\ub294 \uc628\ub77c\uc778 \uc9c0\ub3c4\uc758 \uae38 \ucc3e\uae30 \uc11c\ube44\uc2a4\ub3c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uadf8\uc778 \uc778\uc99d \uc11c\ube44\uc2a4\ub3c4 \ubaa8\ub450 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uad6c\ud604\ud55c\ub2e4.<\/p>\n<h3>1.3. \ub2e4\uc591\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc0ac\uc6a9<\/h3>\n<p>\uc6f9 \ud50c\ub7ab\ud3fc \uc911\uc2ec\uc758 \uc11c\ube44\uc2a4\uac00 \ub298\uc5b4\ub098\uba74\uc11c \uc0b0\uc5c5\uc774 \ubc1c\uc804\ud568\uc5d0 \ub530\ub77c \uacfc\uac70\uc5d0\ub294 \uc11c\ubc84\uc5d0\uc11c \ud588\ub358 \uc77c\ub4e4\uc744 \uc774\uc81c\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc5d0\uc11c\ub3c4 \ud560\uc218 \uc788\uac8c \ub418\uc5c8\ub2e4.<br \/>\n\ub9ac\uc561\ud2b8, \uc575\uade4\ub7ec, \ubdf0, \uc81c\uc774\ucffc\ub9ac\ub4f1 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc2dc \uc0ac\uc6a9\ud560\uc218 \uc788\ub294 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\/\ub77c\uc774\ube0c\ub7ec\ub9ac \ub4e4\uc774 \uc788\ub2e4.<\/p>\n<h3>1.4. \uc11c\ubc84\uac1c\ubc1c<\/h3>\n<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\uc790 \ucef4\ud4e8\ud130\uc5d0\uc11c \ub3d9\uc791\ud558\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc804\uc6a9 \ud504\ub85c\uadf8\ub7a8 \uc774\uc5c8\uc73c\ub098 \uad6c\uae00\uc5d0\uc11c \uac1c\ubc1c\ud55c Nodejs\uc758 \ucd9c\uc2dc\ub85c \uc11c\ubc84\ud504\ub85c\uadf8\ub7a8\uc758 \uc81c\uc791\uc774 \uac00\ub2a5\ud558\uac8c \ub418\uc5c8\ub2e4.<br \/>\n\uc608\uc804 \ubc31\uc564\ub4dc \uac1c\ubc1c\uc2dc PHP, java, \ub2f7\ub137\uc744 \uc0ac\uc6a9\ud558\uc600\uc73c\ub098 \uc694\uc998\uc740 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub9cc\uc73c\ub85c\ub3c4 \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc774 \uac00\ub2a5\ud558\ub2e4.<br \/>\n\uc774\uc5d0 \ub530\ub77c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ub354\uc6b1 \uac1c\ubc1c \uc0dd\ud0dc\uacc4\uc5d0\uc11c \uac15\ub825\ud55c \uc5b8\uc5b4\uac00 \ub418\uc5c8\ub2e4.<br \/>\n\ud504\ub7f0\ud2b8\uc640 \ubc31\uc5d4\ub4dc\ub97c \ubaa8\ub450 \uac1c\ubc1c\ud560\uc218 \uc788\ub294 \uc0ac\ub78c\uc744 \ud480\uc2a4\ud0dd \uac1c\ubc1c\uc790\ub77c\uace0 \ud55c\ub2e4.<\/p>\n<hr>\n<h2>2. \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc0bd\uc785\ud558\uae30<\/h2>\n<p>\uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc18c\uc2a4\ub97c \uc77d\uace0 \ucc98\ub9ac\ud558\ub294 \ud574\uc11d\uae30 (JavaScript Interpreter) \uac00 \uc788\ub2e4.<br \/>\n\ub530\ub77c\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc18c\uc2a4\ub294 \uc6f9\ubb38\uc11c\uc5d0 script \ud0dc\uadf8\ub97c \uc774\uc6a9\ud574\uc11c \uc791\uc131\ud560\uc218 \uc788\ub2e4.<\/p>\n<h3>2.1. \ub0b4\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc0ac\uc6a9\ud558\uae30<\/h3>\n<p>\uc18c\uc2a4\ucf54\ub4dc\uac00 \uc9e7\uc744 \uacbd\uc6b0 \uac04\ub2e8\ud788 \uc791\uc131\ud788 \uc6a9\uc774.<br \/>\n\uc704\uce58\ub294 \uc6f9\ubb38\uc11c \uc5b4\ub514\ub4e0 \uc0c1\uad00\uc5c6\uc73c\uba70 \uc0bd\uc785\ub41c \uc704\uce58 \uadf8\uc790\ub9ac\uc5d0\uc11c \ubc14\ub85c \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc2e4\ud589\ub41c\ub2e4.<br \/>\n<code>&lt;script&gt;<\/code>\ub294 \ud558\ub098\uc758 \ubb38\uc11c\uc5d0 \uc5ec\ub7ec\uac1c \uc0ac\uc6a9\ud560\uc218 \uc788\ub2e4.<br \/>\n\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc6f9\ubb38\uc11c\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub098 \ud14d\uc2a4\ud2b8 \ub4f1\uc758 \uc694\uc18c\ub97c \uc81c\uc5b4\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\uc73c\ubbc0\ub85c \ud574\ub2f9 \uc694\uc18c\ub4e4\uc744 \ubaa8\ub450 \ud45c\uc2dc\ud6c4 \uc2e4\ud589\ud558\ub294 \uac83\uc774 \uc88b\ub2e4. \uadf8\ub798\uc11c <strong><code>&lt;\/body&gt;<\/code><\/strong><strong> \uc9c1\uc804\uc5d0 \ucd94\uac00<\/strong> \ud55c\ub2e4.<br \/>\n<strong>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ub300\uc18c\ubb38\uc790\ub97c \uad6c\ubcc4\ud55c\ub2e4. \uc791\uc131\uc2dc \ub300\uc18c\ubb38\uc790\ub97c \uc8fc\uc758\ud558\uc790<\/strong><\/p>\n<hr>\n<p><strong>\ub0b4\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc0ac\uc6a9\ud558\uae30<\/strong><br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/1\/1\/script\/script-1.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;\uae00\uc790\uc0c9 \ubc14\uafb8\uae30&lt;\/title&gt;\n    &lt;style&gt;\n      body { text-align:center; }\n      #heading { color:blue; }\n      #text {\n         color:gray;\n         font-size:15px;\n         }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1 id=&quot;heading&quot;&gt;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8&lt;\/h1&gt;\n    &lt;p id=&quot;text&quot;&gt;\uc704 \ud14d\uc2a4\ud2b8\ub97c \ud074\ub9ad\ud574 \ubcf4\uc138\uc694&lt;\/p&gt;\n    &lt;script&gt;\n      var heading = document.querySelector(&#39;#heading&#39;);\n      heading.onclick = function() {\n      heading.style.color = &quot;red&quot;;\n      }\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc81c\ucc98\ub7fc \ubb38\uc11c \ub0b4\ubd80\uc5d0 \uc791\uc131\uc2dc \uc791\uc131\uc740 \ud3b8\ud558\ub098 \uc218\uc815\ud560\ub54c \ud544\uc694\ud55c \ucf54\ub4dc\ub97c \ucc3e\uc544\ubcf4\uae30 \uc5b4\ub835\ub2e4.<\/p>\n<hr>\n<h3>2.2. \uc678\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc0ac\uc6a9\ud558\uae30<\/h3>\n<p><strong>\uc678\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc0ac\uc6a9\ud558\uae30<\/strong><br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/1\/1\/script\/script-2.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;\uae00\uc790\uc0c9 \ubc14\uafb8\uae30&lt;\/title&gt;\n    &lt;style&gt;\n      body { text-align:center; }\n      #heading { color:blue; }\n      #text {\n         color:gray;         font-size:15px;      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1 id=&quot;heading&quot;&gt;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8&lt;\/h1&gt;\n    &lt;p id=&quot;text&quot;&gt;\uc704 \ud14d\uc2a4\ud2b8\ub97c \ud074\ub9ad\ud574 \ubcf4\uc138\uc694&lt;\/p&gt;\n    &lt;script src=&quot;js\/change-color.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h2>3. \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ud574\uc11d\ud558\ub294 \uacfc\uc815<\/h2>\n<p>\uc6f9\ubb38\uc11c\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\uac00 \ud3ec\ud568 \ub418\uc5b4\uc788\uc73c\uba74 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub294 \uc5b4\ub5a4\uacfc\uc815\uc73c\ub85c \ud574\uc11d\ud558\uac8c \ub418\ub294\uc9c0 \uc54c\uc544\ubcf4\uc790<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-25.png\" alt=\"\"><\/p>\n<ol>\n<li>\uc6f9\ube0c\ub77c\uc6b0\uc800\ub294 <code>&lt;!DOCTYPE html&gt;<\/code> \uc744 \ubcf4\uace0 \ubb38\uc11c\uac00 \uc6f9\ubb38\uc11c\ub77c\ub294\uac83\uc744 \uc54c\uac8c \ub41c\ub2e4.<br \/>\n\uadf8\ub9ac\uace0 <code>&lt;html&gt;<\/code>\ud0dc\uadf8 \uc0ac\uc774\uc758 \ub0b4\uc6a9\uc744 html \ud45c\uc900\uc5d0 \ub9de\ucdb0 \uc77d\uae30 \uc2dc\uc791\ud55c\ub2e4<\/li>\n<li><code>&lt;html lang=&quot;ko&quot;&gt;<\/code> html \ud0dc\uadf8\uc758 \uc21c\uc11c\uc640 \ud3ec\ud568 \uad00\uacc4\ub97c \ud655\uc778\ud55c\ub2e4.<br \/>\nhead \ud0dc\uadf8\uc640 body \ud0dc\uadf8 \uc0ac\uc774\uc5d0 \ub9c8\ud06c\uc5c5 \ub418\uc5b4\uc788\ub294 \uc694\uc18c\ub97c \ud655\uc778\ud558\uba70 \ud0dc\uadf8\uac04\uc758 \uad00\uacc4\ub97c \ubd84\uc11d\ud55c\ub2e4.<\/li>\n<li>\ud0dc\uadf8\uc758 \ubd84\uc11d\uc774 \ub05d\ub098\uba74 <code>&lt;style&gt;<\/code> \ud0dc\uadf8\uc758 \uc815\ubcf4\ub97c \ubd84\uc11d\ud55c\ub2e4.<\/li>\n<li><code>&lt;script&gt;<\/code> \ud0dc\uadf8\ub97c \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ub0b4\uc7a5\ub41c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud574\uc11d\uae30\ub85c \ub118\uae34\ub2e4.<br \/>\n\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud574\uc11d\uae30\uc5d0\uc11c\ub294 <code>&lt;script&gt;<\/code> \uc0ac\uc774\uc758 \uc18c\uc2a4\ub97c \ud574\uc11d<\/li>\n<li>2\uc5d0\uc11c \ubd84\uc11d\ud55c html \uc640 3\uc5d0\uc11c \ubd84\uc11d\ud55c css \uc815\ubcf4\ub97c \uc6f9 \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc5d0 \ud45c\uc2dc<\/li>\n<li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud14d\uc2a4\ud2b8 \ud074\ub9ad\uc2dc \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud574\uc11d\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc2e4\ud589\uacb0\uacfc\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud568<\/li>\n<\/ol>\n<hr>\n<h2>4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uae30\ubcf8 \uc6a9\uc5b4<\/h2>\n<p><a href=\"https:\/\/docs.google.com\/presentation\/d\/14o3F4wCBh3VRgrh15XN4JmQcYRF_iqdZHoSKT8-BFc8\/edit#slide=id.g256542224c6_0_0\">\uc124\uba85PPT<\/a><br \/>\n\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uba85\ub839\uc5b4\ub294 <strong>\uc2dd(expression)<\/strong>\uacfc <strong>\ubb38 (statement)<\/strong> \uc73c\ub85c \ub098\ub25c\ub2e4.<\/p>\n<hr>\n<p><strong>\uc2dd\uc774\ub780<\/strong><\/p>\n<ul>\n<li>\uac12\uc744 \ub9cc\ub4e4\uc5b4 \ub0bc\uc218 \uc788\ub294 \ubaa8\ub4e0\uac83<\/li>\n<li>\ubcc0\uc218\uc5d0 \uc800\uc7a5\uc774 \uac00\ub2a5\ud568<\/li>\n<\/ul>\n<hr>\n<p><strong>\ubb38\uc774\ub780<\/strong><\/p>\n<ul>\n<li>\uc2e4\ud589\uac00\ub2a5\ud55c \ucd5c\uc18c \uba85\ub839\ub2e8\uc704\ub85c \ud558\ub098 \uc774\uc0c1\uc758 \uc2dd\uc774 \ubaa8\uc5ec \ubb38\uc744 \uad6c\uc131\ud55c\ub2e4.<\/li>\n<li>\uba85\ub839\ub05d\uc5d0 ; \ub97c \ubd99\uc778\ub2e4.<\/li>\n<li>\uc870\uac74\ubb38, \uc81c\uc5b4\ubb38\u2026<\/li>\n<\/ul>\n<hr>\n<p>\ub113\uc740 \uc758\ubbf8\uc5d0\uc11c \u2019\ubb38\u2019\uc740 \uac12\uc774\ub098 \uc2dd\uc744 \ud3ec\ud568\ud55c\ub2e4<br \/>\n\ubb38\uc7a5\uc774 \ubaa8\uc774\uba74 \ud504\ub85c\uadf8\ub7a8\uc774 \ub41c\ub2e4.<\/p>\n<hr>\n<p>\ud06c\ub86c \uc6f9\ube0c\ub77c\uc6b0\uc800\ub97c \uc2e4\ud589\ud558\uc5ec \ucf58\uc194\ud0ed <code>ctrl+shift+i<\/code> \uc744 \uc5f0\ub2e4.<br \/>\n\ucf58\uc194\ud0ed\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcf4\uc790.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/02-19.png\" alt=\"\"><\/p>\n<h3>4-1-\uc2dd \uc791\uc131<\/h3>\n<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc2dd \uc791\uc131\ud558\uae30<\/p>\n<pre><code class=\"language-javascript\">inch * 2.54; \/\/\uc5f0\uc0b0\uc2dd\n&#39;\uc548\ub155\ud558\uc138\uc694&#39;; \/\/\ubb38\uc790\uc5f4\n5; \/\/\uc22b\uc790\n<\/code><\/pre>\n<h3>4-1-\ubb38 \uc791\uc131<\/h3>\n<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ubb38 \uc791\uc131\ud558\uae30<\/p>\n<pre><code class=\"language-javascript\">let inch = prompt(&quot;\uc22b\uc790\ub97c \uc785\ub825\ud558\uc138\uc694&quot;);\nlet size = inch * 2.54;\nconsole.log(size);\n<\/code><\/pre>\n<hr>\n<h2>5. \uc785\ucd9c\ub825\ud558\uae30<\/h2>\n<h3>5.1. alert()<\/h3>\n<blockquote>\n<p>\uc0ac\uc6a9\uc790\uc5d0\uac8c \uc54c\ub9bc\uba54\uc2dc\uc9c0\ub97c \ub744\uc6b0\ub294 \ud568\uc218<\/p>\n<\/blockquote>\n<p><code>alert(\uba54\uc2dc\uc9c0)<\/code><br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/1\/1\/script\/alert.html\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;alert\ubb38&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script&gt;\n      alert(&#39;\uc548\ub155\ud558\uc138\uc694?&#39;);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>5.2. confirm()<\/h3>\n<p>\uc0ac\uc6a9\uc790\uc5d0\uac8c \ud655\uc778\uc774\ub098 \ucde8\uc18c\uc758 \uc758\uc0ac\uacb0\uc815\uc744 \uc804\ub2ec\ubc1b\uc744\uc218 \uc788\ub294 \ud568\uc218<br \/>\n<code>conform(\uba54\uc2dc\uc9c0)<\/code><br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/1\/1\/script\/\">\uc2e4\ud589\ud654\uba74<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;confirm&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script&gt;\n      var reply = confirm(&#39;\uc815\ub9d0 \ubc30\uacbd \uc774\ubbf8\uc9c0\ub97c \ubc14\uafb8\uaca0\uc2b5\ub2c8\uae4c?&#39;);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>5.3. prompt()<\/h3>\n<p>\uc0ac\uc6a9\uc790\uc5d0\uac8c \ud14d\uc2a4\ud2b8\ud615\ud0dc\uc758 \ub370\uc774\ud130\ub97c \uc785\ub825\ubc1b\uc744\uc218 \uc788\ub294 \ud568\uc218<br \/>\n<code>prompt(\uba54\uc2dc\uc9c0)<\/code> \ub610\ub294 <code>prompt(\uba54\uc2dc\uc9c0,\uae30\ubcf8\uac12)<\/code><br \/>\n<a href=\".\/script\/prompt-1.html\">06<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;prompt&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script&gt;\n      var name = prompt(&#39;\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694.&#39;, &#39;\uc544\ubb34\uac1c&#39;);            var name = prompt(&#39;\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694.&#39;);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>5.4. document.write()<\/h3>\n<p>document (\uc6f9\ubb38\uc11c).write(\uc4f0\ub2e4)\uba85\ub839\ubb38<br \/>\n<a href=\".\/script\/document-write.html\">07<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;document.write&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script&gt;\n      document.write(&#39;&lt;h1&gt;\uc548\ub155\ud558\uc138\uc694&lt;\/h1&gt;&#39;);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<p><a href=\".\/script\/greeting.html\">08<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Welcome&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;\uc5b4\uc11c\uc624\uc138\uc694&lt;\/h1&gt;\n    &lt;script&gt;\n      var name = prompt(&#39;\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694.&#39;);   \n      document.write(&#39;&lt;b&gt;&lt;big&gt;&#39; + name + &#39;&lt;\/big&gt;&lt;\/b&gt;\ub2d8, \ud658\uc601\ud569\ub2c8\ub2e4.&#39;);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>4.5. console.log()<\/h3>\n<p><code>console.log()<\/code><br \/>\n\uad04\ud638\uc548\uc758 \ub0b4\uc6a9\uc744 \ucf58\uc194 \ucc3d\uc5d0 \ud45c\uc2dc<br \/>\n\ucf58\uc194 \ucc3d\uc740 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c \ucc3d\uc5d0 \ud3ec\ud568\ub41c \uacf5\uac04\uc73c\ub85c \uc624\ub958\ub97c \ubc1c\uacac\ud55c\uac70\ub098 \ubcc0\uc218\uac12\uc744 \ud655\uc778\ud560\uc218 \uc788\ub2e4.<br \/>\n<code>console.log()<\/code> \uc758 \uc18c\uad04\ud638 \ub0b4\uc5d0 \ub530\uc634\ud45c\ub97c \ub123\uc5b4 \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud558\uac70\ub098 \uc2dd\ubcc4\uc790\ub97c \ub123\uc5b4 \uac12\uc744 \ucd9c\ub825\ud574 \ubcfc\uc218 \uc788\ub2e4.<br \/>\n<strong>window \ub2e8\ucd95\ud0a4 <\/strong><code>ctrl+shift+i<\/code><br \/>\n<strong>mac \ub2e8\ucd95\ud0a4 <\/strong><code>command+option+j<\/code><\/p>\n<pre><code class=\"language-javascript\">console.log(1+2)\n<\/code><\/pre>\n<h2>6. \uc2dd\ubcc4\uc790<\/h2>\n<p>08 \uc608\uc81c\uc758 name \uacfc \uac19\uc740 \ubcc0\uc218\uba85\uc744 \uc6b0\ub9ac\ub294 \uc2dd\ubcc4\uc790\ub77c\uace0 \ud55c\ub2e4.<br \/>\n  \uc2dd\ubcc4\uc790: \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0\uc11c \uc774\ub984\uc744 \ubd99\uc77c \ub54c \uc0ac\uc6a9\ud558\ub294 \ub2e8\uc5b4.<br \/>\n  \uc8fc\ub85c \ubcc0\uc218\uba85\uc774\ub098 \ud568\uc218\uba85 \ub4f1\uc73c\ub85c \uc0ac\uc6a9<\/p>\n<ul>\n<li>\ud0a4\uc6cc\ub4dc \uc0ac\uc6a9 \ubd88\uac00<br \/>\n<a href=\".\/..\/ppt\/1-role.pdf\">:link: \ud0a4\uc6cc\ub4dc\ubcf4\uae30<\/a><\/li>\n<li>\uc22b\uc790\ub85c \uc2dc\uc791 \ubd88\uac00<\/li>\n<li>\ud2b9\uc218 \ubb38\uc790\ub294 <code>_<\/code>\uc640 <code>$<\/code>\ub9cc \ud5c8\uc6a9<\/li>\n<li>\uacf5\ubc31 \ubb38\uc790 \ud3ec\ud568 \ubd88\uac00<\/li>\n<\/ul>\n<hr>\n<p>  <strong>\uc2dd\ubcc4\uc790\ub97c \ub9cc\ub4dc\ub294 \uc77c\ubc18\uc801\uc778 \uad00\ub840<\/strong><\/p>\n<ul>\n<li>\ud074\ub798\uc2a4\uc758 \uc774\ub984\uc740 \ud56d\uc0c1 \ub300\ubb38\uc790\ub85c \uc2dc\uc791<\/li>\n<li>\ubcc0\uc218\uc640 \uc778\uc2a4\ud134\uc2a4, \ud568\uc218, \uba54\uc18c\ub4dc\uc758 \uc774\ub984\uc740 \ud56d\uc0c1 \uc18c\ubb38\uc790\ub85c \uc2dc\uc791<\/li>\n<li>\uc5ec\ub7ec \ub2e8\uc5b4\ub85c \uc774\ub8e8\uc5b4\uc9c4 \uc2dd\ubcc4\uc790\ub294 \uac01 \ub2e8\uc5b4\uc758 \uccab \uae00\uc790\ub97c \ub300\ubb38\uc790<\/li>\n<\/ul>\n<h4>6-1-\uc2dd\ubcc4\uc790 \ud45c\uae30\ub85c \uad6c\ubd84\ud558\ub294 \ud45c\ud604\uc2dd<\/h4>\n<table>\n<thead>\n<tr>\n<th>\uad6c\ubd84<\/th>\n<th>\ub2e8\ub3c5\uc73c\ub85c \uc0ac\uc6a9<\/th>\n<th>\ub2e4\ub978 \uc2dd\ubcc4\uc790\uc640 \uc0ac\uc6a9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\uc2dd\ubcc4\uc790 \ub4a4\uc5d0 \uad04\ud638 \uc5c6\uc74c<\/td>\n<td>\ubcc0\uc218<\/td>\n<td>\uc18d\uc131<\/td>\n<\/tr>\n<tr>\n<td>\uc2dd\ubcc4\uc790 \ub4a4\uc5d0 \uad04\ud638 \uc788\uc74c<\/td>\n<td>\ud568\uc218<\/td>\n<td>\uba54\uc18c\ub4dc<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<p><a href=\".\/script\/console-log.html\">09<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Welcome&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;\uc5b4\uc11c\uc624\uc138\uc694&lt;\/h1&gt;\n    &lt;script&gt;\n      var name = prompt(&#39;\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694.&#39;);\n      console.log(name + &#39;\ub2d8, \ud658\uc601\ud569\ub2c8\ub2e4.&#39;);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h3>4.6. \uc624\ub958\ud655\uc778<\/h3>\n<blockquote>\n<p>\uc2e4\ud589\uacb0\uacfc\uac00 \ub098\uc624\uc9c0 \uc54a\uc744\uacbd\uc6b0 \ucf58\uc194\ucc3d\uc744 \ud65c\uc6a9\ud558\uc5ec \uc624\ub958\ub97c \ud655\uc778\ud558\uc790<\/p>\n<\/blockquote>\n<h4>4.6.1. \uc608\uc81c<\/h4>\n<p>\uc2dc\uac04\uc744 \ucd9c\ub825\ud558\ub294 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc790<br \/>\n<a href=\".\/script\/js-time.html\">10-quiz<\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;What time is it?&lt;\/title&gt;\n    &lt;style&gt;\n      body {\n          font-size: 2em;\n          text-align: center;\n          }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script&gt;\n      var now = new Date();\n      var display = now.toLocaleTimeString();\n      document.writ(&#39;\ud604\uc7ac \uc2dc\uac01\uc740 &#39; + display);\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><a href=\".\/script\/js-time-result.html\">10-result<\/a><\/p>\n<p><Accordion title=\"???\"><br \/>\n&#8220;`html<br \/>\n<!DOCTYPE html><br \/>\n<html lang=\"ko\"><br \/>\n  <head><br \/>\n    <meta charset=\"UTF-8\" \/><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><br \/>\n    <title>What time is it?<\/title><\/p>\n<style>\n      body {\n          font-size: 2em;\n          text-align: center;\n          }\n    <\/style>\n<p>  <\/head><br \/>\n  <body><br \/>\n    <script>\n      var now = new Date();\n      var display = now.toLocaleTimeString();\n      document.<strong>write<\/strong>(\"\ud604\uc7ac \uc2dc\uac01\uc740 \" + display);\n    <\/script><br \/>\n  <\/body><br \/>\n<\/html><br \/>\n&#8220;`<br \/>\n<\/Accordion><\/p>\n<p>Uncaught TypeError:\u2026 \ud568\uc218\uac00 \uc544\ub2d9\ub2c8\ub2e4 \ub77c\ub294 \uad6c\ubb38\uc774 \ucd9c\ub825\ub41c\ub2e4.<br \/>\n\uc6b0\uce21\uc5d0 \uc624\ub958\uac00 \ubc1c\uc0dd\ud55c \ud589\uc774 \ub098\uc624\uba70 \uc5d0\ub514\ud130\uc5d0\uc11c \ud574\ub2f9 \uc904\ubc88\ud638\ub85c \uc774\ub3d9\ud558\uc5ec \ucf54\ub4dc\ub97c \uc218\uc815\ud560\uc218 \uc788\ub2e4.<\/p>\n<hr>\n<h3>4.7. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub529 \ucee8\ubca4\uc158(convention)<\/h3>\n<blockquote>\n<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ubb38\ubc95\uc5d0 \ub9de\uac8c \ucf54\ub529\ud558\ub294 \uac83\ub3c4 \uc911\uc694\ud558\uc9c0\ub9cc \uac00\ub3c5\uc131\uc744 \uc720\uc9c0\ud558\ub294 \uac83\ub3c4 \uc911\uc694\ud558\ub2e4.<\/p>\n<\/blockquote>\n<p>  \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \uc720\uc9c0\ud558\ub824\uba74 \uaddc\uce59\uc744 \uc9c0\ucf1c\uc57c \ud55c\ub2e4.<br \/>\n  \uc774\ub7f0 \ucf54\ub529 \uaddc\uce59\uc744 \ucf54\ub529 \ucee8\ubca4\uc158, \ucf54\ub529 \uc2a4\ud0c0\uc77c\uac00\uc774\ub4dc \ub77c\uace0 \ud55c\ub2e4.<\/p>\n<h4>4.7.1. <a href=\"https:\/\/google.github.io\/styleguide\/jsguide.html\">\uad6c\uae00\uc758 \uc2a4\ud0c0\uc77c\uac00\uc774\ub4dc<\/a><\/h4>\n<h4>4.7.2. <a href=\"https:\/\/github.com\/airbnb\/javascript\">\uc5d0\uc5b4\ube44\uc564\ube44\uc758 \uc2a4\ud0c0\uc77c\uac00\uc774\ub4dc-\uacf5\uc2dd<\/a><\/h4>\n<h4>4.7.3. <a href=\"https:\/\/github.com\/tipjs\/javascript-style-guide\">\uc5d0\uc5b4\ube44\uc564\ube44\uc758 \uc2a4\ud0c0\uc77c\uac00\uc774\ub4dc-\ubc88\uc5ed<\/a><\/h4>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac1c\uc694 1. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc5ed\ud560 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc6f9\uc758 \ucd08\ucc3d\uae30 \uc2dc\uc808\ubd80\ud130 \uc9c0\uae08\uae4c\uc9c0 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uafb8\uc900\ud788 \uc0ac\uc6a9\ud574\uc628 \uc5b8\uc5b4\uc774\ub2e4. \ub610\ud55c \uacc4\uc18d \ubc1c\uc804\ud558\uace0 \uc788\ub2e4. ECMA script \uacf5\uc2dd\uc0ac\uc774\ud2b8 \ubaa8\ub358\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud29c\ud1a0\ub9ac\uc5bc MDN JS tutorial 1.1. \uc6f9\uc758 \uc694\uc18c \uc81c\uc5b4 html\uc740 \ub0b4\uc6a9\uc744 \uad6c\uc131\ud55c\ub2e4 css \ub294 \ub514\uc790\uc778\uc744 \uc9c0\uc815\ud55c\ub2e4. js\ub294 \uc694\uc18c\ub97c \uc6c0\uc9c1\uc774\uac70\ub098 \ub370\uc774\ud130\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud55c\ub2e4. 1.2. \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc81c\uc791 \uacfc\uac70\uc758 \uc6f9\uc774 \ub2e8\uc21c\ud55c \uc815\ubcf4 \uc81c\uacf5\uc774 \ubaa9\uc801\uc774\uc5c8\ub2e4\uba74 \uadfc\ub300\uc758 \uc6f9\uc740 &#8230; <a title=\"\uc2dc\uc791\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=359\" aria-label=\"\uc2dc\uc791\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-359","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=359"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/359\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/359\/revisions\/2229"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}