{"id":6646,"date":"2025-01-11T12:34:07","date_gmt":"2025-01-11T12:34:07","guid":{"rendered":"https:\/\/howtogeek.blog\/ko\/?p=6646"},"modified":"2025-01-11T12:34:07","modified_gmt":"2025-01-11T12:34:07","slug":"create-your-first-web-application-a-beginners-guide-to-building-a-simple-notes-app-and-word-counter","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/ko\/create-your-first-web-application-a-beginners-guide-to-building-a-simple-notes-app-and-word-counter\/","title":{"rendered":"\uccab \ubc88\uc9f8 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub9cc\ub4e4\uae30: \uac04\ub2e8\ud55c \ub178\ud2b8 \uc571\uacfc \ub2e8\uc5b4 \uce74\uc6b4\ud130\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ucd08\ubcf4\uc790 \uac00\uc774\ub4dc"},"content":{"rendered":"<p>\uc555\ub3c4\uc801\uc778 \uc5b8\uc5b4\uc640 \ud504\ub808\uc784\uc6cc\ud06c \uc120\ud0dd \uc18d\uc5d0\uc11c \ucf54\ub529 \uc5ec\uc815\uc744 \uc2dc\uc791\ud558\ub294 \uac83\uc740 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. AI\uac00 \ubaa8\ub4e0 \uac83\uc744 \ucc98\ub9ac\ud558\ub3c4\ub85d \ud558\ub294 \uac83\ub3c4 \uc0dd\uac01\ud574 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4! \uadf8\ub7fc\uc5d0\ub3c4 \ubd88\uad6c\ud558\uace0 \uc6f9 \ud504\ub85c\uadf8\ub798\ubc0d\uc740 \ud765\ubbf8\uc9c4\uc9c4\ud558\uace0, \uc811\uadfc\ud558\uae30 \uc27d\uace0, \uc644\uc804\ud788 \ubb34\ub8cc\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4!<\/p>\n<h2 id=\"what-youll-build\">\ub2f9\uc2e0\uc774 \ub9cc\ub4e4 \uac83<\/h2>\n<p>\uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c\ub294 \ud14d\uc2a4\ud2b8 \ub178\ud2b8\ub97c \uc800\uc7a5\ud558\uace0 \ud574\ub2f9 \ub178\ud2b8\uc5d0 \uc788\ub294 \ubb38\uc790\uc640 \ub2e8\uc5b4\ub97c \uc138\ub294 \uac04\ub2e8\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub370\uc774\ud130\ub97c \uc9c0\uc18d\uc801\uc73c\ub85c \uc800\uc7a5\ud558\uc5ec \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c \uace0\uce58\uac70\ub098 \ub2e4\uc2dc \uc5f0 \ud6c4\uc5d0\ub3c4 \ud14d\uc2a4\ud2b8\ub97c \uac80\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc8fc\uc18c, URL \ub610\ub294 \uae30\ud0c0 \uc911\uc694\ud55c \ud14d\uc2a4\ud2b8\uc5d0 \ub300\ud55c \ube60\ub978 \uc561\uc138\uc2a4\ub97c \uc720\uc9c0\ud558\uae30 \uc704\ud55c \uc2e4\uc6a9\uc801\uc778 \uc194\ub8e8\uc158\uc785\ub2c8\ub2e4.<\/p>\n<figure class=\"wp-block-image\"><img alt=\"\uc77c\uc815 \ud56d\ubaa9\uacfc URL \ubaa9\ub85d\uc744 \ud3ec\ud568\ud55c \uba54\ubaa8\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uc6f9\uc571\uc758 \uc608\uc785\ub2c8\ub2e4.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" title=\"\uc77c\uc815 \ud56d\ubaa9\uacfc URL \ubaa9\ub85d\uc744 \ud3ec\ud568\ud55c \uba54\ubaa8\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uc6f9\uc571\uc758 \uc608\uc785\ub2c8\ub2e4.\" width=\"960\"\/><\/figure>\n<p>\ub610\ud55c, \uc571\uc740 \ubb38\uc790\uc640 \ub2e8\uc5b4 \uc218\ub97c \ucd94\uc801\ud558\uc5ec \ubb38\uc790\uc5f4 \uc870\uc791\uc5d0 \ub300\ud55c \ud6cc\ub96d\ud55c \uc18c\uac1c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub514\uc790\uc778\uc774 \uae30\ubcf8\uc801\uc774\uc9c0\ub9cc, \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uae30\ubcf8\uc801\uc778 \uc6f9 \uc571 \uac1c\ubc1c \uae30\uc220\uc744 \uc81c\uacf5\ud558\uc5ec \ucf54\ub529\uc5d0\uc11c \ubc29\ub300\ud55c \uac00\ub2a5\uc131\uc744 \uc5f4\uc5b4\uc90d\ub2c8\ub2e4.<\/p>\n<h2 id=\"how-youll-build-it\">\uc5b4\ub5bb\uac8c \ub9cc\ub4e4 \uac83\uc778\uac00<\/h2>\n<p>\uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc0c1\ub2f9\ud788 \ub2e4\uc591\ud560 \uc218 \uc788\uc9c0\ub9cc \uc77c\ubc18\uc801\uc73c\ub85c HTML, CSS, JavaScript\ub77c\ub294 \uc138 \uac00\uc9c0 \ud544\uc218 \uae30\uc220\uc744 \ud1b5\ud569\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uac01 \uad6c\uc131 \uc694\uc18c\ub294 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \uc911\uc694\ud55c \uae30\ub2a5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li><strong>HTML:<\/strong> \uc774\uac83\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\ub85c, \ucf58\ud150\uce20\uac00 \uc5b4\ub5bb\uac8c \uad6c\uc131\ub418\ub294\uc9c0\ub97c \ud655\ub9bd\ud569\ub2c8\ub2e4. HTML\uc740 \ud14d\uc2a4\ud2b8\uac00 \ubb38\ub2e8\uc778\uc9c0, \uc81c\ubaa9\uc778\uc9c0, \ubaa9\ub85d \ud56d\ubaa9\uc778\uc9c0 \uc815\uc758\ud569\ub2c8\ub2e4.<\/li>\n<li><strong>CSS:<\/strong> Cascading Style Sheets\ub294 \ucf58\ud150\uce20\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \ucd94\uac00\ud558\uc5ec \uc0c9\uc0c1, \uae00\uaf34 \ubc0f \ub808\uc774\uc544\uc6c3\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc694\uc18c\ub97c \uad75\uac8c \ud45c\uc2dc\ud558\uace0, \ud14c\ub450\ub9ac\ub97c \uc870\uc815\ud558\uace0, \ud654\uba74\uc5d0\uc11c \uc694\uc18c\ub97c \ubc30\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<li><strong>JavaScript:<\/strong> \uc774 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uae30\ub2a5\uc744 \uc8fc\uc785\ud558\ub294 \ub370 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. JavaScript\ub294 \uc694\uc18c\ub97c \ud45c\uc2dc\/\uc228\uae30\uac70\ub098 \uac8c\uc784\uacfc \uac19\uc740 \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \uac83\uacfc \uac19\uc740 \ub300\ud654\ud615 \uacbd\ud5d8\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img 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.\" class=\"wp-image\" decoding=\"async\" height=\"734\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" title=\"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\"\/><\/figure>\n<h2 id=\"the-app-structure\">\uc571 \uad6c\uc870<\/h2>\n<p>\uc5ec\ub7ec\ubd84\uc774 \ub9cc\ub4e4\ub824\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 <code>index.html<\/code>, <code>styles.css<\/code>, \uc758 \uc138 \uac1c\uc758 \uac04\ub2e8\ud55c \ud30c\uc77c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4 <code>script.js<\/code>.<\/p>\n<p>\uc774 \uc571\uc744 \uc2e4\ud589\ud558\uae30 \uc704\ud55c \uace0\uae09 \uc694\uad6c \uc0ac\ud56d\uc740 \uc5c6\uc2b5\ub2c8\ub2e4. \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub9cc \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4. \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc571\uc774\ubbc0\ub85c PHP\ub098 \ub85c\uceec \uc11c\ubc84\uc640 \uac19\uc740 \ubc31\uc5d4\ub4dc \uc2a4\ud06c\ub9bd\ud305 \uc5b8\uc5b4\uac00 \ud544\uc694 \uc5c6\uc2b5\ub2c8\ub2e4. \uc644\ub8cc \ud6c4 <code>index.html<\/code>\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc5f4\uae30\ub9cc \ud558\uba74 \uc571\uc774 \uc791\ub3d9\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uc571\uc740 \uc6f9 \uc800\uc7a5\uc18c API\ub97c \ud65c\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\ub97c \uc800\uc7a5\ud558\uace0, JavaScript\uac00 \ud30c\uc77c \uc2dc\uc2a4\ud15c\uc5d0 \uc811\uadfc\ud560 \uc218 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \ub514\uc2a4\ud06c \ud30c\uc77c\uc5d0 \uc4f8 \ud544\uc694 \uc5c6\uc774 \uc815\ubcf4\ub97c \ubcf4\uad00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"how-to-build-the-note-taker\">\ub178\ud2b8\ud14c\uc774\ucee4\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95<\/h2>\n<p>\ub3d9\uc77c\ud55c \ub514\ub809\ud1a0\ub9ac\uc5d0 \ud544\uc694\ud55c \uc138 \uac1c\uc758 \ud30c\uc77c\uc744 \ub9cc\ub4dc\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud569\ub2c8\ub2e4. \ub610\ub294 <a href=\"https:\/\/github.com\/bobbykjack\/text\" target=\"_blank\">\uc774 GitHub \uc800\uc7a5\uc18c<\/a> \uc5d0\uc11c \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4 .<\/p>\n<h3 id=\"building-the-structure-with-html\">HTML\ub85c \uad6c\uc870 \uad6c\ucd95\ud558\uae30<\/h3>\n<p>\uc774 <code>index.html<\/code>\ud30c\uc77c\uc740 \uc571\uc758 \ucf58\ud150\uce20 \uad6c\uc870\ub97c \ubc30\uce58\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 CSS \ubc0f JavaScript \ud30c\uc77c\uc5d0 \ub300\ud55c \ucc38\uc870\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc5b4 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ub97c \ubcd1\ud569\ud558\uc5ec \ub9e4\ub044\ub7ec\uc6b4 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ubaa8\ub4e0 HTML \ubb38\uc11c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc8fc\uc694 \ud504\ub808\uc784\uc6cc\ud06c\ub294 \uba54\ud0c0\ub370\uc774\ud130\uac00 \ud3ec\ud568\ub41c \ud5e4\ub4dc \uc139\uc158\uacfc \ucf58\ud150\uce20\uac00 \ud3ec\ud568\ub41c \ubcf8\ubb38\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>&lt;!DOCTYPE html&gt;<\/span><br \/>\n<span>&lt;html&gt;<\/span><br \/>\n<span>&lt;head&gt;<\/span><br \/>\n<span>...&lt;\/head&gt;<\/span><br \/>\n<span>&lt;body&gt;<\/span><br \/>\n<span>...&lt;\/body&gt;<\/span><br \/>\n<span>&lt;\/html&gt;<\/span><br \/>\n<\/code><\/p>\n<p>\ud5e4\ub4dc \uc139\uc158\uc5d0\ub294 \ud398\uc774\uc9c0 \uc81c\ubaa9(\ube0c\ub77c\uc6b0\uc800\uc758 \uc81c\ubaa9 \ud45c\uc2dc\uc904\uc5d0 \ud45c\uc2dc\ub428)\uacfc \ud30c\uc77c \ub9c1\ud06c\ub97c \ud3ec\ud568\ud55c \uac04\ub7b5\ud55c \uba54\ud0c0\ub370\uc774\ud130\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4 <code>styles.css<\/code>.<\/p>\n<p> <code><br \/>\n<span>&lt;title&gt;Text&lt;\/title&gt;<\/span><br \/>\n<span>&lt;link rel=\"stylesheet\"href=\"styles.css\"\/&gt;<\/span><br \/>\n<\/code><\/p>\n<p>\ubcf8\ubb38\uc740 \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c\ub97c \ud3ec\ud568\ud558\uc5ec \ub354 \uc790\uc138\ud569\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>&lt;div id=\"counter\"&gt;<\/span><br \/>\n<span>words: &lt;span id=\"words\"&gt;0&lt;\/span&gt;<\/span><br \/>\n<span>\/ characters: &lt;span id=\"chars\"&gt;0&lt;\/span&gt;<\/span><br \/>\n<span>&lt;\/div&gt;<\/span><br \/>\n<span>&lt;textarea id=\"text\"autofocus=\"1\"&gt;&lt;\/textarea&gt;<\/span><br \/>\n<span>&lt;script src=\"script.js\"&gt;&lt;\/script&gt;<\/span><br \/>\n<\/code><\/p>\n<p>&#8220;counter&#8221;\ub85c \uc2dd\ubcc4\ub41c \uc694\uc18c <code>div<\/code>\ub294 \ub2e8\uc5b4\uc640 \ubb38\uc790 \uc218\ub97c \ubcf4\uad00\ud569\ub2c8\ub2e4. \ub9e8 \uc704\uc5d0 \ub0a8\uc544 \uc788\uc73c\uba70 \ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub428\uc5d0 \ub530\ub77c \ub3d9\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc18d\uc131\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4 <code>id<\/code>. \uc18d\uc131\uc758 \uace0\uc720\ud55c \uac12\uc740 \uc774\ub7ec\ud55c \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uace0 \uae30\ub2a5\uc744 \ubaa9\ud45c\ub85c \uc0bc\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<p>\uc774\ub294 <code>textarea<\/code>\uc0ac\uc6a9\uc790\uac00 \uc18d\uc131\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8\ub97c \uc785\ub825\ud560 \uc218 \uc788\ub294 \uc601\uc5ed\uc744 \uc81c\uacf5\ud558\uc5ec <code>autofocus<\/code>\ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \uc785\ub825\ud560 \uc900\ube44\uac00 \ub418\ub3c4\ub85d \ud569\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c HTML\uc740 \ud30c\uc77c\uc744 \ucc38\uc870\ud569\ub2c8\ub2e4 <code>script.js<\/code>.<\/p>\n<p>\uc774 \uc2dc\uc810\uc5d0\uc11c <code>index.html<\/code>\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc5fd\ub2c8\ub2e4. \uc544\uc9c1 \uc791\ub3d9\ud558\uc9c0 \uc54a\uc744 \uc218 \uc788\uace0 \uc81c\ub300\ub85c \ubcf4\uc774\uc9c0 \uc54a\uc744 \uc218\ub3c4 \uc788\uc9c0\ub9cc \uac01 \ub2e8\uacc4\uc5d0\uc11c \uc9c4\ud589 \uc0c1\ud669\uc744 \ud655\uc778\ud558\ub294 \uac83\uc774 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<figure class=\"wp-block-image\"><img alt=\"\uae30\ubcf8 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c \ub178\ud2b8 \uc791\uc131 \uc6f9 \uc571\uc758 \ubaa8\uc2b5. \ubaa8\ub4e0 \uac83\uc774 \uc67c\ucabd \uc0c1\ub2e8 \ubaa8\uc11c\ub9ac\uc5d0 \ubaa8\uc5ec \uc788\uc2b5\ub2c8\ub2e4.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" title=\"\uae30\ubcf8 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c \ub178\ud2b8 \uc791\uc131 \uc6f9 \uc571\uc758 \ubaa8\uc2b5. \ubaa8\ub4e0 \uac83\uc774 \uc67c\ucabd \uc0c1\ub2e8 \ubaa8\uc11c\ub9ac\uc5d0 \ubaa8\uc5ec \uc788\uc2b5\ub2c8\ub2e4.\" width=\"960\"\/><\/figure>\n<h3 id=\"making-things-look-good-with-css\">CSS\ub85c \uc0ac\ubb3c\uc744 \ubcf4\uae30 \uc88b\uac8c \ub9cc\ub4e4\uae30<\/h3>\n<p>\uc774 \uae30\ubcf8 \uc571\uc740 \uad11\ubc94\uc704\ud55c \ub514\uc790\uc778 \uc870\uc815\uc774 \ud544\uc694\ud558\uc9c0 \uc54a\uc9c0\ub9cc, \uc57d\uac04\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uc5ec \ub808\uc774\uc544\uc6c3\uc744 \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800, \uc804\ubc18\uc801\uc778 \ubaa8\uc2b5\uc744 \uc124\uba85\ud558\uae30 \uc704\ud574 \ucc28\uccb4 \uc2a4\ud0c0\uc77c\uc744 \ud655\ub9bd\ud569\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>body {<\/span><br \/>\n<span> margin: 0;<\/span><br \/>\n<span> padding: 0;<\/span><br \/>\n<span> display: grid;<\/span><br \/>\n<span> min-height: 100vh;<\/span><br \/>\n<span> grid-template-rows: min-content 1fr;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<p>\uc774 CSS\ub294 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\" target=\"_blank\">\uadf8\ub9ac\ub4dc \ub808\uc774\uc544\uc6c3\uc744<\/a> \uc0ac\uc6a9\ud558\uc5ec \ud14d\uc2a4\ud2b8 \uc601\uc5ed \uc704\uc758 \uc881\uc740 \ud589\uc5d0 \ub2e8\uc5b4\uc640 \ubb38\uc790 \uc218\ub97c \ubc30\uc5f4\ud569\ub2c8\ub2e4. \uc774 <code>grid-template-rows<\/code>\uc18d\uc131\uc740 \uce74\uc6b4\ud2b8 \ud589\uc774 \uac00\ub2a5\ud55c \uac00\uc7a5 \uc801\uc740 \uacf5\uac04\uc744 \ucc28\uc9c0\ud574\uc57c \ud558\uace0(min-content) \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc774 \ub098\uba38\uc9c0 \uacf5\uac04\uc744 \ucc44\uc6cc\uc57c \ud55c\ub2e4\uace0 \uacb0\uc815\ud569\ub2c8\ub2e4(1fr).<\/p>\n<p>\uce74\uc6b4\ud130 \ud589\uc740 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uacfc \uad6c\ubcc4\ud558\uae30 \uc704\ud574 \uc8fc\ub85c \ubc30\uacbd\uc744 \ud1b5\ud574 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>#counter {<\/span><br \/>\n<span> font-family: sans-serif;<\/span><br \/>\n<span> background-color: #f7f7f7;<\/span><br \/>\n<span> text-align: center;<\/span><br \/>\n<span> width: 100%;<\/span><br \/>\n<span> padding: 0 0.5em 0;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<p>\ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc740 \ud14d\uc2a4\ud2b8\ub97c \uc77d\uae30 \uc27d\uac8c \ud558\uae30 \uc704\ud574 \uc2a4\ud0c0\uc77c\uc774 \uc9c0\uc815\ub418\uc5b4 \uc788\uc73c\uba70 \uc801\uc808\ud55c \uc5ec\ubc31\uc774 \ud5c8\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>textarea {<\/span><br \/>\n<span> width: 100%;<\/span><br \/>\n<span> height: 100%;<\/span><br \/>\n<span> font-size: 16pt;<\/span><br \/>\n<span> padding: 1em;<\/span><br \/>\n<span> box-sizing: border-box;<\/span><br \/>\n<span> outline: 0;<\/span><br \/>\n<span> border: none;<\/span><br \/>\n<span> border-top: 1px solid #999;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"\uc0ac\uc6a9\uc790 \uc815\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c \ub178\ud2b8 \ud544\uae30 \uc571\uc740 \uc0c1\ub2e8\uc5d0 \uce74\uc6b4\ud130 \ub9c9\ub300\ub97c \ud45c\uc2dc\ud558\uace0 \uadf8 \uc544\ub798\uc5d0 \uc804\uccb4 \ud06c\uae30\uc758 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" title=\"\uc0ac\uc6a9\uc790 \uc815\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud55c \ub178\ud2b8 \ud544\uae30 \uc571\uc740 \uc0c1\ub2e8\uc5d0 \uce74\uc6b4\ud130 \ub9c9\ub300\ub97c \ud45c\uc2dc\ud558\uace0 \uadf8 \uc544\ub798\uc5d0 \uc804\uccb4 \ud06c\uae30\uc758 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.\" width=\"960\"\/><\/figure>\n<h3 id=\"adding-functionality-with-javascript\">JavaScript\ub85c \uae30\ub2a5 \ucd94\uac00<\/h3>\n<p>\uae30\ucd08\uac00 \ub9c8\ub828\ub418\uc5c8\uc73c\ub2c8, \uc774\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uae30\ub2a5\uc744 \uc8fc\uc785\ud560 \ucc28\ub840\uc785\ub2c8\ub2e4. \ubc14\ub85c, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\uc81c\ub85c \uad6c\ub3d9\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4!<\/p>\n<p>\ucf54\ub529\uc5d0 \ub4e4\uc5b4\uac00\uae30 \uc804\uc5d0, \uc758\ub3c4\ud55c \uae30\ub2a5\uc744 \uac1c\ub7b5\uc801\uc73c\ub85c \uc124\uba85\ud558\ub294 \uac83\uc774 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ubaa9\ud45c\uc5d0 \uc9d1\uc911\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\uc785\ub825\ud55c \ud14d\uc2a4\ud2b8\ub97c \uc720\uc9c0\ud558\uace0 \ub2e4\uc2dc \ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/li>\n<li>\ub3d9\uc801\uc73c\ub85c \ubb38\uc790 \ubc0f \ub2e8\uc5b4 \uc218\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<p>\uc774\ub7ec\ud55c \uae30\ub2a5\uc740 \ud2b9\uc815 \ubb38\uc11c \uc694\uc18c\uc5d0 \ub300\ud55c \uc5c5\ub370\uc774\ud2b8\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub2e4\uc74c <code>getElementById<\/code>\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<p> <code><br \/>\n<span>const words = document.getElementById(\"words\");<\/span><br \/>\n<span>const chars = document.getElementById(\"chars\");<\/span><br \/>\n<span>const textarea = document.getElementById(\"text\");<\/span><br \/>\n<\/code><\/p>\n<p>\uc5ec\uae30\uc5d0\uc11c, <code>words<\/code>, <code>chars<\/code>, \ubc0f \ub294 <code>textarea<\/code>\ud574\ub2f9 \ubb38\uc11c\uc758 \uc139\uc158\uc5d0 \ud574\ub2f9\ud558\uba70 ID \uc18d\uc131\uc73c\ub85c \uc2dd\ubcc4\ub429\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c, \ud14d\uc2a4\ud2b8\uac00 \ubcc0\uacbd\ub418\uba74 \uc571\uc774 \uc751\ub2f5\ud558\ub3c4\ub85d \uc124\uc815\ud558\uc5ec \uc0c1\ud638 \uc791\uc6a9 \uae30\ub2a5\uc744 \ub3c4\uc785\ud569\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>textarea.addEventListener(\"input\", function(ev) {<\/span><br \/>\n<span> localStorage.setItem(\"text\", ev.target.value);<\/span><br \/>\n<span> update_counts(ev.target.value);<\/span><br \/>\n<span>});<\/span><br \/>\n<\/code><\/p>\n<p>\uc774 <code>addEventListener<\/code>\ubc29\ubc95\uc740 \uc9c0\uc815\ub41c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud2b8\ub9ac\uac70\ud560 \ud568\uc218\ub97c \ubc14\uc778\ub529\ud569\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 \uc0ac\uc6a9\uc790\uac00 \ud14d\uc2a4\ud2b8 \uc601\uc5ed\uacfc \uc0c1\ud638 \uc791\uc6a9\ud558\uba74 &#8220;\uc785\ub825&#8221; \uc774\ubca4\ud2b8\uac00 \ud568\uc218\ub97c \ud2b8\ub9ac\uac70\ud569\ub2c8\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc73c\ub85c, Web Storage API\ub97c \uc0ac\uc6a9\ud558\uc5ec textarea\uc758 \ud604\uc7ac \ub0b4\uc6a9\uc744 \ubcf4\uc874\ud558\uace0, .\ub97c \ud1b5\ud574 \uc561\uc138\uc2a4\ud569\ub2c8\ub2e4 <code>ev.target.value<\/code>. \uc774 <code>setItem<\/code>\uba54\uc11c\ub4dc\ub294 \uc800\uc7a5\ud560 \ub370\uc774\ud130\uc640 \ud0a4\ub97c \uc5f0\uacb0\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc571\uc774 \ucd08\uae30\ud654\ub418\uac70\ub098 \uc0c8\ub85c \uace0\uce68\ub420 \ub54c \ud14d\uc2a4\ud2b8\uac00 \ub85c\ub4dc\ub418\ub3c4\ub85d \ud558\ub824\uba74 \ub2e4\ub978 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00\ud558\uc138\uc694.<\/p>\n<p> <code><br \/>\n<span>window.addEventListener(\"load\", function(ev) {<\/span><br \/>\n<span> var text = localStorage.getItem(\"text\");<\/span><br \/>\n<span> textarea.value = text;<\/span><br \/>\n<span> update_counts(text);<\/span><br \/>\n<span>});<\/span><br \/>\n<\/code><\/p>\n<p>\uc774 \ub9ac\uc2a4\ub108\ub294 \ucc3d\uc758 \ub85c\ub4dc \uc774\ubca4\ud2b8\uc5d0 \uc751\ub2f5\ud569\ub2c8\ub2e4. \ucc3d\uc774 \ub85c\ub4dc\ub418\uba74 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \uac80\uc0c9\ud558\uace0 \uadf8\uc5d0 \ub530\ub77c textarea\uc758 \uac12\uc744 \uc124\uc815\ud558\uace0 <code>update_counts()<\/code>\ub2e8\uc5b4\uc640 \ubb38\uc790 \uc218\ub97c \uc0c8\ub85c \uace0\uce69\ub2c8\ub2e4.<\/p>\n<p>\ub098\uba38\uc9c0 \uae30\ub2a5\uc740 <code>update_counts()<\/code>\ub2e4\uc74c\uacfc \uac19\uc740 \ud568\uc218\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p> <code><br \/>\n<span>function update_counts(text) {<\/span><br \/>\n<span> chars.innerHTML = text.length;<\/span><br \/>\n<span> words.innerHTML = text.split(' ').length;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<p>textarea\uc640 \ub2ec\ub9ac \uc77c\ubc18 \ud14d\uc2a4\ud2b8\uc5d0\ub294 value \uc18d\uc131\uc774 \uc5c6\uc73c\ubbc0\ub85c <code>innerHTML<\/code>\ub300\uc2e0 \uc18d\uc131\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. <code>length<\/code>\ubb38\uc790\uc5f4\uc758 \uc18d\uc131\uc740 \ucd1d \ubb38\uc790 \uc218\ub97c \uac80\uc0c9\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud14d\uc2a4\ud2b8\ub97c \ub2e8\uc5b4\ub85c \ub098\ub204\ub824\uba74 \ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4 <code>text.split(' ')<\/code>. \uc774\ub294 \ubb38\uc790\uc5f4\uc744 \uac01 \uacf5\ubc31 \ubb38\uc790\ub85c \ub098\ub204\uc5b4 \ub2e8\uc5b4 \ubc30\uc5f4\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uacb0\uacfc \ubc30\uc5f4\uc758 length \uc18d\uc131\uc740 \ub2e8\uc5b4 \uc218\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud558\uc9c0\ub9cc \uc774 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \uba87 \uac00\uc9c0 \ubb38\uc81c\uc5d0 \uc9c1\uba74\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\uc8fc\ubcc0\uc5d0 \uacf5\ubc31 \ubb38\uc790\uac00 \uc5c6\uc73c\uba74 \ud55c \uc904\uc5d0 \uc788\ub294 \ub2e8\uc5b4 \ud558\ub098\ud558\ub098\ub97c \uc62c\ubc14\ub974\uac8c \uacc4\uc0b0\ud558\uc9c0 \ubabb\ud569\ub2c8\ub2e4.<\/li>\n<li>\ud14d\uc2a4\ud2b8\uac00 \uc5c6\uc73c\uba74 <code>split<\/code>\uc791\ub3d9 \ubc29\uc2dd \ub54c\ubb38\uc5d0 \ub2e8\uc77c \ub2e8\uc5b4\ub9cc \ubd80\uc815\ud655\ud558\uac8c \ubcf4\uace0\ub429\ub2c8\ub2e4.<\/li>\n<\/ol>\n<p>\uccab \ubc88\uc9f8 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub824\uba74 \uacf5\ubc31 \ubb38\uc790\ub97c \uace0\ub824\ud558\uae30 \uc704\ud574 \uc815\uaddc \ud45c\ud604\uc2dd\uc5d0\uc11c \ubd84\ud560\ud558\ub294 \uac83\uc744 \uace0\ub824\ud558\uc138\uc694: <code>\\s<\/code>. \ub450 \ubc88\uc9f8 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub824\uba74 \ube48 \ubb38\uc790\uc5f4\uc744 \ud544\ud130\ub9c1\ud558\uc138\uc694:<\/p>\n<p> <code><br \/>\n<span> words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span><br \/>\n<\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"\uc815\ud655\ud55c \ubb38\uc790\uc640 \ub2e8\uc5b4 \uc218\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uc608\uc2dc \ud14d\uc2a4\ud2b8\uac00 \uc788\ub294 \uc6f9 \uc571\uc785\ub2c8\ub2e4.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" title=\"\uc815\ud655\ud55c \ubb38\uc790\uc640 \ub2e8\uc5b4 \uc218\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uc608\uc2dc \ud14d\uc2a4\ud2b8\uac00 \uc788\ub294 \uc6f9 \uc571\uc785\ub2c8\ub2e4.\" width=\"960\"\/><\/figure>\n<p>\uba87 \uac1c\uc758 \uae30\ubcf8 \ud30c\uc77c\ub9cc \uc788\uc73c\uba74 \uc720\uc6a9\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4! <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\" target=\"_blank\">window.location \uc18d\uc131\uc744<\/a> \uc0ac\uc6a9\ud558\uc5ec URL\uc5d0 \uc561\uc138\uc2a4\ud558\uac70\ub098 .\uc5d0 \uc804\ub2ec\ub41c \uc774\ub984\uc744 \ubcc0\uacbd\ud558\uc5ec \uc5ec\ub7ec \uac1c\uc758 \ub178\ud2b8\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \ub4f1 \ucd94\uac00 \uae30\ub2a5\uc744 \ud1b5\ud569\ud558\uc5ec \uc774 \uac04\ub2e8\ud55c \ub178\ud2b8 \uc791\uc131 \uc571\uc744 \ud655\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4 <code>localStorage.setItem<\/code>.<\/p>\n<h3>\ucd94\uac00 \ud1b5\ucc30\ub825<\/h3>\n<h4><strong>1. \uc774 \uc6f9\uc571 \ud29c\ud1a0\ub9ac\uc5bc\uc758 \uc804\uc81c \uc870\uac74\uc740 \ubb34\uc5c7\uc785\ub2c8\uae4c?<\/strong><\/h4>\n<p>HTML, CSS, JavaScript\uc5d0 \ub300\ud55c \uae30\ubcf8\uc801\uc778 \uc774\ud574\ub9cc \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4. \ud14d\uc2a4\ud2b8 \ud3b8\uc9d1\uae30(\uc608: VSCode)\uc640 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc640 \uac19\uc740 \ub3c4\uad6c\ub3c4 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<h4><strong>2. \uc774 \uc6f9 \uc571\uc744 \uc218\uc815\ud558\uc5ec \ub354 \ub9ce\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\ub098\uc694?<\/strong><\/h4>\n<p>\ubb3c\ub860\uc785\ub2c8\ub2e4! \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uae30\ucd08\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc5ec\ub7ec \ub178\ud2b8 \uc800\uc7a5, \ub178\ud2b8 \ubd84\ub958, \uc2ec\uc9c0\uc5b4 \uac80\uc0c9 \uae30\ub2a5 \uad6c\ud604\uacfc \uac19\uc740 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4!<\/p>\n<h4><strong>3. \uc6f9 \uc2a4\ud1a0\ub9ac\uc9c0 API\ub294 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub098\uc694?<\/strong><\/h4>\n<p>\uc6f9 \uc2a4\ud1a0\ub9ac\uc9c0 API\ub97c \uc0ac\uc6a9\ud558\uba74 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800\ub97c \ub2eb\uc740 \ud6c4\uc5d0\ub3c4 \uc720\uc9c0\ub418\ub294 \ud0a4-\uac12 \uc30d\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ubbc0\ub85c \ub098\uc911\uc5d0 \uc27d\uac8c \uac80\uc0c9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><a class=\"xiaomi\" href=\"https:\/\/www.howtogeek.com\/build-your-first-web-app-a-simple-word-counter\/\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">\ucd9c\ucc98 \ubc0f \uc774\ubbf8\uc9c0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc555\ub3c4\uc801\uc778 \uc5b8\uc5b4\uc640 \ud504\ub808\uc784\uc6cc\ud06c \uc120\ud0dd \uc18d\uc5d0\uc11c \ucf54\ub529 \uc5ec\uc815\uc744 \uc2dc\uc791\ud558\ub294 \uac83\uc740 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. AI\uac00 \ubaa8\ub4e0 \uac83\uc744 \ucc98\ub9ac\ud558\ub3c4\ub85d \ud558\ub294 \uac83\ub3c4 \uc0dd\uac01\ud574 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4! \uadf8\ub7fc\uc5d0\ub3c4 \ubd88\uad6c\ud558\uace0 \uc6f9 \ud504\ub85c\uadf8\ub798\ubc0d\uc740 \ud765\ubbf8\uc9c4\uc9c4\ud558\uace0, \uc811\uadfc\ud558\uae30 \uc27d\uace0, \uc644\uc804\ud788 \ubb34\ub8cc\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4! \ub2f9\uc2e0\uc774 \ub9cc\ub4e4 \uac83 \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c\ub294 \ud14d\uc2a4\ud2b8 \ub178\ud2b8\ub97c \uc800\uc7a5\ud558\uace0 \ud574\ub2f9 \ub178\ud2b8\uc5d0 \uc788\ub294 \ubb38\uc790\uc640 \ub2e8\uc5b4\ub97c \uc138\ub294 \uac04\ub2e8\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub370\uc774\ud130\ub97c [&hellip;]<\/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":[866,205,9],"class_list":["post-6646","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-apps-web-apps","tag-programming","tag-windows"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts\/6646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/comments?post=6646"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts\/6646\/revisions"}],"predecessor-version":[{"id":6647,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/posts\/6646\/revisions\/6647"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/media?parent=6646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/categories?post=6646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/ko\/wp-json\/wp\/v2\/tags?post=6646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}