{"id":32655,"date":"2025-05-13T23:33:18","date_gmt":"2025-05-14T02:33:18","guid":{"rendered":"https:\/\/mastertrend.info\/?p=32655"},"modified":"2026-04-28T14:50:55","modified_gmt":"2026-04-28T17:50:55","slug":"%ec%b2%ab-%eb%b2%88%ec%a7%b8-%ec%9b%b9-%ec%95%b1%ec%9d%84-%eb%a7%8c%eb%93%a4%ec%96%b4-%eb%b3%b4%ec%84%b8%ec%9a%94","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/ko\/crea-tu-primera-app-web\/","title":{"rendered":"\uccab \ubc88\uc9f8 \uc6f9 \uc571\uc744 \ub9cc\ub4e4\uace0 \uc2a4\ud2b8\ub808\uc2a4 \uc5c6\uc774 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \ub9c8\uc2a4\ud130\ud558\uc138\uc694 \ud83d\ude80\ud83d\udcbb"},"content":{"rendered":"<h2 class=\"table-content-link\">\uccab \ubc88\uc9f8 \uc6f9 \uc571\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc138\uc694: \uba54\ubaa8 + \uce74\uc6b4\ud130\ub97c \uc27d\uace0 \ube60\ub974\uac8c \ud83d\udcdd\u26a1<\/h2>\n<p>\ud504\ub85c\uadf8\ub798\ubc0d\uc744 \uc2dc\uc791\ud558\ub294 \uac83\uc740 \uace0\ub824\ud574\uc57c \ud560 \uc5b8\uc5b4, \ud504\ub808\uc784\uc6cc\ud06c, \ubc29\ubc95\ub860\uc774 \ub108\ubb34 \ub9ce\uc544\uc11c \uc555\ub3c4\uc801\uc73c\ub85c \ub290\uaef4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub54c\ub85c\ub294 \ubaa8\ub4e0 \uac83\uc744 AI\uc5d0\uac8c \uc704\uc784\ud558\ub294 \uac83\uc774 \ub354 \uc26c\uc6b8 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uad1c\ucc2e\uc544\uc694! \uc6f9 \ud504\ub85c\uadf8\ub798\ubc0d\uc740 \uac04\ub2e8\ud558\uace0, \uc7ac\ubbf8\uc788\uace0, \ubb34\uc5c7\ubcf4\ub2e4\ub3c4 \uc644\uc804\ud788 \ubb34\ub8cc\uc785\ub2c8\ub2e4! \ud83c\udf10\u2728<\/p>\n<h2 id=\"what-you-rsquo-ll-build\">\ub2f9\uc2e0\uc774 \ub9cc\ub4e4\ub824\uace0 \ud558\ub294 \uac83<\/h2>\n<p>\uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud558\uba74 \ud14d\uc2a4\ud2b8 \uba54\ubaa8\ub97c \uc800\uc7a5\ud558\uace0 \ubb38\uc790\uc640 \ub2e8\uc5b4\uc758 \uac1c\uc218\ub97c \uc138\ub294 \uac04\ub2e8\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc571\uc740 \ub370\uc774\ud130\ub97c \ubcf4\uad00\ud558\ubbc0\ub85c \ud398\uc774\uc9c0\ub97c \ub2e4\uc2dc \ub85c\ub4dc\ud558\uac70\ub098 \ub2e4\uc2dc \uc5f4 \ub54c \ud14d\uc2a4\ud2b8\ub97c \uae30\uc5b5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub098\uc911\uc5d0 \ucc38\uc870\ud558\ub824\ub294 \uc8fc\uc18c, URL \ub4f1 \ubaa8\ub4e0 \ud14d\uc2a4\ud2b8\ub97c \ud3b8\ub9ac\ud558\uac8c \uc800\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud83d\udcc4\ud83d\udd17<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\uc77c\uc815 \ud56d\ubaa9\uacfc URL \ubaa9\ub85d\uc744 \ud3ec\ud568\ud55c \uba54\ubaa8\ub97c \ud45c\uc2dc\ud558\ub294 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uae30\ubc18 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc608\uc785\ub2c8\ub2e4.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<p>\ub610\ud55c \ubb38\uc790\uc640 \ub2e8\uc5b4\ub3c4 \uacc4\uc0b0\ud558\ub294\ub370, \uc774\ub294 \ubb38\uc790\uc5f4(\ud14d\uc2a4\ud2b8) \ucc98\ub9ac\uc5d0 \ub300\ud55c \uc88b\uc740 \uc18c\uac1c\uac00 \ub429\ub2c8\ub2e4. \ubb3c\ub860, \uc571\uc740 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4. \uadf8\uac8c \ubaa9\uc801\uc774\ub2c8\uae4c\uc694! \ud558\uc9c0\ub9cc \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ud1b5\ud574 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uae30\ubcf8 \uc0ac\ud56d\uc744 \ubc30\uc6b0\uace0 \ub098\uba74 \uc138\uc0c1\uc740 \uc5ec\ub7ec\ubd84\uc758 \uc190 \uc548\uc5d0 \ud3bc\uccd0\uc9c8 \uac83\uc785\ub2c8\ub2e4. \ud83e\uddaa\ud83d\udcbb<\/p>\n<h2 id=\"how-you-rsquo-ll-build-it\">\uc5b4\ub5bb\uac8c \ub9cc\ub4e4 \uac83\uc778\uac00?<\/h2>\n<p>\uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub9e4\uc6b0 \ub2e4\uc591\ud558\uc9c0\ub9cc \uc77c\ubc18\uc801\uc73c\ub85c HTML, CSS, JavaScript\ub77c\ub294 \uc138 \uac00\uc9c0 \uc8fc\uc694 \uae30\uc220\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc791\uc5c5\uc744 \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uadf8\ub4e4\uc758 \uc5ed\ud560\uc744 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ud83d\udcda<\/p>\n<ul>\n<li>HTML: \ud558\uc774\ud37c\ud14d\uc2a4\ud2b8 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uba74 \ucf58\ud150\uce20\uc758 \uad6c\uc870\ub97c \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc0ac\uc6a9\ud558\uba74 \ud14d\uc2a4\ud2b8\ub97c \uc758\ubbf8\uc5d0 \ub530\ub77c \ud45c\uc2dc\ud560 \uc218 \uc788\uc73c\uba70, \uc608\ub97c \ub4e4\uc5b4 \ud14d\uc2a4\ud2b8\uac00 \ubb38\ub2e8\uc778\uc9c0, \uc81c\ubaa9\uc778\uc9c0, \ubaa9\ub85d\uc758 \ud56d\ubaa9\uc778\uc9c0 \ub4f1\uc744 \ub098\ud0c0\ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<li>CSS: Cascading Style Sheets\ub97c \uc0ac\uc6a9\ud558\uba74 \ucf58\ud150\uce20\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uba74 \ubb38\ub2e8\uc744 \ub179\uc0c9\uc73c\ub85c \uce60\ud558\uace0, \ubaa8\ub4e0 \ub9c1\ud06c\ub97c \uad75\uac8c \ud45c\uc2dc\ud558\uac70\ub098, \uc8fc\uc694 \uae30\uc0ac \uc606\uc5d0 \uc0ac\uc774\ub4dc\ubc14\ub97c \ubc30\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud83c\udfa8<\/li>\n<li>JavaScript: \uc774 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uba74 \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \ubb38\uc11c\uc758 \uc77c\ubd80\uac00 \ud45c\uc2dc\ub418\uac70\ub098 \uc228\uaca8\uc9c0\ub3c4\ub85d \ud560 \uc218 \uc788\uc73c\uba70, \ubcf8\uaca9\uc801\uc778 \uc6cc\ub4dc \ud504\ub85c\uc138\uc11c\ub098 \ube44\ub514\uc624 \uac8c\uc784\uc744 \uad6c\ud604\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \ud83c\udfae<\/li>\n<\/ul>\n<p>\uadf8 <a href=\"https:\/\/web.dev\" target=\"_blank\" rel=\"noopener noreferrer\">\uc6f9\uc0ac\uc774\ud2b8.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"HTML, CSS, JavaScript\uc5d0 \ub300\ud55c \ud559\uc2b5 \ub9ac\uc18c\uc2a4\ub97c \uc81c\uacf5\ud558\ub294 web.dev \uc0ac\uc774\ud2b8\uc758 \ud648\ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.\" width=\"1388\" height=\"734\" title=\"\"> <\/picture><\/figure>\n<h2 id=\"the-app-structure\">\uc571\uc758 \uad6c\uc870<\/h2>\n<p>\uc5ec\ub7ec\ubd84\uc774 \ub9cc\ub4e4 \uc571\uc740 index.html, styles.css, script.js\ub77c\ub294 \uc138 \uac1c\uc758 \uac04\ub2e8\ud55c \ud30c\uc77c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \ud83d\uddc2\ufe0f<\/p>\n<p>\uc571\uc744 \uc2e4\ud589\ud558\ub294 \ub370 \ud2b9\ubcc4\ud55c \uc694\uad6c \uc0ac\ud56d\uc740 \uc5c6\uc73c\uba70, \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub9cc \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4. \ubc31\uc5d4\ub4dc \uae30\ub2a5\uc774 \uc5c6\uc73c\ubbc0\ub85c PHP\uc640 \uac19\uc740 \uc2a4\ud06c\ub9bd\ud305 \uc5b8\uc5b4\ub098 \ub85c\uceec \uc6f9 \uc11c\ubc84\uac00 \ud544\uc694\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc644\ub8cc\ub418\uba74 \uc5f4 \uc218 \uc788\uc2b5\ub2c8\ub2e4 <a title=\"Windows 11\uc5d0 \ub85c\uceec Linux \uc6f9 \uc11c\ubc84\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\" href=\"https:\/\/mastertrend.info\/ko\/%eb%a1%9c%ec%bb%ac-%eb%a6%ac%eb%88%85%ec%8a%a4-%ec%9b%b9-%ec%84%9c%eb%b2%84\/\" target=\"_blank\" rel=\"noopener\" data-wpil-monitor-id=\"5749\">\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc9c1\uc811 index.html \ud30c\uc77c\uc744 \uc5fd\ub2c8\ub2e4.<\/a> \uadf8\ub9ac\uace0 \ubaa8\ub4e0 \uac83\uc774 \uc798 \ub420 \uac70\uc608\uc694. \ud83d\ude0a<\/p>\n<p>JavaScript\uac00 \ud30c\uc77c \uc2dc\uc2a4\ud15c\uc5d0 \uc811\uadfc\ud560 \uc218 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \uc774 \uc571\uc740 \ub514\uc2a4\ud06c\uc758 \ud2b9\uc815 \ud30c\uc77c\uc5d0 \ud14d\uc2a4\ud2b8\ub97c \uc4f0\uc9c0 \uc54a\uace0 \ud14d\uc2a4\ud2b8\ub97c \uc800\uc7a5\ud55c\ub2e4\ub294 \uc810\uc5d0 \uc720\uc758\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ucfe0\ud0a4\uc758 \uac15\ub825\ud55c \ub300\uc548\uc778 Web Storage API\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ud83c\udf6a\ud83d\udcbe<\/p>\n<h2 id=\"how-to-build-the-note-taker\">\ub178\ud2b8\ud14c\uc774\ucee4\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95<\/h2>\n<p>\uac19\uc740 \ub514\ub809\ud1a0\ub9ac\uc5d0 \ub2e4\uc74c \uc138 \uac1c\uc758 \ud30c\uc77c\uc744 \ub9cc\ub4e0 \ub2e4\uc74c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c index.html\uc744 \uc5fd\ub2c8\ub2e4. \ub610\ub294 \ub2e4\uc74c\uc5d0\uc11c \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/github.com\/bobbykjack\/text\" target=\"_blank\" rel=\"noopener\">\uc774 GitHub \uc800\uc7a5\uc18c<\/a>. \ud83d\udce5<\/p>\n<h3 id=\"building-the-structure-with-html\">HTML\ub85c \uad6c\uc870 \uad6c\ucd95<\/h3>\n<p>index.html \ud30c\uc77c\uc740 \uc571 \ucf58\ud150\uce20\uc758 HTML \uad6c\uc870\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \ub098\uba38\uc9c0 \ub450 \ud30c\uc77c\uc5d0 \ub300\ud55c \ucc38\uc870\ub97c \ud3ec\ud568\uc2dc\ucf1c \ube0c\ub77c\uc6b0\uc800\uac00 \ucd5c\uc885 \uc81c\ud488\uc744 \uc704\ud574 \ub450 \ud30c\uc77c\uc744 \uacb0\ud569\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n<p>\ubaa8\ub4e0 HTML \ubb38\uc11c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \ucd5c\uc0c1\uc704 \uad6c\uc870\uc5d0\ub294 \uba54\ud0c0\ub370\uc774\ud130\uac00 \ud3ec\ud568\ub41c \ud5e4\ub4dc \uc139\uc158\uacfc \ud398\uc774\uc9c0\uc5d0 \ud45c\uc2dc\ub420 \uc2e4\uc81c \ucf58\ud150\uce20\uac00 \ud3ec\ud568\ub41c \ubc14\ub514 \uc139\uc158\uc774 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs html\"><span class=\"hljs-meta\">HTML<\/span>&gt;\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">HTML<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\uba38\ub9ac<\/span>&gt;<\/span>\r\n    ...\r\n<span class=\"hljs-tag\"><span class=\"hljs-name\">\uba38\ub9ac<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\ubab8<\/span>&gt;<\/span><br \/>\n&#8230;<br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">\ubab8<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">HTML<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>\ud5e4\ub4dc \ubd80\ubd84\uc758 \uba54\ud0c0\ub370\uc774\ud130\ub294 \ub9e4\uc6b0 \uac04\ub7b5\ud558\uba70, \ud398\uc774\uc9c0 \uc81c\ubaa9(\ube0c\ub77c\uc6b0\uc800\uc758 \uc81c\ubaa9 \ud45c\uc2dc\uc904\uc5d0 \ud45c\uc2dc\ub428)\uacfc styles.css \ud30c\uc77c\uc5d0 \ub300\ud55c \ucc38\uc870\ub9cc \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\uc81c\ubaa9<\/span>&gt;<\/span>\ud14d\uc2a4\ud2b8<span class=\"hljs-tag\"><span class=\"hljs-name\">\uc81c\ubaa9<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\ub9c1\ud06c<\/span> <span class=\"hljs-attr\">\uc0c1\ub300<\/span>=<span class=\"hljs-string\">&quot;\uc2a4\ud0c0\uc77c\uc2dc\ud2b8&quot;<\/span> <span class=\"hljs-attr\">HREF<\/span>=<span class=\"hljs-string\">&quot;\uc2a4\ud0c0\uc77c.css&quot;<\/span> \/&gt;<\/span>\r\n<\/code><\/pre>\n<p>\uc2e0\uccb4\ub294 \ub354 \ubcf5\uc7a1\ud558\uc9c0\ub9cc \uc911\uc694\ud55c \ubd80\ubd84\uc740 \uba87 \uac00\uc9c0\ubfd0\uc785\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\uc0ac\uc5c5\ubd80<\/span> <span class=\"hljs-attr\">ID<\/span>=<span class=\"hljs-string\">&quot;\uacc4\uc218\uae30&quot;<\/span>&gt;<\/span>\r\n        \ub2e8\uc5b4: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\uae30\uac04<\/span> <span class=\"hljs-attr\">ID<\/span>=<span class=\"hljs-string\">&quot;\ub2e8\uc5b4&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">\uae30\uac04<\/span>&gt;<\/span>\r\n        \/ \ubb38\uc790: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\uae30\uac04<\/span> <span class=\"hljs-attr\">ID<\/span>=<span class=\"hljs-string\">&quot;\ubb38\uc790&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">\uae30\uac04<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\"><span class=\"hljs-name\">\uc0ac\uc5c5\ubd80<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\ud14d\uc2a4\ud2b8\uc5d0\uc5b4\ub9ac\uc5b4<\/span> <span class=\"hljs-attr\">ID<\/span>=<span class=\"hljs-string\">&quot;\ud14d\uc2a4\ud2b8&quot;<\/span> <span class=\"hljs-attr\">\uc790\ub3d9 \ucd08\uc810<\/span>=<span class=\"hljs-string\">\u00ab1\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">\ud14d\uc2a4\ud2b8\uc5d0\uc5b4\ub9ac\uc5b4<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\uc2a4\ud06c\ub9bd\ud2b8<\/span> <span class=\"hljs-attr\">\ucd9c\ucc98<\/span>=<span class=\"hljs-string\">\u00abscript.js\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">\uc2a4\ud06c\ub9bd\ud2b8<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>div \uc694\uc18c\uc5d0\ub294 \uc571\uc758 \ub2e8\uc5b4\uc640 \ubb38\uc790 \uc218\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4. \uc774\ub294 \uc6f9 \uc571 \uc0c1\ub2e8\uc5d0 \uc704\uce58\ud558\uba70 \ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc791\uc5c5\uc5d0 \ud544\uc218\uc801\uc778 id \uc18d\uc131\uc744 \uc8fc\ubaa9\ud558\uc138\uc694. ID \uac12\uc740 \uace0\uc720\ud574\uc57c \ud558\ubbc0\ub85c \uc571\uc5d0\uc11c \uc774\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud2b9\uc815 \ud56d\ubaa9\uc744 \uc2dd\ubcc4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \uc774\ub7ec\ud55c \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub418\uace0 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \ub54c \ud574\ub2f9 \uc694\uc18c\ub97c \ud0c0\uac9f\ud305\ud558\ub294 \ub370\ub3c4 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<p>\ud14d\uc2a4\ud2b8\uc5d0\uc5b4\ub9ac\uc5b4\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8\ub97c \uc785\ub825\ud560 \uc218 \uc788\ub294 \uae30\ubcf8 \uc81c\uacf5 \uc591\uc2dd \uc694\uc18c\uc785\ub2c8\ub2e4. \uc790\ub3d9 \ucd08\uc810 \uc18d\uc131\uc744 \uc0ac\uc6a9\ud558\uba74 \ud398\uc774\uc9c0\uac00 \ub85c\ub4dc\ub418\ub294 \uc989\uc2dc \uae00\uc744 \uc4f8 \uc900\ube44\uac00 \ub429\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c, \uc774 \ud398\uc774\uc9c0\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc778 script.js\ub97c \ucc38\uc870\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uc2dc\uc810\uc5d0\uc11c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c index.html \ud30c\uc77c\uc744 \uc5f4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uae08 \ub2f9\uc7a5\uc740 \uc544\ubb34 \uc77c\ub3c4 \uc77c\uc5b4\ub098\uc9c0 \uc54a\uace0 \ubcf4\uae30\uc5d0\ub3c4 \uc88b\uc9c0 \uc54a\uc9c0\ub9cc, \uae30\ubcf8 \uc0ac\ud56d\uc774 \uc608\uc0c1\ub300\ub85c \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud574 \ubaa8\ub4e0 \ub2e8\uacc4\uc5d0\uc11c \uc571\uc744 \ud14c\uc2a4\ud2b8\ud558\ub294 \uac83\uc774 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\uae30\ubcf8 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c \ub178\ud2b8 \uc791\uc131 \uc6f9 \uc571\uc758 \ubaa8\uc2b5. \uc67c\ucabd \uc0c1\ub2e8\uc5d0 \ubaa8\ub4e0 \ud56d\ubaa9\uc774 \uadf8\ub8f9\ud654\ub418\uc5b4 \ud45c\uc2dc\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"making-things-look-good-with-css\">CSS\ub85c \ubcf4\uae30 \uc88b\uac8c \ub9cc\ub4e4\uae30<\/h3>\n<p>CSS\ub97c \uc0ac\uc6a9\ud558\uba74 \uae00\uaf34 \ud06c\uae30 \ubc0f \ubc30\uacbd\uc0c9\uacfc \uac19\uc740 \uc18d\uc131\uc5d0 \ub300\ud55c \uac12\uc744 \uc9c0\uc815\ud558\uc5ec \uc6f9 \ud398\uc774\uc9c0\uc758 \ud2b9\uc815 \ubd80\ubd84\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc0d8\ud50c \uc571\uc740 \uc778\ud130\ud398\uc774\uc2a4\uac00 \ub9e4\uc6b0 \uae30\ubcf8\uc801\uc774\uae30 \ub54c\ubb38\uc5d0 \uadf8\ub2e4\uc9c0 \uc138\ub828\ub41c \ub514\uc790\uc778\uc774 \ud544\uc694\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc57d\uac04\uc758 \uc2a4\ud0c0\uc77c\uc744 \ub354\ud558\uba74 \uac70\uce5c \ubd80\ubd84\uc744 \ub9e4\ub048\ud558\uac8c \ub2e4\ub4ec\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud83c\udfa8\u2728<\/p>\n<p>\uba3c\uc800, \uc804\uccb4\uc801\uc778 \ub514\uc790\uc778\uc744 \uc815\uc758\ud558\uae30 \uc704\ud574 \ubcf8\uccb4\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">\ubab8<\/span> {\r\n    <span class=\"hljs-selector-tag\">\uc5ec\uc720<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\uc2ec<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\ud45c\uc2dc\ud558\ub2e4<\/span>: <span class=\"hljs-selector-tag\">\uadf8\ub9ac\ub4dc<\/span>;\r\n    <span class=\"hljs-selector-tag\">\ucd5c\uc18c \ub192\uc774<\/span>: 100<span class=\"hljs-selector-tag\">\ube0c\uc774\uc5d0\uc774\uce58<\/span>;\r\n    <span class=\"hljs-selector-tag\">\uadf8\ub9ac\ub4dc \ud15c\ud50c\ub9bf \ud589<\/span>: <span class=\"hljs-selector-tag\">\ucd5c\uc18c \ucf58\ud150\uce20<\/span> 1<span class=\"hljs-selector-tag\">\uc815\ub9d0\ub85c<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>Este CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n<p>\uce74\uc6b4\ud130 \ud589\uc5d0\ub294 \ub098\uba38\uc9c0 \ud14d\uc2a4\ud2b8\uc640 \ucc28\ubcc4\ud654\ub418\ub294 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc774 \uc788\ub294\ub370, \uc8fc\ub85c \ubc30\uacbd\uc744 \ud1b5\ud574 \uc774\ub97c \ud45c\ud604\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-id\">#\uce74\uc6b4\ud130<\/span> {\r\n    <span class=\"hljs-selector-tag\">\uae00\uaf34 \ubaa8\uc74c<\/span>: <span class=\"hljs-selector-tag\">\uc0b0\uc138\ub9ac\ud504<\/span>;\r\n    <span class=\"hljs-selector-tag\">\ubc30\uacbd\uc0c9<\/span>: <span class=\"hljs-selector-id\">#f7f7f7<\/span>;\r\n    <span class=\"hljs-selector-tag\">\ud14d\uc2a4\ud2b8 \uc815\ub82c<\/span>: <span class=\"hljs-selector-tag\">\uc13c\ud130<\/span>;\r\n    <span class=\"hljs-selector-tag\">\ub108\ube44<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\uc2ec<\/span>: 0<span class=\"hljs-selector-class\">.5\uc5e0<\/span> 0;\r\n}\r\n<\/code><\/pre>\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc740 \ucda9\ubd84\ud55c \uacf5\uac04\uc744 \ud655\ubcf4\ud558\uc5ec \uc77d\uae30 \uc26c\uc6b4 \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud558\ub3c4\ub85d \uc2a4\ud0c0\uc77c\uc774 \uc9c0\uc815\ub429\ub2c8\ub2e4. \uce74\uc6b4\ud2b8\uc640 \ud14d\uc2a4\ud2b8\ub97c \uad6c\ubd84\ud558\ub294 \uc120\uc740 \uc2e4\uc81c\ub85c \uc774 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc758 \uc704\ucabd \ud14c\ub450\ub9ac\uc785\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">\ud14d\uc2a4\ud2b8\uc5d0\uc5b4\ub9ac\uc5b4<\/span> {\r\n    <span class=\"hljs-selector-tag\">\ub108\ube44<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\ud0a4<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\uae00\uaf34 \ud06c\uae30<\/span>: 16<span class=\"hljs-selector-tag\">pt<\/span>;\r\n    <span class=\"hljs-selector-tag\">\uc2ec<\/span>: 1<span class=\"hljs-selector-tag\">~\uc5d0<\/span>;\r\n    <span class=\"hljs-selector-tag\">\uc0c1\uc790 \ud06c\uae30<\/span>: <span class=\"hljs-selector-tag\">\ud14c\ub450\ub9ac \uc0c1\uc790<\/span>;\r\n    <span class=\"hljs-selector-tag\">\uac1c\uc694<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\uad6d\uacbd<\/span>: <span class=\"hljs-selector-tag\">\uc5c6\uc74c<\/span>;\r\n    <span class=\"hljs-selector-tag\">\ud14c\ub450\ub9ac-\uc0c1\ub2e8<\/span>: 1<span class=\"hljs-selector-tag\">\ud53d\uc140<\/span> <span class=\"hljs-selector-tag\">\ub2e8\ub2e8\ud55c<\/span> <span class=\"hljs-selector-id\">#999<\/span>;\r\n}<\/code><\/pre>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\uc0ac\uc6a9\uc790 \uc815\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c \uba54\ubaa8 \uc791\uc131 \uc571\uc740 \uc0c1\ub2e8\uc5d0 \uacc4\uc0b0 \ub9c9\ub300\ub97c \ud45c\uc2dc\ud558\uace0, \ud558\ub2e8\uc5d0 \uc804\uccb4 \ud06c\uae30\uc758 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"adding-functionality-with-javascript\">JavaScript\ub85c \uae30\ub2a5 \ucd94\uac00<\/h3>\n<p>\uad6c\uc870\uc640 \uc2a4\ud0c0\uc77c\uc774 \uac16\ucdb0\uc9c0\uba74 \uc774\uc81c \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uac04\ub2e8\ud55c \uc571\uc5d0 \uc2e4\uc81c\ub85c \uae30\ub2a5\uc744 \ubd80\uc5ec\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \ud83d\udee0\ufe0f<\/p>\n<p>\uac00\uc7a5 \uac04\ub2e8\ud55c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uae30 \uc804\uc5d0, \uadf8 \ucf54\ub4dc\ub85c \ubb34\uc5c7\uc744 \ud558\uace0 \uc2f6\uc740\uc9c0 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uc774 \uacbd\uc6b0\uc5d0\ub294 \uba87 \uac00\uc9c0 \uc77c\ubc18\uc801\uc778 \uc694\uad6c \uc0ac\ud56d\ub9cc \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\uc785\ub825\ud55c \ud14d\uc2a4\ud2b8\ub97c \uc800\uc7a5\ud558\uace0 \ud544\uc694\ud560 \ub54c \ub2e4\uc2dc \ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/li>\n<li>\uc2e4\uc2dc\uac04 \ud1b5\uacc4\ub97c \uc81c\uacf5\ud558\uae30 \uc704\ud574 \ubb38\uc790 \uc218\uc640 \ub2e8\uc5b4 \uc218\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4. \ud83d\udcca<\/li>\n<\/ul>\n<p>\ub450 \uac00\uc9c0 \uc694\uad6c \uc0ac\ud56d \ubaa8\ub450 \ubb38\uc11c\uc758 \uc694\uc18c\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uac83\uacfc \uad00\ub828\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc2a4\ud06c\ub9bd\ud2b8\ub294 getElementById \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\ub7ec\ud55c \ub178\ub4dc\uc5d0 \ub300\ud55c \ucc38\uc870\ub97c \uac00\uc838\uc624\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-keyword\">\uc0c1\uc218<\/span> \ub2e8\uc5b4 = <span class=\"hljs-built_in\">\ubb38\uc11c<\/span>.getElementById(<span class=\"hljs-string\">&quot;\ub2e8\uc5b4&quot;<\/span>);\r\n<span class=\"hljs-keyword\">\uc0c1\uc218<\/span> \ubb38\uc790 = <span class=\"hljs-built_in\">\ubb38\uc11c<\/span>.getElementById(<span class=\"hljs-string\">&quot;\ubb38\uc790&quot;<\/span>);\r\n<span class=\"hljs-keyword\">\uc0c1\uc218<\/span> \ud14d\uc2a4\ud2b8\uc5d0\uc5b4\ub9ac\uc5b4 = <span class=\"hljs-built_in\">\ubb38\uc11c<\/span>.getElementById(<span class=\"hljs-string\">&quot;\ud14d\uc2a4\ud2b8&quot;<\/span>);\r\n<\/code><\/pre>\n<p>\ub2e8\uc5b4, \ubb38\uc790, \ud14d\uc2a4\ud2b8\ub294 \ubb38\uc11c\uc5d0\uc11c \uac01\uac01\uc758 \uc694\uc18c\uc5d0 \ub300\ud55c ID\uc774\uba70, HTML \ud30c\uc77c\uc5d0\uc11c id \uc18d\uc131\uc73c\ub85c \uc9c0\uc815\ub429\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c, \ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub420 \ub54c \uc571\uc774 \ubc18\uc751\ud558\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs js\">\ud14d\uc2a4\ud2b8 \uc601\uc5ed.\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ucd94\uac00(<span class=\"hljs-string\">&quot;\uc785\ub825&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">\uae30\ub2a5<\/span>(<span class=\"hljs-params\">\uc5d0\ube0c<\/span>) <\/span>{ \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0.setItem(<span class=\"hljs-string\">&quot;\ud14d\uc2a4\ud2b8&quot;<\/span>, ev.\ub300\uc0c1.\uac12); \uc5c5\ub370\uc774\ud2b8_\uce74\uc6b4\ud2b8(ev.\ub300\uc0c1.\uac12); });\r\n<\/code><\/pre>\n<p>\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub294 \ud2b9\uc815 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c JavaScript\uac00 \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc774 \uacbd\uc6b0, &quot;\uc785\ub825&quot; \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc2e4\ud589\ub418\ub294 \ub9ac\uc2a4\ub108\ub97c textarea \ub178\ub4dc\uc5d0 \uc5f0\uacb0\ud569\ub2c8\ub2e4. \uc989, \ub204\uad70\uac00\uac00 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uacfc \uc0c1\ud638 \uc791\uc6a9\ud560 \ub54c\uc785\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c, ev.target.value\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 textarea\uc758 \ud604\uc7ac \ub0b4\uc6a9\uc744 \uc800\uc7a5\ud558\uae30 \uc704\ud574 Web Storage API\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774 \uad6c\uc870\uc5d0\uc11c ev\ub294 \ub9ac\uc2a4\ub108\ub97c \ud2b8\ub9ac\uac70\ud55c \uc774\ubca4\ud2b8\ub97c \ub098\ud0c0\ub0b4\ub294 \uac1d\uccb4\uc774\uace0, ev.target\uc740 \uc774\ubca4\ud2b8\ub97c \uc218\uc2e0\ud55c \ub178\ub4dc\uc774\uace0, ev.target.value\ub294 \ud574\ub2f9 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc758 \ud14d\uc2a4\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n<p>setItem \uba54\uc11c\ub4dc\ub294 \ub450 \uac1c\uc758 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ub370\uc774\ud130\uc640 \uc5f0\uacb0\ud560 \ud0a4 \uc774\ub984\uacfc \uc800\uc7a5\ud560 \uc2e4\uc81c \ub370\uc774\ud130\uc785\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c, \ub3d9\uc77c\ud55c \ud14d\uc2a4\ud2b8\ub97c \uc804\ub2ec\ud558\uc5ec update_counts()\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uc7a0\uc2dc \ud6c4\uc5d0 \uadf8 \uae30\ub2a5\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \ud14d\uc2a4\ud2b8\ub97c \uc800\uc7a5\ud588\uc73c\ubbc0\ub85c \uc571\uc744 \uc5f4\uac70\ub098 \ub2e4\uc2dc \ub85c\ub4dc\ud560 \ub54c \ub2e4\uc2dc \ub85c\ub4dc\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\ub978 \ub9ac\uc2a4\ub108\ub97c \uc0ac\uc6a9\ud558\uba74 \uc774\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-built_in\">\ucc3d\ubb38<\/span>.addEventListener(<span class=\"hljs-string\">&quot;\uc9d0&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">\uae30\ub2a5<\/span>(<span class=\"hljs-params\">\uc5d0\ube0c<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\">\ubcc0\uc218<\/span> \ud14d\uc2a4\ud2b8 = \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0.getItem(<span class=\"hljs-string\">&quot;\ud14d\uc2a4\ud2b8&quot;<\/span>); \ud14d\uc2a4\ud2b8 \uc601\uc5ed.\uac12 = \ud14d\uc2a4\ud2b8; \uc5c5\ub370\uc774\ud2b8_\uce74\uc6b4\ud2b8(\ud14d\uc2a4\ud2b8); });\r\n<\/code><\/pre>\n<p>\uc774 \ub9ac\uc2a4\ub108\ub294 \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ucd5c\uc0c1\uc704 \ud45c\ud604\uc778 window \uac1d\uccb4\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \ub85c\ub4dc \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4. \ucc3d\uc774 \ub85c\ub4dc\ub418\uba74 getItem()\uc744 \ud638\ucd9c\ud558\uba74 \ub85c\uceec \uc800\uc7a5\uc18c\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \uac12\uc774 \ubc18\ud658\ub429\ub2c8\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c \uc774 \ucf54\ub4dc\ub294 textarea\uc758 \uac12\uc744 \ub85c\ub4dc\ub41c \ud14d\uc2a4\ud2b8\ub85c \uc124\uc815\ud558\uace0 \uc704\uc758 \ub9ac\uc2a4\ub108\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc774 \ud14d\uc2a4\ud2b8\ub85c update_counts()\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.<\/p>\n<p>\ub098\uba38\uc9c0 \uc791\uc5c5\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 update_counts() \ud568\uc218\uc5d0\uc11c \uc218\ud589\ub429\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">\uae30\ub2a5<\/span>\u00a0<span class=\"hljs-title\">\uc5c5\ub370\uc774\ud2b8 \ud69f\uc218<\/span>(<span class=\"hljs-params\">\ud14d\uc2a4\ud2b8<\/span>) <\/span>{ \ubb38\uc790.\ub0b4\ubd80HTML = \ud14d\uc2a4\ud2b8.\uae38\uc774; \ub2e8\uc5b4.innerHTML = \ud14d\uc2a4\ud2b8.split(<span class=\"hljs-string\">' '<\/span>).\uae38\uc774; }\r\n<\/code><\/pre>\n<p>\ud14d\uc2a4\ud2b8 \uc601\uc5ed\uacfc \ub2ec\ub9ac \uc77c\ubc18 \ud14d\uc2a4\ud2b8\uc5d0\ub294 \uac12 \uc18d\uc131\uc774 \uc5c6\uc73c\ubbc0\ub85c \ub300\uc2e0 innerHTML \uc18d\uc131\uc744 \uc124\uc815\ud569\ub2c8\ub2e4. \ubb38\uc790\uc5f4\uc758 length \uc18d\uc131\uc740 \ubb38\uc790 \uc218\ub97c \uc54c\ub824\uc8fc\ub294 \uac04\ub2e8\ud55c \uc77d\uae30 \uc804\uc6a9 \uc18d\uc131\uc785\ub2c8\ub2e4.<\/p>\n<p>text.split(&#039; &#039;)\uc740 \uacf5\ubc31 \ubb38\uc790\uc5d0\uc11c \ubb38\uc790\uc5f4\uc744 \ubd84\ud560\ud558\uc5ec \uacb0\uacfc\ub97c \ubb38\uc790\uc5f4 \ubc30\uc5f4\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4. \ubb38\uc790\uc5f4\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \ubc30\uc5f4\uc5d0\ub3c4 \uae38\uc774 \uc18d\uc131\uc774 \uc788\ub294\ub370, \uc774\ub97c \ud1b5\ud574 \ubc30\uc5f4\uc5d0 \uc788\ub294 \uc694\uc18c\uc758 \uac1c\uc218\ub97c \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ud558\uc9c0\ub9cc \uc774 \ucf54\ub4dc\ub97c \ud14c\uc2a4\ud2b8\ud558\uba74 \uba87 \uac00\uc9c0 \uc624\ub958\uac00 \ubc1c\uacac\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\ub2e8\uc5b4 \uc8fc\uc704\uc5d0 \uacf5\ubc31 \ubb38\uc790\uac00 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \ud55c \uc904\uc5d0 \uc788\ub294 \ub2e8\uc5b4 \uc790\uccb4\ub294 \uc62c\ubc14\ub974\uac8c \uacc4\uc0b0\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>\n<li>\ud14d\uc2a4\ud2b8\uac00 \uc804\ud600 \uc5c6\uc73c\uba74 \ubd84\ud560 \ubc29\uc2dd \ub54c\ubb38\uc5d0 \ub2e8\uc5b4 \ud558\ub098\ub9cc \ubcf4\uace0\ub429\ub2c8\ub2e4.<\/li>\n<\/ol>\n<p>\uccab \ubc88\uc9f8 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub824\uba74 \uacf5\ubc31 \ub300\uc2e0 \uc815\uaddc \ud45c\ud604\uc2dd(\\s\ub294 &quot;\uacf5\ubc31 \ubb38\uc790&quot;\ub97c \uc758\ubbf8)\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubd84\ud560\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub450 \ubc88\uc9f8 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub824\uba74 \uacb0\uacfc\uc5d0\uc11c \ube48 \ubb38\uc790\uc5f4\uc744 \ud544\ud130\ub9c1\ud569\ub2c8\ub2e4.<\/p>\n<pre><code class=\"hljs js\">    \ub2e8\uc5b4.innerHTML = \ud14d\uc2a4\ud2b8.split(<span class=\"hljs-regexp\">\/\\\uc5d0\uc2a4\/<\/span>).\ud544\ud130(<span class=\"hljs-function\"><span class=\"hljs-keyword\">\uae30\ub2a5<\/span>(<span class=\"hljs-params\">N<\/span>) <\/span>{ <span class=\"hljs-keyword\">\ubc18\ud488<\/span> n != <span class=\"hljs-string\">''<\/span>; }).\uae38\uc774;\r\n<\/code><\/pre>\n<p>\ud574\ub2f9 \uc904\uc744 \uc644\uc804\ud788 \uc774\ud574\ud558\uc9c0 \ubabb\ud558\ub294 \uacbd\uc6b0 MDN \ud398\uc774\uc9c0\ub97c \ud655\uc778\ud558\uc138\uc694. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/split\" target=\"_blank\" rel=\"noopener noreferrer\">\ub098\ub258\ub2e4<\/a> \uadf8\ub9ac\uace0 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">\ud544\ud130<\/a>.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\uc815\ud655\ud55c \ubb38\uc790\uc640 \ub2e8\uc5b4 \uc218\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uc0d8\ud50c \ud14d\uc2a4\ud2b8\uac00 \uc788\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<hr \/>\n<p>\ub2e8 \uba87 \uac1c\uc758 \ud30c\uc77c\ub9cc\uc73c\ub85c \uc5ec\ub7ec \uac00\uc9c0 \uc720\uc6a9\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uac04\ub2e8\ud55c \uba54\ubaa8 \uc571\uc744 \ud655\uc7a5\ud558\uc5ec \ub354 \ub9ce\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"mentions\">window.location \uc18d\uc131<\/a> localStorage.setItem\uc5d0 \uc804\ub2ec\ud558\ub294 \uc774\ub984\uc744 \ubcc0\uacbd\ud558\uc5ec \ud604\uc7ac URL\uc744 \uac80\uc0c9\ud558\uace0 \uc5ec\ub7ec \ub178\ud2b8\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ud83d\uddd2\ufe0f\ud83c\udf0d<\/p>","protected":false},"excerpt":{"rendered":"<p>\uccab \ubc88\uc9f8 \uc6f9 \uc571\uc744 \ub9cc\ub4e4\uace0 \ub2e8\uc5b4 \uce74\uc6b4\ud130\ub85c \uba54\ubaa8\ub97c \uc800\uc7a5\ud558\uc138\uc694. \uc27d\uace0 \ube60\ub974\uac8c, \ubb34\ub8cc\ub85c \ubc30\uc6cc\ubcf4\uc138\uc694! \ud83c\udf10\ud83d\udd8b\ufe0f\u2728<\/p>","protected":false},"author":1,"featured_media":49198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":39,"jnews-multi-image_gallery":[],"jnews_single_post":[],"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":[],"footnotes":""},"categories":[1435],"tags":[1445,1558],"class_list":["post-32655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/posts\/32655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/comments?post=32655"}],"version-history":[{"count":0,"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/posts\/32655\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/media\/49198"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/media?parent=32655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/categories?post=32655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/ko\/wp-json\/wp\/v2\/tags?post=32655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}