\uc120\ud0dd \ubc84\ud2bc<\/li>\n<\/ul>\n6.2 HTML\/CSS \ucf54\ub4dc \uc608\uc81c<\/h3>\n
\ub2e4\uc74c\uc740 \uce90\ub9ad\ud130 \uc120\ud0dd \ud654\uba74\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud55c HTML \ubc0f CSS \ucf54\ub4dc \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n
<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\uce90\ub9ad\ud130 \uc120\ud0dd \ud654\uba74<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n }\n .character {\n border: 1px solid #ccc;\n border-radius: 10px;\n padding: 15px;\n width: 300px;\n text-align: center;\n margin: 10px;\n }\n .character img {\n width: 100%;\n border-radius: 10px;\n }\n .button {\n background-color: #4CAF50;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>\uce90\ub9ad\ud130 \uc120\ud0dd<\/h1>\n\n <div class=\"character\">\n <img src=\"character1.png\" alt=\"Character 1\">\n <h2>\uc804\uc0ac<\/h2>\n <p>\ud798: 10 | \ubbfc\ucca9\ud568: 5<\/p>\n <button class=\"button\">\uc120\ud0dd\ud558\uae30<\/button>\n <\/div>\n\n <div class=\"character\">\n <img src=\"character2.png\" alt=\"Character 2\">\n <h2>\ub9c8\ubc95\uc0ac<\/h2>\n <p>\ud798: 3 | \uc9c0\ub2a5: 10<\/p>\n <button class=\"button\">\uc120\ud0dd\ud558\uae30<\/button>\n <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n7. UI \uc694\uc18c\uc758 \ubc18\uc751\ud615 \ub514\uc790\uc778<\/h2>\n
\ubaa8\ubc14\uc77c \ubc0f \ub2e4\uc591\ud55c \ud574\uc0c1\ub3c4\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uac00 \uc798 \ubcf4\uc774\ub3c4\ub85d \ud558\ub824\uba74 \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uace0\ub824\ud574\uc57c \ud569\ub2c8\ub2e4. CSS\uc758 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\uac8c \uc694\uc18c\ub97c \ubcc0\ud654\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
7.1 \ubbf8\ub514\uc5b4 \ucffc\ub9ac \uc608\uc81c<\/h3>\n
\ub2e4\uc74c\uc740 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4:<\/p>\n
<style>\n \/* \uae30\ubcf8 \uc2a4\ud0c0\uc77c *\/\n .character {\n width: 300px;\n }\n\n \/* \ud654\uba74 \ub108\ube44\uac00 768px \uc774\ud558\uc77c \uacbd\uc6b0 *\/\n @media (max-width: 768px) {\n .character {\n width: 100%;\n margin: 10px 0;\n }\n }\n<\/style><\/code><\/pre>\n8. UI \uc694\uc18c\uc758 \uc131\ub2a5 \ucd5c\uc801\ud654<\/h2>\n
\uac8c\uc784\uc758 \uc131\ub2a5\uc744 \ub192\uc774\uae30 \uc704\ud574\uc11c\ub294 UI \uc694\uc18c\uc758 \ucd5c\uc801\ud654\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ubd88\ud544\uc694\ud55c \uc624\ubc84\ud5e4\ub4dc\ub97c \uc904\uc774\uace0 \ucd5c\uc801\ud654\ud558\ub294 \ubc29\ubc95\uc73c\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\uc220\uc774 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- \uc774\ubbf8\uc9c0 \ud30c\uc77c \ud06c\uae30 \uc904\uc774\uae30: \uc801\uc808\ud55c \ud3ec\ub9f7\uacfc \ud574\uc0c1\ub3c4\ub97c \uc120\ud0dd\ud558\uace0, \ud544\uc694 \uc5c6\ub294 \ub370\uc774\ud130\ub97c \uc81c\uac70\ud569\ub2c8\ub2e4.<\/li>\n
- CSS \ubc0f JavaScript \uc555\ucd95: \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uace0 \ub85c\ub529 \uc2dc\uac04\uc744 \uac1c\uc120\ud569\ub2c8\ub2e4.<\/li>\n
- \uc911\ubcf5 \ucf54\ub4dc \uc81c\uac70: \ubd88\ud544\uc694\ud55c \uc2a4\ud0c0\uc77c\uc774\ub098 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc81c\uac70\ud558\uc5ec \ud6a8\uc728\uc131\uc744 \ub192\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n
9. \uacb0\ub860<\/h2>\n
\uac8c\uc784 \uadf8\ub798\ud53d \uc81c\uc791\uacfc \ubb34\ub8cc UI \uc694\uc18c \ud15c\ud50c\ub9bf\uc758 \ud65c\uc6a9\uc740 \uac8c\uc784\uc758 \ud488\uc9c8\uc744 \ub192\uc774\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ud15c\ud50c\ub9bf\uc744 \ud65c\uc6a9\ud558\uc5ec \uc2dc\uac04\uacfc \ube44\uc6a9\uc744 \uc808\uc57d\ud558\uba74\uc11c\ub3c4 \uc804\ubb38\uc801\uc778 UI\ub97c \uc81c\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \ud3b8\uc9d1\uacfc \ucd5c\uc801\ud654 \uacfc\uc815\uc744 \ud1b5\ud574 \uac8c\uc784\uc5d0 \uc801\ud569\ud55c \uace0\uc720\ud55c \ub514\uc790\uc778\uc744 \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uacfc\uc815\uc744 \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \ubcf4\ub2e4 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc774 \uac15\uc88c\uc5d0\uc11c \ub2e4\ub8ec \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \uba4b\uc9c4 \uac8c\uc784 UI\ub97c \uc81c\uc791\ud574\ubcf4\uc138\uc694. \uac01\uc790\uc758 \uac8c\uc784\uc5d0 \ub9de\ub294 UI \uc694\uc18c\ub97c \uc798 \uc870\ud569\ud558\uc5ec \ucd5c\uace0\uc758 \ud50c\ub808\uc774 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n