\uc55e\uc11c < Web \uac1c\ubc1c \u2013 \u201cHello, World!\u201d Dart web-only app >\uc5d0\uc11c Stagehand\uac00 \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud55c \uc18c\uc2a4 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uba3c\uc800 index.html \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta name=\"scaffolded-by\" content=\"https:\/\/github.com\/dart-lang\/stagehand\">\n <title>dart4web<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <link rel=\"icon\" href=\"favicon.ico\">\n <script defer src=\"main.dart.js\"><\/script>\n<\/head>\n\n<body>\n\n <div id=\"output\"><\/div>\n\n<\/body>\n<\/html><\/pre>\n\n\n\nhead \ubd80\ubd84\uc740 \uc77c\ubc18\uc801\uc778 \ub0b4\uc6a9\uc73c\ub85c \ucc44\uc6cc\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. script\uac00 main.dart.js\ub85c \uc124\uc815\ub418\uc5b4 dart \uc18c\uc2a4 \ud504\ub85c\uadf8\ub7a8\uc774 JavaScript\ub85c \ubcc0\ud658\ub418\uc5b4 \uc2e4\ud589\ub41c\ub2e4\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 JavaScript\uc5d0\uc11c HTML \ucee8\ud150\uce20\ub97c \ub3d9\uc801\uc73c\ub85c \ub2e4\ub8f0\ub54c \uc0ac\uc6a9\ud558\ub294 \uc804\ud615\uc801\uc778 \ud615\ud0dc\ub85c\uc11c, id\ub97c \uac00\uc9c4 \uc601\uc5ed\uc744 \uc120\uc5b8\ud558\uc600\uc73c\ub098, \ucc98\uc74c\uc5d0\ub294 \ube44\uc5b4 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uc6b0\ub9ac\uac00 \ub3d9\uc801\uc73c\ub85c \ucee8\ud150\uce20\ub97c \uc5c5\ub370\uc774\ud2b8\ud560 id\ub294 “output” \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\uadf8\ub7ec\uba74, \uc774 “output”\ub77c\ub294 id\ub97c \uac16\ub294 \uc601\uc5ed\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 Dart \ucf54\ub4dc\ub97c \ubcfc \ucc28\ub840\uc785\ub2c8\ub2e4. \ud574\ub2f9 \ucf54\ub4dc\ub294 main.dart\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
import 'dart:html';\n\nvoid main() {\n querySelector('#output').text = 'Your Dart app is running.';\n}<\/pre>\n\n\n\n\uac00\uc7a5 \uba3c\uc800 Dart \uc5b8\uc5b4\uc758 HTML \uc81c\uc5b4 \ucf54\uc5b4 \ub77c\ub9ac\ube0c\ub7ec\ub9ac\uc778 dart:html\uc744 import\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 main()\uac00 \uc120\uc5b8\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. main()\uc548\uc5d0\ub294 \ud55c\uc904\uc758 \ucf54\ub4dc\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ub2a5\uc740 html \ud654\uc778\uc5d0\uc11c “output”\uc744 id\ub85c \uac16\ub294 \uad6c\ubb38\uc744 \ucc3e\uc740\ud6c4(querySelector()), \uadf8 \uc18d\uc5d0 \uc788\ub294 \ubb38\uc790\uc5f4\uc744 “Your Dart app is running.”\ub85c \ubc14\uafbc\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\ub530\ub77c\uc11c \uc774 \ud504\ub85c\uadf8\ub7a8\uc774 \uc218\ud589\uc774 \ub418\uba74, \ube44\uc5b4\uc788\ub294 \uc601\uc5ed\uc5d0 \uc0c1\uae30 \ubb38\uc790\uc5f4\uc744 \ub3d9\uc801\uc73c\ub85c \uc0bd\uc785\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uc54c\uc218 \uc788\ub4ef\uc774, HTML\uacfc JavaScript\uac00 \uc5f0\uacb0\ub418\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uacfc \uac70\uc758 \ub3d9\uc77c\ud55c \ubc29\uc2dd\uc73c\ub85c HTML\uacfc Dart \uc18c\uc2a4 \ud504\ub85c\uadf8\ub7a8\uc774 \uc5f0\uacb0\ub418\uc5b4 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c, JavaScript\uc5d0\uc11c HTML\uc744 \uc81c\uc5b4\ud558\ub294 \ubc29\uc2dd\uc5d0 \uc0c1\uc751\ud558\ub294 \ud568\uc218\ub4e4\uc774 dart:html\uc5d0\uc11c \uc81c\uacf5\uc774 \ub418\uace0 \uc788\ub2e4\ub294 \uac83\uc744 \uc608\uce21\ud560 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\ub9c8\uc9c0\ub9c9 \ud655\uc778\uc778 css \ud654\uc77c\uc740 styles.css \ub85c\uc11c, \ub2e4\uc74c\uc758 \ub0b4\uc6a9\uc744 \uac16\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
@import url(https:\/\/fonts.googleapis.com\/css?family=Roboto);\n\nhtml, body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n}\n\n#output {\n padding: 20px;\n text-align: center;\n}<\/pre>\n\n\n\nCSS\uc5d0 \ub300\ud55c \uae30\ubcf8 \uc9c0\uc2dd\uc774 \uc788\ub2e4\uba74, \ud2b9\ubcc4\ud788 \uc5b4\ub835\uac70\ub098 \uc778\uc0c1\uc801\uc778 \ucf54\ub4dc\ub294 \uc544\ub2c8\uba70, \uc77c\ubc18\uc801\uc778 \ud615\ud0dc\uc640 \ud3f0\ud2b8\uc5d0 \ub300\ud55c \ubd80\ubd84\uc778 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
dart:html\uc744 \ud1b5\ud55c HTML \uc81c\uc5b4<\/h4>\n\n\n\n
dart:html\uc744 \uc0ac\uc6a9\ud558\uc5ec html\ub85c \ud45c\uc2dc\ub418\ub294 Web \ucee8\ud150\uce20\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ub0b4\uc6a9\uc5d0 \ub300\ud574\uc11c \uc870\uae08 \ub354 \uc774\ud574\ub97c \ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c, main.dart\uc758 \ub0b4\uc6a9\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcc0\uacbd \ud569\ub2c8\ub2e4. \uc774\ub294 Dart\uc758 \uacf5\uc2dd \uc0ac\uc774\ud2b8( https:\/\/dart.dev\/tutorials\/web\/get-started<\/a> )\uc5d0 \uac8c\uc7ac\ub41c \ub0b4\uc6a9\uc744 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
import 'dart:html';\n\nIterable<String> thingsTodo() sync* {\n var actions = ['Walk', 'Wash', 'Feed'];\n var pets = ['cats', 'dogs'];\n\n for (var action in actions) {\n for (var pet in pets) {\n if (pet == 'cats' && action != 'Feed') continue;\n yield '$action the $pet';\n }\n }\n}\n\nvoid addTodoItem(String item) {\n print(item);\n\n var listElement = LIElement();\n listElement.text = item;\n todoList.children.add(listElement);\n}\n\nUListElement todoList;\n\nvoid main() {\n todoList = querySelector('#todolist');\n thingsTodo().forEach(addTodoItem);\n}<\/pre>\n\n\n\n\ub2e4\uc74c\uc73c\ub85c index.html \ud654\uc77c\ub3c4 body \ubd80\ubd84\uc744 \ubcc0\uacbd\ud55c \ub2e4\uc74c\uc758 \ub0b4\uc6a9\uc73c\ub85c \ubcc0\uacbd \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta name=\"scaffolded-by\" content=\"https:\/\/github.com\/dart-lang\/stagehand\">\n <title>dart4web<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <link rel=\"icon\" href=\"favicon.ico\">\n <script defer src=\"main.dart.js\"><\/script>\n<\/head>\n\n<body>\n <h2>A Simple To-Do List<\/h2>\n <p>Things to do:<\/p>\n <ul id=\"todolist\">\n <\/ul>\n<\/body>\n<\/html><\/pre>\n\n\n\n\uba3c\uc800 index.html \ud654\uc77c\uc758 body \ub0b4\uc6a9\uc744 \uc0b4\ud3b4\ubcf4\uba74, \ud5e4\ub354(h2)\ub85c \uc81c\ubaa9\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ubb38\uc7a5(p)\uc73c\ub85c “Things to do:”\ub97c \ubb38\uc790\uc5f4\uc744 \ud654\uba74\uc5d0 \ucd9c\ub825\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 id\ub97c “todolist”\ub85c \uc815\uc758\ud55c \ube44\uc5b4 \uc788\ub294 Unnumbered-List\ub97c \uc0dd\uc131\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc55e\uc11c Hello World \uc608\uc81c\ucc98\ub7fc \uc774 \ubd80\ubd84\uc758 \ub0b4\uc6a9\uc744 Dart \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud560 \uac83 \uc785\ub2c8\ub2e4. \uc774 \ud504\ub85c\uadf8\ub7a8\uc744 webdev serve \uba85\ub839\uc73c\ub85c \uc218\ud589\ud558\uace0, http:\/\/localhost:8080\uc73c\ub85c \uc811\uc18d\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 Web \ucee8\ud150\uce20\uac00 \ucc44\uc6cc\uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
\uc774\ub807\uac8c \ud654\uba74\uc774 \ucc44\uc6cc\uc9c0\uac8c\ub41c \uc774\uc720\ub97c main.dart\ub97c \ud1b5\ud574\uc11c \uc124\uba85 \ud558\uaca0\uc2b5\ub2c8\ub2e4. main.dart \uc548\uc5d0\ub294 main()\uc744 \uc81c\uc678\ud558\uace0 \ub450\uac1c\uc758 \ud568\uc218\uac00 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n
addTodoItem() \ud568\uc218\ub294 \uc785\ub825 \ud30c\ub77c\uba54\ud0c0\ub3c4 \ubb38\uc790\uc5f4\uc744 \ud558\ub098 \ubc1b\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ub514\ubc84\uadf8 \uc6a9\ub3c4\ub97c \uc704\ud574\uc11c print() \ud568\uc218\ub85c \ud654\uba74 \ucd9c\ub825\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc774 \ucd9c\ub825\uc740 Web \ube0c\ub77c\uc6b0\uc800\ub97c \uac1c\ubc1c\uc790 \ubaa8\ub4dc\ub85c \uc218\ud589\ud574\uc11c, JavaScript \ud504\ub85c\uadf8\ub7a8\uc758 \ucd9c\ub825\uc774 \ud45c\uc2dc\ub418\ub294 console \ud0ed\uc744 \uc120\ud0dd\ud558\uba74 \ud655\uc778 \uac00\ub2a5 \ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc758 3\uc904\uc774 \uc218\ud589\ud574\uc57c \ud558\ub294 \ub3d9\uc791\uc778\ub370, \uba3c\uc800 \ube44\uc5b4\uc788\ub294 List Element\ub97c \ud558\ub098 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0, \uc774 List Element\uc758 text \ub0b4\uc6a9\uc744 \uc785\ub825 \ud30c\ub77c\uba54\ud0c0\ub85c \ubc1b\uc740 \ub0b4\uc6a9\uc73c\ub85c \ucc44\uc6b0\uac8c \ub429\ub2c8\ub2e4. \uc774\ub807\uac8c \ucc44\uc6cc\uc9c4 \ubb38\uc790\uc5f4\uc740 HTML \ud654\uc77c\uc778 index.html\uc758 body \ubd80\ubd84\uc778 todolist id \ubd80\ubd84\uc744 \ucc44\uc6b0\uae30 \uc704\ud55c \uc6a9\ub3c4\ub85c \uc0ac\uc6a9\ub418\uc5b4, \ud568\uc218 \uc2e4\ud589\uc2dc \ub9c8\ub2e4 List Element\ub97c \ud558\ub098\uc529 \ucd94\uac00 \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574\uc11c \uc704\uc758 \ud654\uba74 \ucd9c\ub825\uacfc \uac19\uc774 4\uac1c\uc758 Unnumbered List 4\uac1c\uac00 \ub098\ud0c0\ub098\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
thingsTodo() \ud568\uc218\uac00 \uc2e4\uc9c8\uc801\uc73c\ub85c HTML\uc5d0 \ucd94\uac00\ub418\ub294 4\uac1c\uc758 Unnumbered List Element\ub97c \ub9cc\ub4e4\uc5b4 \ub0b4\ub294 \uae30\ub2a5\uc744 \ud569\ub2c8\ub2e4. \uc774 \ud568\uc218 \uc548\uc5d0\ub294 \ub3d9\uc791\uc744 \uc758\ubbf8\ud558\ub294 \ubb38\uc790\uc5f4 3\uac1c\ub85c \uc774\ub8e8\uc5b4\uc9c4 actions \ub9ac\uc2a4\ud2b8\uc640 \ub3d9\ubb3c\uc744 \ub098\ud0c0\ub0b4\ub294 pets \ub9ac\uc2a4\ud2b8\uac00 \uc788\uc2b5\ub2c8\ub2e4. Nested for \uad6c\ubb38\uc744 \ud1b5\ud574\uc11c, \uc774\ub4e4\uc744 \ub9e4\uce6d\ud558\uac8c \ub418\uba70, pets\uac00 dogs\uc778 \uacbd\uc6b0\ub294 3\uac00\uc9c0 actions\uc5d0 \ubaa8\ub450 \ub9e4\ud551\ud558\uc5ec, “$action the $pet”\uc758 \ubb38\uc790\uc5f4\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. pets\uac00 cats \uc778 \uacbd\uc6b0\ub294 \uc624\uc9c1 actions\uc774 “Feed”\uc778 \uacbd\uc6b0\uba54\ub098 \ubb38\uc790\uc5f4\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c yield \uad6c\ubb38\uc740 return \uad6c\ubb38\uacfc \uc720\uc0ac\ud558\uac8c \uac12\uc744 \ub9ac\ud134\ud558\ub294 \ubb38\ubc95 \uc785\ub2c8\ub2e4. \ucc28\uc774\uc810\uc740 return\uc774 \ud55c\ubc88\uc5d0 \ud558\ub098\uc758 \uac12\uc744 \uc804\ub2ec\ud558\uace0 \ub9c8\uce5c\ub2e4\uba74, yield \uad6c\ubb38\uc740 generator \uad6c\ubb38\uc73c\ub85c\uc11c, thingsTodo()\uc758 \uacb0\uacfc \uac12\uc774 \ud544\uc694\ud55c \uad6c\ubb38\uc774 \uc2e4\ud589\ub420\ub54c \ub9c8\ub2e4 \uadf8\ub54c \uadf8\ub54c \ud544\uc694\ud55c \uacb0\uacfc \uac12\uc744 \ub9cc\ub4e4\uc5b4\uc11c \ub9ac\ud134\ud558\ub294 \uc810\uc5d0\uc11c \ub2e4\ub985\ub2c8\ub2e4. \uc774\ub97c thingsTodo() \ud568\uc218\uac00 async* \uad6c\ubb38\uc758 \ube44\ub3d9\uae30\uc801\uc778 \ub3d9\uc791\uc744 \ud558\ub294 \ubd80\ubd84\uc5d0\uc11c \uae30\uc778 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774 \ub450\uac00\uc9c0 \ud568\uc218\ub97c \uc774\ud574\ud55c \uc0c1\ud0dc\uc5d0\uc11c main() \ud568\uc218\ub97c \ubcf4\uba74, \uc774\ud574\uac00 \uc6a9\uc774\ud569\ub2c8\ub2e4. \uc989 main()\uc758 \uccab\ubc88\uc9f8 \uc904\uc5d0\uc11c\ub294 index.html\uc5d0\uc11c \uc815\uc758\ud55c \ube44\uc5b4\uc788\ub294 \uc601\uc5ed\uc744 \uc120\ud0dd\ud558\uac8c \ub418\uace0, \uc5ec\uae30\uc5d0 thingsTodo()\uac00 \uc2e4\ud589\ub418\uba74\uc11c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 \ud558\ub098 \ud558\ub098\uc758 \ubb38\uc790\uc5f4\uc744 \ucd94\uac00\ud558\uac8c \ub418\ub294 \uac83 \uc785\ub2c8\ub2e4. <\/p>\n\n\n\n
\ub530\ub77c\uc11c, HTML\/CSS\/JavaScript\ub97c \ud63c\uc6a9\ud558\uc5ec Web \ucf58\ud150\uce20\ub97c \ub2e4\ub8f0\uc218 \uc788\ub294 \uac1c\ubc1c\uc790\ub77c\uba74, JavaScript \ub300\uc2e0 Dart \uc5b8\uc5b4\uc640 dart:html \ucf54\uc5b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec Web \ucf58\ud150\uce20\ub97c \uc81c\uc5b4\ud558\ub294 \uac83\uc774 \uac00\ub2a5 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\uacb0\ub860\uc801\uc73c\ub85c Dart \uc5b8\uc5b4\ub85c DOM\uc744 \uc0ac\uc6a9\ud558\ub824\uba74, JavaScript\ub97c \ud1b5\ud55c Web \ucee8\ud150\uce20\ub97c \ub2e4\ub8e8\ub294 \uacbd\uc6b0\uc640 \ub3d9\uc77c\ud558\uac8c, Window, Document, Element \ubc0f Node \uc5d0 \ub300\ud574 \uc54c\uc544\uc57c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
Window \uac1d\uccb4\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \uc2e4\uc81c \uc708\ub3c4\uc6b0\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \uac01 Window\uc5d0\ub294 \ud604\uc7ac \ub85c\ub4dc \ub41c \ubb38\uc11c\ub97c \uac00\ub9ac\ud0a4\ub294 Document \uac1d\uccb4\uac00 \uc788\uc2b5\ub2c8\ub2e4. Window \uac1d\uccb4\uc5d0\ub294 IndexedDB (\ub370\uc774\ud130 \uc800\uc7a5 \uc6a9), requestAnimationFrame (\uc560\ub2c8\uba54\uc774\uc158 \uc6a9) \ub4f1\uacfc \uac19\uc740 \ub2e4\uc591\ud55c API\uc5d0 \ub300\ud55c \uc811\uadfc\uc790\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ud0ed \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uac01 \ud0ed\uc5d0\ub294 \uace0\uc720\ud55c Window \uac1d\uccb4\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
Document \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uba74 \ubb38\uc11c \ub0b4\uc5d0\uc11c Element \uac1d\uccb4\ub97c \ub9cc\ub4e4\uace0 \uc870\uc791 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Document \uc790\uccb4\ub294 \uc694\uc18c\uc774\uba70 \uc870\uc791 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
DOM\uc740 Node \ud2b8\ub9ac\ub97c \ubaa8\ub378\ub9c1 \ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c Node\ub294 \uc885\uc885 Element \uc774\uc9c0\ub9cc attributes, test, comment \ubc0f \uae30\ud0c0 DOM \uc720\ud615\uc77c \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \ubd80\ubaa8\uac00 \uc5c6\ub294 \ub8e8\ud2b8 \ub178\ub4dc\ub97c \uc81c\uc678\ud558\uace0 DOM\uc758 \uac01 \ub178\ub4dc\uc5d0\ub294 \ud558\ub098\uc758 \ubd80\ubaa8\uac00 \uc788\uc73c\uba70 \ub9ce\uc740 \uc790\uc2dd\uc774 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\ub9c8\ubb34\ub9ac<\/h4>\n\n\n\n
\uc774 \uae00\uc5d0\uc11c\ub294 \uc804\ud1b5\uc801\uc778 Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \uae30\uc220\uc778 HTML\/CSS\/JavaScript\uc758 \uc870\ud569\uc744 \uc0ac\uc6a9\ud558\ub294 \uae30\uc220\uc5d0\uc11c JavaScript \ub300\uc2e0 Dart\ub97c \ud65c\uc6a9\ud558\ub294 \uc811\uadfc \ubc29\ubc95\uc778 Dart for Web \uae30\uc220\uc5d0 \ub300\ud574\uc11c \uc54c\uc544 \ubcf4\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
dart:html\uc744 \uc0ac\uc6a9\ud55c Dart for Web \uae30\uc220\uc5d0 \ub300\ud574\uc11c \uc880 \ub354 \uc774\ud574\ud558\uace0 \uc2f6\ub2e4\uba74, Dart \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c “A tour of the core libraries”\uc758 dart:html\uc5d0 \ub300\ud55c \uc124\uba85\uc778 “dart:html – browser-based apps” \ubd80\ubd84( https:\/\/dart.dev\/guides\/libraries\/library-tour#darthtml<\/a> )\uc744 \uc77d\uace0 \uc2e4\ud589\ud574 \ubcf4\uae30\ub97c \uad8c\uc7a5\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Creative Commons License (CC BY-NC-ND)<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
< Web \uac1c\ubc1c \u2013 Dart for Web > \uc774 \uae00\uc5d0\uc11c \uc124\uba85\ud558\ub294 \uae30\uc220\uc740 Flutter\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0, Dart\uc5b8\uc5b4\uc758 Core \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 dart:html\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95 \uc785\ub2c8\ub2e4. \uc774\ub294 HTML\/CSS\/JavaScript\uc758 \uc870\ud569\uc5d0\uc11c JavaScript\uc5d0 \uc0c1\uc751\ud558\ub294 \uc5ed\ud560\uc744 Dart \uc5b8\uc5b4 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[3],"tags":[15],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1102"}],"collection":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":5,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1102\/revisions"}],"predecessor-version":[{"id":1295,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1102\/revisions\/1295"}],"wp:attachment":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=1102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=1102"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}