\uc6f9 \uac1c\ubc1c \uc785\ubb38\uc790\ub97c \uc704\ud55c HTML, CSS, JavaScript \uae30\ucd08 \uac00\uc774\ub4dc<\/title>\n<\/head>\n<body>\n <header>\n <p>\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub824\ub294 \ucd08\ubcf4\uc790\uc5d0\uac8c \ud544\uc218\uc801\uc778 HTML, CSS, JavaScript\uc758 \uae30\ucd08 \uac1c\ub150\uc744 \uc54c\uc544\ubcf4\uace0 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ud1b5\ud574 \uc2e4\uc2b5\ud560 \uc218 \uc788\ub294 \uac00\uc774\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n <\/header>\n\n <section>\n <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\ubaa9\ucc28<\/p>\r\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>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%B4%EB%9E%80_%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80\" title=\"\uc6f9 \uac1c\ubc1c\uc774\ub780 \ubb34\uc5c7\uc778\uac00?\">\uc6f9 \uac1c\ubc1c\uc774\ub780 \ubb34\uc5c7\uc778\uac00?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#HTML_HyperText_Markup_Language\" title=\"HTML (HyperText Markup Language)\">HTML (HyperText Markup Language)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#HTML_%EC%98%88%EC%A0%9C\" title=\"HTML \uc608\uc81c\">HTML \uc608\uc81c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#CSS_Cascading_Style_Sheets\" title=\"CSS (Cascading Style Sheets)\">CSS (Cascading Style Sheets)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#CSS_%EC%98%88%EC%A0%9C\" title=\"CSS \uc608\uc81c\">CSS \uc608\uc81c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#JavaScript\" title=\"JavaScript\">JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#JavaScript_%EC%98%88%EC%A0%9C\" title=\"JavaScript \uc608\uc81c\">JavaScript \uc608\uc81c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80_%EB%A7%8C%EB%93%A4%EA%B8%B0_HTML_CSS_JavaScript_%ED%86%B5%ED%95%A9%ED%95%98%EA%B8%B0\" title=\"\uc6f9 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30: HTML, CSS, JavaScript \ud1b5\ud569\ud558\uae30\">\uc6f9 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30: HTML, CSS, JavaScript \ud1b5\ud569\ud558\uae30<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%84_%EC%8B%9C%EC%9E%91%ED%95%A0_%EB%95%8C_%EC%9C%A0%EC%9A%A9%ED%95%9C_%ED%8C%81\" title=\"\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc720\uc6a9\ud55c \ud301\">\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc720\uc6a9\ud55c \ud301<\/a><\/li><\/ul><\/nav><\/div>\r\n<h2><span class=\"ez-toc-section\" id=\"%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%B4%EB%9E%80_%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80\"><\/span>\uc6f9 \uac1c\ubc1c\uc774\ub780 \ubb34\uc5c7\uc778\uac00?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>\uc6f9 \uac1c\ubc1c\uc740 \uc778\ud130\ub137\uc5d0\uc11c \uc791\ub3d9\ud558\ub294 \uc6f9\uc0ac\uc774\ud2b8\uc640 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \uc791\uc5c5\uc785\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc758 \uae30\ubcf8\uc740 <strong>HTML<\/strong>, <strong>CSS<\/strong>, <strong>JavaScript<\/strong>\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc73c\uba70, \uac01 \uae30\uc220\uc774 \uc870\ud654\ub97c \uc774\ub8e8\uc5b4 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870, \ub514\uc790\uc778, \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n <p>\uc774\uc81c HTML, CSS, JavaScript\uac00 \uac01\uac01 \uc5b4\ub5a4 \uc5ed\ud560\uc744 \ud558\ub294\uc9c0 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"HTML_HyperText_Markup_Language\"><\/span>HTML (HyperText Markup Language)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>HTML\uc740 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870\ub97c \uc815\uc758\ud558\ub294 \uc5b8\uc5b4\ub85c, \ud14d\uc2a4\ud2b8, \uc774\ubbf8\uc9c0, \ub9c1\ud06c \ub4f1 \uc6f9 \ud398\uc774\uc9c0\uc758 \uc694\uc18c\ub97c \ud45c\uc2dc\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. HTML \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac01 \uc694\uc18c\ub97c \uc815\uc758\ud558\uba70, \uc6f9 \ud398\uc774\uc9c0\uc758 \ubf08\ub300\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n <h3><span class=\"ez-toc-section\" id=\"HTML_%EC%98%88%EC%A0%9C\"><\/span>HTML \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n <p>\uac04\ub2e8\ud55c HTML \ucf54\ub4dc \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n <pre><code><!DOCTYPE html>\n<html>\n<head>\n <title>My First Webpage<\/title>\n<\/head>\n<body>\n <h1>Hello, World!<\/h1>\n <p>This is my first webpage.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n <p>\uc704 \ucf54\ub4dc\ub294 \uc81c\ubaa9(<code><title><\/code>)\uacfc \ubcf8\ubb38 \ub0b4\uc6a9(<code><h1><\/code>, <code><p><\/code>)\uc744 \ud3ec\ud568\ud558\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"CSS_Cascading_Style_Sheets\"><\/span>CSS (Cascading Style Sheets)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>CSS\ub294 HTML\ub85c \uc791\uc131\ub41c \uc6f9 \ud398\uc774\uc9c0\uc758 \ub514\uc790\uc778\uc744 \ub2f4\ub2f9\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4. CSS\ub97c \uc0ac\uc6a9\ud574 \ud14d\uc2a4\ud2b8\uc758 \uc0c9\uc0c1, \uae00\uaf34, \ub808\uc774\uc544\uc6c3 \ub4f1\uc744 \uc815\uc758\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\ub2e4 \uc2dc\uac01\uc801\uc73c\ub85c \uc544\ub984\ub2e4\uc6b4 \ud398\uc774\uc9c0\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n <h3><span class=\"ez-toc-section\" id=\"CSS_%EC%98%88%EC%A0%9C\"><\/span>CSS \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n <p>HTML \uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c CSS \ucf54\ub4dc \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n <pre><code>h1 {\n color: blue;\n font-size: 24px;\n}\n\np {\n color: gray;\n font-size: 16px;\n}<\/code><\/pre>\n <p>\uc774 CSS \ucf54\ub4dc\ub294 \uc81c\ubaa9(<code><h1><\/code>) \ud14d\uc2a4\ud2b8\ub97c \ud30c\ub780\uc0c9\uc73c\ub85c, \ubcf8\ubb38(<code><p><\/code>) \ud14d\uc2a4\ud2b8\ub97c \ud68c\uc0c9\uc73c\ub85c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"JavaScript\"><\/span>JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>JavaScript\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ub3d9\uc801\uc778 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc640\uc758 \uc0c1\ud638\uc791\uc6a9, \uc774\ubca4\ud2b8 \ucc98\ub9ac, \ub370\uc774\ud130 \uc720\ud6a8\uc131 \uac80\uc0ac \ub4f1\uc758 \uae30\ub2a5\uc744 JavaScript\ub85c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n <h3><span class=\"ez-toc-section\" id=\"JavaScript_%EC%98%88%EC%A0%9C\"><\/span>JavaScript \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n <p>\uac04\ub2e8\ud55c JavaScript \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud574 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \ud14d\uc2a4\ud2b8\ub97c \ubcc0\uacbd\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n <pre><code><button onclick=\"changeText()\">\ud074\ub9ad\ud558\uc138\uc694<\/button>\n<p id=\"text\">\uc774 \ud14d\uc2a4\ud2b8\uac00 \ubc14\ub014 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n<script>\nfunction changeText() {\n document.getElementById(\"text\").innerHTML = \"\ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4!\";\n}\n<\/script><\/code><\/pre>\n <p>\uc704 \uc608\uc81c\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 JavaScript \ud568\uc218 <code>changeText()<\/code>\uac00 \uc2e4\ud589\ub418\uc5b4 \ubb38\uad6c\uac00 \ubcc0\uacbd\ub429\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80_%EB%A7%8C%EB%93%A4%EA%B8%B0_HTML_CSS_JavaScript_%ED%86%B5%ED%95%A9%ED%95%98%EA%B8%B0\"><\/span>\uc6f9 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30: HTML, CSS, JavaScript \ud1b5\ud569\ud558\uae30<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>HTML, CSS, JavaScript\ub97c \uacb0\ud569\ud558\uc5ec \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uac04\ub2e8\ud55c \uc6f9 \ud398\uc774\uc9c0 \ucf54\ub4dc \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n\n <pre><code><!DOCTYPE html>\n<html>\n<head>\n <style>\n body { font-family: Arial, sans-serif; }\n h1 { color: green; }\n p { color: black; }\n button { background-color: blue; color: white; padding: 10px; }\n <\/style>\n<\/head>\n<body>\n <h1>My First Interactive Webpage<\/h1>\n <p id=\"text\">Welcome to my page!<\/p>\n <button onclick=\"changeText()\">Change Text<\/button>\n\n <script>\n function changeText() {\n document.getElementById(\"text\").innerHTML = \"Text has been changed!\";\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n <p>\uc704 \ucf54\ub4dc \uc608\uc2dc\ub294 HTML, CSS, JavaScript\uac00 \uc870\ud569\ub41c \uae30\ubcf8\uc801\uc778 \uc6f9 \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. HTML\ub85c \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \uc815\uc758\ud558\uace0, CSS\ub85c \ub514\uc790\uc778\uc744 \uc801\uc6a9\ud558\uba70, JavaScript\ub85c \ub3d9\uc791\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%84_%EC%8B%9C%EC%9E%91%ED%95%A0_%EB%95%8C_%EC%9C%A0%EC%9A%A9%ED%95%9C_%ED%8C%81\"><\/span>\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc720\uc6a9\ud55c \ud301<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <ul>\n <li><strong>\uc791\uc740 \ud504\ub85c\uc81d\ud2b8\ubd80\ud130 \uc2dc\uc791<\/strong>: \uac04\ub2e8\ud55c \uc6f9 \ud398\uc774\uc9c0\ub098 \ud3ec\ud2b8\ud3f4\ub9ac\uc624 \uc0ac\uc774\ud2b8 \ub4f1\uc744 \ub9cc\ub4e4\uc5b4 \uae30\ucd08\ub97c \ub2e4\uc9c0\uc138\uc694.<\/li>\n <li><strong>\ud559\uc2b5 \uc790\ub8cc \ud65c\uc6a9<\/strong>: <em>W3Schools<\/em>, <em>MDN Web Docs<\/em>\uc640 \uac19\uc740 \ubb34\ub8cc \ub9ac\uc18c\uc2a4\ub97c \ucc38\uace0\ud558\uba74 \uc6f9 \uac1c\ubc1c \uc9c0\uc2dd\uc744 \uc27d\uac8c \uc2b5\ub4dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n <li><strong>\ucf54\ub4dc \uc2e4\uc2b5 \ubc18\ubcf5<\/strong>: \uc2e4\uc81c\ub85c \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcf4\uace0 \uc624\ub958\ub97c \uace0\uce58\ub294 \uacfc\uc815\uc744 \ud1b5\ud574 \uc2e4\ub825\uc744 \ud0a4\uc6cc \ub098\uac00\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/section>\n\n <footer>\n <p>HTML, CSS, JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc758 \uae30\ubcf8\uc774\uc790 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uae30\ucd08\ub97c \ud0c4\ud0c4\ud788 \ub2e4\uc9c0\uace0 \ub354 \ub098\uc544\uac00 \uba4b\uc9c4 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uc138\uc694!<\/p>\n <p>Written by IT Expert Assistant<\/p>\n <\/footer>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9 \uac1c\ubc1c \uc785\ubb38\uc790\ub97c \uc704\ud55c HTML, CSS, JavaScript \uae30\ucd08 \uac00\uc774\ub4dc \uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub824\ub294 \ucd08\ubcf4\uc790\uc5d0\uac8c \ud544\uc218\uc801\uc778 HTML, CSS, JavaScript\uc758 \uae30\ucd08 \uac1c\ub150\uc744 \uc54c\uc544\ubcf4\uace0 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ud1b5\ud574 \uc2e4\uc2b5\ud560 \uc218 \uc788\ub294 \uac00\uc774\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc774\ub780 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1407","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":1,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"predecessor-version":[{"id":1408,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts\/1407\/revisions\/1408"}],"wp:attachment":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1407,"date":"2024-11-09T23:35:00","date_gmt":"2024-11-09T14:35:00","guid":{"rendered":"https:\/\/itreview.kr\/?p=1407"},"modified":"2024-11-08T16:37:24","modified_gmt":"2024-11-08T07:37:24","slug":"%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c","status":"publish","type":"post","link":"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/","title":{"rendered":"\uc6f9 \uac1c\ubc1c \uc785\ubb38\uc790\ub97c \uc704\ud55c HTML, CSS, JavaScript \uae30\ucd08 \uac00\uc774\ub4dc"},"content":{"rendered":"\n\n\n\n \n \n \n \n \uc6f9 \uac1c\ubc1c \uc785\ubb38\uc790\ub97c \uc704\ud55c HTML, CSS, JavaScript \uae30\ucd08 \uac00\uc774\ub4dc<\/title>\n<\/head>\n<body>\n <header>\n <p>\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub824\ub294 \ucd08\ubcf4\uc790\uc5d0\uac8c \ud544\uc218\uc801\uc778 HTML, CSS, JavaScript\uc758 \uae30\ucd08 \uac1c\ub150\uc744 \uc54c\uc544\ubcf4\uace0 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ud1b5\ud574 \uc2e4\uc2b5\ud560 \uc218 \uc788\ub294 \uac00\uc774\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n <\/header>\n\n <section>\n <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\ubaa9\ucc28<\/p>\r\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>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%B4%EB%9E%80_%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80\" title=\"\uc6f9 \uac1c\ubc1c\uc774\ub780 \ubb34\uc5c7\uc778\uac00?\">\uc6f9 \uac1c\ubc1c\uc774\ub780 \ubb34\uc5c7\uc778\uac00?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#HTML_HyperText_Markup_Language\" title=\"HTML (HyperText Markup Language)\">HTML (HyperText Markup Language)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#HTML_%EC%98%88%EC%A0%9C\" title=\"HTML \uc608\uc81c\">HTML \uc608\uc81c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#CSS_Cascading_Style_Sheets\" title=\"CSS (Cascading Style Sheets)\">CSS (Cascading Style Sheets)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#CSS_%EC%98%88%EC%A0%9C\" title=\"CSS \uc608\uc81c\">CSS \uc608\uc81c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#JavaScript\" title=\"JavaScript\">JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#JavaScript_%EC%98%88%EC%A0%9C\" title=\"JavaScript \uc608\uc81c\">JavaScript \uc608\uc81c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80_%EB%A7%8C%EB%93%A4%EA%B8%B0_HTML_CSS_JavaScript_%ED%86%B5%ED%95%A9%ED%95%98%EA%B8%B0\" title=\"\uc6f9 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30: HTML, CSS, JavaScript \ud1b5\ud569\ud558\uae30\">\uc6f9 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30: HTML, CSS, JavaScript \ud1b5\ud569\ud558\uae30<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itreview.kr\/%ec%9b%b9-%ea%b0%9c%eb%b0%9c-%ec%9e%85%eb%ac%b8%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-html-css-javascript-%ea%b8%b0%ec%b4%88-%ea%b0%80%ec%9d%b4%eb%93%9c\/#%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%84_%EC%8B%9C%EC%9E%91%ED%95%A0_%EB%95%8C_%EC%9C%A0%EC%9A%A9%ED%95%9C_%ED%8C%81\" title=\"\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc720\uc6a9\ud55c \ud301\">\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc720\uc6a9\ud55c \ud301<\/a><\/li><\/ul><\/nav><\/div>\r\n<h2><span class=\"ez-toc-section\" id=\"%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%B4%EB%9E%80_%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80\"><\/span>\uc6f9 \uac1c\ubc1c\uc774\ub780 \ubb34\uc5c7\uc778\uac00?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>\uc6f9 \uac1c\ubc1c\uc740 \uc778\ud130\ub137\uc5d0\uc11c \uc791\ub3d9\ud558\ub294 \uc6f9\uc0ac\uc774\ud2b8\uc640 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \uc791\uc5c5\uc785\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc758 \uae30\ubcf8\uc740 <strong>HTML<\/strong>, <strong>CSS<\/strong>, <strong>JavaScript<\/strong>\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc73c\uba70, \uac01 \uae30\uc220\uc774 \uc870\ud654\ub97c \uc774\ub8e8\uc5b4 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870, \ub514\uc790\uc778, \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n <p>\uc774\uc81c HTML, CSS, JavaScript\uac00 \uac01\uac01 \uc5b4\ub5a4 \uc5ed\ud560\uc744 \ud558\ub294\uc9c0 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"HTML_HyperText_Markup_Language\"><\/span>HTML (HyperText Markup Language)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>HTML\uc740 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870\ub97c \uc815\uc758\ud558\ub294 \uc5b8\uc5b4\ub85c, \ud14d\uc2a4\ud2b8, \uc774\ubbf8\uc9c0, \ub9c1\ud06c \ub4f1 \uc6f9 \ud398\uc774\uc9c0\uc758 \uc694\uc18c\ub97c \ud45c\uc2dc\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. HTML \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac01 \uc694\uc18c\ub97c \uc815\uc758\ud558\uba70, \uc6f9 \ud398\uc774\uc9c0\uc758 \ubf08\ub300\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n <h3><span class=\"ez-toc-section\" id=\"HTML_%EC%98%88%EC%A0%9C\"><\/span>HTML \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n <p>\uac04\ub2e8\ud55c HTML \ucf54\ub4dc \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n <pre><code><!DOCTYPE html>\n<html>\n<head>\n <title>My First Webpage<\/title>\n<\/head>\n<body>\n <h1>Hello, World!<\/h1>\n <p>This is my first webpage.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n <p>\uc704 \ucf54\ub4dc\ub294 \uc81c\ubaa9(<code><title><\/code>)\uacfc \ubcf8\ubb38 \ub0b4\uc6a9(<code><h1><\/code>, <code><p><\/code>)\uc744 \ud3ec\ud568\ud558\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"CSS_Cascading_Style_Sheets\"><\/span>CSS (Cascading Style Sheets)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>CSS\ub294 HTML\ub85c \uc791\uc131\ub41c \uc6f9 \ud398\uc774\uc9c0\uc758 \ub514\uc790\uc778\uc744 \ub2f4\ub2f9\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4. CSS\ub97c \uc0ac\uc6a9\ud574 \ud14d\uc2a4\ud2b8\uc758 \uc0c9\uc0c1, \uae00\uaf34, \ub808\uc774\uc544\uc6c3 \ub4f1\uc744 \uc815\uc758\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\ub2e4 \uc2dc\uac01\uc801\uc73c\ub85c \uc544\ub984\ub2e4\uc6b4 \ud398\uc774\uc9c0\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n\n <h3><span class=\"ez-toc-section\" id=\"CSS_%EC%98%88%EC%A0%9C\"><\/span>CSS \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n <p>HTML \uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c CSS \ucf54\ub4dc \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n <pre><code>h1 {\n color: blue;\n font-size: 24px;\n}\n\np {\n color: gray;\n font-size: 16px;\n}<\/code><\/pre>\n <p>\uc774 CSS \ucf54\ub4dc\ub294 \uc81c\ubaa9(<code><h1><\/code>) \ud14d\uc2a4\ud2b8\ub97c \ud30c\ub780\uc0c9\uc73c\ub85c, \ubcf8\ubb38(<code><p><\/code>) \ud14d\uc2a4\ud2b8\ub97c \ud68c\uc0c9\uc73c\ub85c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"JavaScript\"><\/span>JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>JavaScript\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ub3d9\uc801\uc778 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc640\uc758 \uc0c1\ud638\uc791\uc6a9, \uc774\ubca4\ud2b8 \ucc98\ub9ac, \ub370\uc774\ud130 \uc720\ud6a8\uc131 \uac80\uc0ac \ub4f1\uc758 \uae30\ub2a5\uc744 JavaScript\ub85c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n <h3><span class=\"ez-toc-section\" id=\"JavaScript_%EC%98%88%EC%A0%9C\"><\/span>JavaScript \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n <p>\uac04\ub2e8\ud55c JavaScript \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud574 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \ud14d\uc2a4\ud2b8\ub97c \ubcc0\uacbd\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n <pre><code><button onclick=\"changeText()\">\ud074\ub9ad\ud558\uc138\uc694<\/button>\n<p id=\"text\">\uc774 \ud14d\uc2a4\ud2b8\uac00 \ubc14\ub014 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n<script>\nfunction changeText() {\n document.getElementById(\"text\").innerHTML = \"\ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub418\uc5c8\uc2b5\ub2c8\ub2e4!\";\n}\n<\/script><\/code><\/pre>\n <p>\uc704 \uc608\uc81c\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 JavaScript \ud568\uc218 <code>changeText()<\/code>\uac00 \uc2e4\ud589\ub418\uc5b4 \ubb38\uad6c\uac00 \ubcc0\uacbd\ub429\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80_%EB%A7%8C%EB%93%A4%EA%B8%B0_HTML_CSS_JavaScript_%ED%86%B5%ED%95%A9%ED%95%98%EA%B8%B0\"><\/span>\uc6f9 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30: HTML, CSS, JavaScript \ud1b5\ud569\ud558\uae30<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <p>HTML, CSS, JavaScript\ub97c \uacb0\ud569\ud558\uc5ec \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uac04\ub2e8\ud55c \uc6f9 \ud398\uc774\uc9c0 \ucf54\ub4dc \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n\n <pre><code><!DOCTYPE html>\n<html>\n<head>\n <style>\n body { font-family: Arial, sans-serif; }\n h1 { color: green; }\n p { color: black; }\n button { background-color: blue; color: white; padding: 10px; }\n <\/style>\n<\/head>\n<body>\n <h1>My First Interactive Webpage<\/h1>\n <p id=\"text\">Welcome to my page!<\/p>\n <button onclick=\"changeText()\">Change Text<\/button>\n\n <script>\n function changeText() {\n document.getElementById(\"text\").innerHTML = \"Text has been changed!\";\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n <p>\uc704 \ucf54\ub4dc \uc608\uc2dc\ub294 HTML, CSS, JavaScript\uac00 \uc870\ud569\ub41c \uae30\ubcf8\uc801\uc778 \uc6f9 \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. HTML\ub85c \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \uc815\uc758\ud558\uace0, CSS\ub85c \ub514\uc790\uc778\uc744 \uc801\uc6a9\ud558\uba70, JavaScript\ub85c \ub3d9\uc791\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n <\/section>\n\n <section>\n <h2><span class=\"ez-toc-section\" id=\"%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9D%84_%EC%8B%9C%EC%9E%91%ED%95%A0_%EB%95%8C_%EC%9C%A0%EC%9A%A9%ED%95%9C_%ED%8C%81\"><\/span>\uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \ub54c \uc720\uc6a9\ud55c \ud301<span class=\"ez-toc-section-end\"><\/span><\/h2>\n <ul>\n <li><strong>\uc791\uc740 \ud504\ub85c\uc81d\ud2b8\ubd80\ud130 \uc2dc\uc791<\/strong>: \uac04\ub2e8\ud55c \uc6f9 \ud398\uc774\uc9c0\ub098 \ud3ec\ud2b8\ud3f4\ub9ac\uc624 \uc0ac\uc774\ud2b8 \ub4f1\uc744 \ub9cc\ub4e4\uc5b4 \uae30\ucd08\ub97c \ub2e4\uc9c0\uc138\uc694.<\/li>\n <li><strong>\ud559\uc2b5 \uc790\ub8cc \ud65c\uc6a9<\/strong>: <em>W3Schools<\/em>, <em>MDN Web Docs<\/em>\uc640 \uac19\uc740 \ubb34\ub8cc \ub9ac\uc18c\uc2a4\ub97c \ucc38\uace0\ud558\uba74 \uc6f9 \uac1c\ubc1c \uc9c0\uc2dd\uc744 \uc27d\uac8c \uc2b5\ub4dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n <li><strong>\ucf54\ub4dc \uc2e4\uc2b5 \ubc18\ubcf5<\/strong>: \uc2e4\uc81c\ub85c \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcf4\uace0 \uc624\ub958\ub97c \uace0\uce58\ub294 \uacfc\uc815\uc744 \ud1b5\ud574 \uc2e4\ub825\uc744 \ud0a4\uc6cc \ub098\uac00\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/section>\n\n <footer>\n <p>HTML, CSS, JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc758 \uae30\ubcf8\uc774\uc790 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uae30\ucd08\ub97c \ud0c4\ud0c4\ud788 \ub2e4\uc9c0\uace0 \ub354 \ub098\uc544\uac00 \uba4b\uc9c4 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uc138\uc694!<\/p>\n <p>Written by IT Expert Assistant<\/p>\n <\/footer>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9 \uac1c\ubc1c \uc785\ubb38\uc790\ub97c \uc704\ud55c HTML, CSS, JavaScript \uae30\ucd08 \uac00\uc774\ub4dc \uc6f9 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub824\ub294 \ucd08\ubcf4\uc790\uc5d0\uac8c \ud544\uc218\uc801\uc778 HTML, CSS, JavaScript\uc758 \uae30\ucd08 \uac1c\ub150\uc744 \uc54c\uc544\ubcf4\uace0 \uac04\ub2e8\ud55c \uc608\uc81c\ub97c \ud1b5\ud574 \uc2e4\uc2b5\ud560 \uc218 \uc788\ub294 \uac00\uc774\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc6f9 \uac1c\ubc1c\uc774\ub780 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1407","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":1,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"predecessor-version":[{"id":1408,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/posts\/1407\/revisions\/1408"}],"wp:attachment":[{"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itreview.kr\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}