본문 바로가기
웹개발 종합반 숙제

2주차 숙제

by Hawie 2022. 8. 23.
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
            font-family: 'Nanum Gothic Coding', monospace;
        }

        .item_img {
            width: 500px;
            height: 300px;
            background-color: red;

            background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTExMVFRUWGRgYGBgWGB0gFxgbGSEYGhgYGh4dIikgIB0lHRgYITEhJSorLi4uGB8zODMsNygtLisBCgoKDg0OGxAQGy0mHyYvLy0tLy01NS0vLy0vLS0tLS0tLS0tLS0vLy0tLS8tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAAAwQFBgcCAf/EAEoQAAIBAgMDCAUKAwUHBQEAAAECAwARBBIhBRMxBgciQVFhcYEjMpGhsRQzNUJSU3JzwdGCkvAWQ2KywhUXJFSis+FEY5TS8TT/xAAaAQEAAwEBAQAAAAAAAAAAAAAAAgQFAwEG/8QAOhEAAQMBBgIIAwYGAwAAAAAAAQACEQMEEiExQVFx8AUTYYGRobHRIjLBFBVScpLxBjRCQ7LhI4LS/9oADAMBAAIRAxEAPwDcaKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKrnLrbMmDwbzxBC4KgZwSup10BB99ZhHzs7QJXo4bUw/wB2/wBcEt/ed2n60RblRWNbD53sVIFEmFhkZny+jcx9V9M2fXuvVkg52cGGyYmLE4Vhx3kZZfIx5j7qItBoqM2RtzDYoXw88UtuORgSPxDiPOpOiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiuJJAASSABxJ4CqltjnK2bhzlOIErfZgBk17My9AHuLCiK4UVnTc4c8kZlhwJjhAJMuKfKPJFBv5NVPi529oHL0cLrIF0jfgb/+5x0oi3WisKTna2hlBK4W+VT82/Evk+87K0Lm25Tz4+KZ5xGDHIUG7UgW143Y66URXOiiiiKmc7f0bJ+JPjWCQcU8cP8A5Wre+dv6Nk/EnxrBsIt2QXAu2H1PD1WoiZRm0II+8/01bNk8uFKCHHQJiYxoGOkqjxPGqq6ZYbXBtKRcHQ9HqNNiT3+4140qS0TC7H2Vi3zYSbFQSL0tATu+8sPVHfcVY8PykxmzlvJiBj4FAvoWlRdNTIt+rW8nH7Qqs4JEw8mHgb5lGiaWw0kY5Wkdh1kjMB2KFA77Xzl7Riz4doJFMqZjmiYXCm2UXH8Vh2X7a4G0DEgZefBbDOh3uNJpONQEzEhuEidyddtJST88Rc+hwWnbJNlP8qofjXv+8THyepDh0/EHb35h8KrOE5MLiZpSjiEtHh5EQABS8rSpIgv6ubcsVAsAXUcLU/i5NATDDiabP0X3mVdxu2xAw+7vx31jm7L3FuurDSCJWRUYabyx2YJB4gwpZuU21H4TRJ+GNf8AVeuPlm039bHN5LGvwUUxxexDCm9bESSRkrl3ZRSwlkEcTZn6KgA9LNwaw0417htjOxWPfT7zehJB6MGNDM0IYoTcg5RZ0LrmJXqJr3BQTlsFjX9bH4j+GZl/ykVy2wcQeONxB8cRJ+rU02Vsl5BFmxWYOIizQkMnpJMRGcjW1sIR5k005TI+z44zJI0rynEKQp6KFChhcW16UcisQb+tRFLf2WY+tiZD4yN+9cnkaDxmY/xn96z0cpp/t+w/vXv9pZ/tN7KJCvjcjY+uU/zGuV5IRjhKR4Mf3qgtyhnP1m91cnlBN9v2m/wokLQv7OheGIceEjfvScmynXhjJx4TuPg1VjZWJaWN2uXdQuhJUAsxVQbEaZQWLE8OyxpefZOIdwIZ4mWS7RKXs5izMN4bi2UKpYm/qi/HSufWtmOefZe3Sp4JOmox+J/+RKR7C1q9G28anDHyeZU/5gaqh2VirX3sduq7sM3QWW4BQEDKw9a1jcU3TCy9MMwboxZCrG15jaMi669dwbV4azN0ulXD+3G0Y/8A1Yf8cUfxVRSf+9zHobFcM47cj/6X/Sqe+x572MkXGUXzMB6LR29X1b6ePZxpttDY0kal2aNgpVTYtfpC6ngPfr3ddBWpui6RzgvbpVrxuNixxEm0NqlhodzErBF7gnq3HaQT3mnMXKTZGCH/AAuGbESD68xFvGxrOte/2g0WPf8Ayiui8hTXKblXiMc3pWAQerGt8i+Qplg/Vj/OT9aZa9/tAqT2ZEGEYLKo3y6k6aBu2ouML2Eknqj8Cf8AdNbLzHfMYn84/rWNgWFuPRX/ALprZOY35jE/nH9akorTKKKKIqZzt/Rsn4k+NYRglu8YAv0sPpp9lu3St352/o2T8SfGsHwds8d72zYbhx9VqFEhilIjIKhTvfVW1h0B5UwI7fev7U/ny7lsoIG/Oh1I6Gtz40wB8PJrfGoM150CmVZdnbbgdFjnYxvGqosoVmQoosiyADMGUAKCoa4AuARcvG2hg0AYztP/AIIY5FJ/imRFUd/S8DVPzd5/nFeHy8yT8Kg6zscZK0qXTFrpUuqa/DIYAkeP1mNFIY/a0kkrSBjHcpZEdrKIrboAA/UsLE63ueJNJnak+XLv5sufeZTK4XeXzbzKD6+bpZuN9eNNP67B+5r0dwPdlHHsA6ya7QsyZKc4fac8ZBjnlQqGClHcZQ5zOFsdAzakDidTrXUm3cSqEfKcRlDGS2d7Z75s/retm1zcb68alJdh4fD2XG4pkl+tBBHvXj4ECVy6ora6oLkdtEOM2SrWOExcyagmWZQeHHdxZL6/V3nA8TwovFJvsvDQSrhG2liYZwI16KMMNG7BZApYSXCXmYAhRlOdjx1rG1VnSRocQZM8bFSsjMcrAKpsb/ZRAD1qq9QFHKjagxeKmnClVkK2U8QFRYxfjrZATqePE8asjcotnzqr4vDPLid0ivIpkTO6BUGbJMFN1X18o6tDaiKoe32A++uTbu9hqxYjGbKlNtxNhL2tLE5kRSTb0kchBKjjdXBN+FRm3dmPhMRLh3YM0TWJV9CCAykX11VhpRJTAW7vYa99vuFeX7/+qgd1vIE/Gi9lSELybgxLGSrvnzKDrkstrnTQsPMipXDbZxMc6zCAXhgXDlbPYR5SvEEEMQScwNMNnbY3SquXNZg9jxDBkYWI7VDA+I7KP9poESMK1oldUJKgneKysXA7M1wB2W76rODyT8G/f59gHCTpB9kbp1idqThMm4EYVZU0V73na5YlmJL9Ei5OvSv3ertadXC/J0z3RwGV75otA1s3VltbgCO2m2I2nE4ZSGymQyDhe5MrWOugvIP5T26cSbTUztKL9IG46NtTwyNdSMuh7Tc6Go3C4GWeZ7CNeM8NZw9vDdPMRtOZoypwyqCkq5lD6K7Z5OJ7dSTrTfaeMmZHEkOUPIJMwzDKwXJlAJsRZSLG/A9deS7VRs90ZRKAG1ByhY2iXKeJ0a5v2edN9obRMihQCF1zCwN+k7L0hrpn4dutGUyHD4Ix7e/XfxGOEwPC4bpgR2+9f2rnT/D7Gr0Hw8iR8a6v3n+cVbXkrkDs9y/vU5sSMtuwEDkyjQ200bXs0HbUGT4eZJ+FTmxkUiIMjuN8LKg1Js9ri4NhxNj1VB+XOx4L0Jq/gB0V0HAemOg7q2PmO+YxP55/WsdcAXABAsLBuI9MdD3iti5jvmMT+cf1qagtMooooipnO39GyfiT41hGBHTj6JfpYfoi9z0W001rd+dv6Nk/EnxrCMAoLxggsM2H0HE9FtKInWCw4yurR5QJj0Cb5fR8L9v70uMHH92vvpPZkYVHARkAlNlbiPRtxv8A+fOncdZ1dxDsCvsugaNN9mlzQfiOYB27El8ii+6SgYKP7Ce+nsajsY+XfpS5jUDg2vdr1ftVY1nDUrYNGiP7bf0t9lFfIY+O7T3092FuIcZhppI0yJKrMTfo9Qf+EkN/DXcqDqDefjp+tISKOvzvU21TMqFWyUarCy4BIj5RPoq/yh2BicK5OIUsGOYTjpRTZjfOsg0JYm9ib699e7E5Mz4pHlTdJEjZGlmlVIwxGbLc6k2N9Aa0fkNhMXGwIjdsFJdZhI2WPI/F0zsASOJK3uLiobkw8EYxeyp5CL4hTh2EbSFmF0v6K/SaMJqdLE66VptqXmXgF8NXsgoWgUqjxEiSMYExiNxt4SoZeRKD5zaWBB6hG8kgt3lUFvCudr8jkgw3yr5fh3ViyxqFkV5StgwQEXNiQCeA6yKvc/IdEUs00wUAsbQqGsNWy5peNuqxOo0rPNu4xsfigsSuiJliw8KozmOEcXKoCxNvSNYEm9tbCjC8/MIS1U7LTA6ioXnXCAPEBSnIzYTQS4TaEs+GXDhmcdMtI+S6vGseW5e5t2C978Lp42NZpHlkTO7kszOSWN+09wsPKrbjdgArFhMJLEwhUkRF8mJkdrGWVo5AvEjgLgAadlQWK2PiIgTJDKqjiWQgD3e+9VLRUdejEBfQ9B2azdVecWue6JBgxjgIOOOungooYKL7tPfQ2CjPFI/fTjypzsrDiSeGIm28dVJ7uJt32BHnVV9a40vcTABJ7hK3H0KDGlzmNgY/KPZRxwacN0vsNHyGIf3S/wAtSQ5UYyWaaLCy4TCJEWWOFxGhlykrlDSKQznLrcqLkd5qc27tPE4bZyYhsPBh8U86rJZI2RxlezgAsBcAdfEHtqtUtVZj20yBecQIv4i9lIu5RmW3gDgV8/8AfVlxPUf4/wDnBVP5Kn3Y9lcnBx/dr/LVk23yzVcBh5IJMKcW+63yhYyw6Dl7r1Wew7uFdco+U08MWzGj3IOJhV5bwqbsRDe2mnrtUaVrtFRzWhkFxcBLiMWiT/RlscZQ9M2Uf2B5a/8AVVlcDH1Rr7DR8hjv80t/CrLy15WS4PaG6yRPhwIy8e6XMysOmA3G9uHfT0bfJ2thsJFuWwkkaEARKbqYncENa9tBQ2u0CmKlzAsNQfHoACR8vzQQYy7cE++bLl1Azj+n2VOODj+7X30fIYvu0pd+J8TXlXi505lfRGy0Qfkb+keyb/JI/u199GGKpJHd2iTfgEpe+qnQWB4nu9nGlzXuFZBJEZJJI13w6UVw98hsoI4Am19DpeutFxJMycOd/RYP8QUabLO0saB8QyAGjjpwUC5vrcm6rqTcn0x1JIF7+ArY+Y75jE/nH9ax2Ug3IJIIFi2pI3xsSes1sXMd8xifzj+taK+QWmUUUURUznb+jZPxJ8awnZ5AkjuxQZsP0h1dFq3bnb+jZPxJ8awjASZZIm00bDHW9vVPG2tET7ZrApIVcyAzaOeLejfX9PLqp9Cp6v666Y7NnLpK5IJaYm4BAPo34A6jwNP4CR2a36r1mWr5u4L7ToH+UP5negTpI2JAse7UaWsey/Z52pxlcxlrm1jpbXhrrl8PjfSusPgpWt01s2XtJs9h1rby7u2k5YJFjNylhYnQ36WgAuut7nUH6p1rOLmkgAjMLUkOIEjMeZ/2ETA5SLqdSeIBFiRwygWvfqr3G7XjwEUbbpJsVNGJkEvzUUZbLG4WwMkjWzW0sBfq1SxAPSUBDcM5I1IGt9e79aa8tMDPLDg8XFGzxx4cYdyiht3JE0iHNYX6QsQSNLDgSKvWBjXHHntWH05WqU6LWsMBxxjDTLfHVP4udSVEIkw6mcKLSsczEkBg1z6oNwcii3hVP21tLFYx/lkkbZgFLTxxMq9GwRmZRlBBsA3HgLmwtfNn8msJs/D77G7jeXALTRNIELBSII4iyiWVQbtLlsuosbNbnlHyiwmN2dJEmPlWQSZymIjA3ixL0IlWIZEQsFZbXOYajs1ZXysAD6LPpOUeNY3ONxX/AMiX/wC1Tuy9mbaTLPCs53yq6uZY3LqR0Gs7EkEcLjuqn1smyuTuFxGz8JE+NhDQxlswdDZp2zGMgsCAhGUcLk9xucSBgJXSkxjngPddG8THcMVSNp8p9ox7s4qEIyMSjzYXI92BVhqqo1xoQVNNDy3xokEkczRC1jGjOYDpY+ikZ4xfsAAF9LVpOD2a0JyQbVhnJ9XDyPmilF0Xdm7sqls6gW16Q8qjjNmbLZQpgxuGmUkOI2jkUWJ09IVNxw4C1tbm94daB82C7fY3PP8Awm+B+EHDuIB78tJCe8ntpTYuLEtiooNxHBmSWOJEKykqY4lKAZi3SDL1W16rtNkzxpisO81hGJQSSbBTfosT1ANlPlU9FtD5fOIZJJt0kXoYt4u8laMKqC8hCGVwzMSewjvqPV8A+HlxHyfaO4ifdSP/AMOQjnLoVD5iOkuoFtapV6JtAIaIBBE4DMET5res9enYqDrPaXuvOxiCbsjKcp3jBRfKghpp1xWzHSY33cuFDhZG1s7Bro4PRNwC3EHXgpPsnFpsRY5I5STig8ceVi6R5GGqgXUFsxt/i76tGOVNm4WKdsTj5MPLYo+GaPdhWGaIZZGDrdBfTQcPGO5RxyYaUbrEYtGkVWlRpryq2oyuY2K3ygHQ6Ais91mtdOmxoDYa5rhLnES3IAGbgiZguG0BZdmsbLTWNOnUBMGMCO+Y/dRHKLkgkWzMLPFBMcTJut6BvGPSjZnumuXpAdQtwpblds+ZodjhYZWKYeMPlRjkNoNGsNOB49hqW2bMD8lWfHY5JsaXWPJKcihG3cZkzG9nckDLx99NMI+IvK02OxEMUGs0jyucuuUKFBuzMwICjjY1zZR6Qa+m95a4tLiJLjN4RHykgDRTHR7CKsVGgMgOz8RhjlHGEryi2KcRt1FkikaB0yuwVso9FIPWtYENa3faofklsLEYba8CSJIyxO4EuRt2U3cmRg3qgHMNL6E2q1vOBEJC21ihCMR8ri3ypIQqSNDmzKhJHXcddqUx8ceExUOCEm1XaTow7uaLdOF0YC8gKhbEEMBbL4V0Fj6QFE0ZZHV9XEnYi9lgcYjXCThjTLaGd/GZyPPOSpb8T4mvKuDbDwpnngKYuMw6PiJGw+4W6loySGzHMLHIBmAYXAqn9tXKjHNPxL7yy2+ja7zqROBxkEZyvDRCqF4Q4lYb4aQi8hITS3hxPcDQaEdQ8WeVolMtiygk6pYLYDrNge4nUcanZxLiOxZX8Rfyzfzj/Fyg5ABcKCAALBvWA3xsG7+2ti5jvmMT+cf1rGxa2huMq2JFiRvTYkXNvC5rZOY35jE/nH9a0l8WtMooooipnO39GyfiT41heynyyxHOEs2H6RFwvRbW3XW6c7f0bJ+JPjWEYAkPGRlvmw1s1svqtxzaW8aIpHBS5llbe7683zmXLn9G+turs8qdQW6xemuDkLCVmKEmYEmM3j1jk9U9nV5UvGazLT83cvtugBNkP5j6BSCOLZekRcHieI8B4V7hoHtfRkB1Ug2JUdY8D4a02jlt1kf1r7hSomtazEak6d+hPj+xqm4OxA+vOcLWcHYgfU/sl5IySLJltcEDNr+xF9KbQSy4d2lhkkjcnUoSM19QG0s3Hrrv5Sft9d7ADx7KbM5PGpU74P7qJoioLrwCO2T6pxyqws2LiweJw98TuYhDLEEMjxy9NpHkXUneHg1tSo1uRUdgOb2Z23UuIw0M5D5YC+eUlFZrPu7qlwpNyx8L6VJYjBPBkkDOjMpuUYqSGOoupva1tO4U45vGYbQw2dQNZeHfFJWjTtN+AOdF8rX6Ha2m+sHy34iIG0zJyAnAczn+zMEZsRDBfKZZY4r2vlLsEvbrtfhVr2nyRwAd0j2gylXKWnwznUdE9OMZR0gTe3Ajha5r+xZmjx8DLxXFR267+kXTzq/bZ3aYjFuwFkxBUXF1Ad2TUl1AsSpzEkAA6da96jnAgN1WdY6FKo2o+qTDQDh2mNVW9m8kY0lWTEY3C7pCGthmaSVyuoVVKDLe3rNoL1J7Yxu/nkmtl3jMcvGwPAHvtT/Av6bLK2HENndljjzhlLxrE5YOGDi7XsxGUEZelRDBO0UgX5G06IlgQoUSMm9vcRqgQq0YUOcpJYEm1cqrHvwkYcVo9HWuz2MGqGPdekThECDoc9wTwnFM+TUZONwtgSRNGdBewBFz4V1srATSbJ2o6T5I48TI8kRQFZRGI3KlwQ63AA6JHC3Xel/9onC4qYxqrxurL0ZWS8blXV45IjcAhQRlNrNTbD43CojJHgMquQWRsXiGhcjgXjLhXtYceyoUKjKbSHFWOlbHabZWbUpMlt0QZGuO/bzpOc4u0flHJ3CzbsRBmisi+qoVZFGX/DZbjuIqR27yb+UY2TO7RvNLkg6NwxSLes7XI9GMoXML9JrVWcfyg+UxpHi8JHMI7hAJpY4wLnKBFGQl1U5QeNgK6wu3I42LLg2zFGizHGYhmVGsWCEvdLlV1WxsLddTfUpPi8VWs1g6TsriaTMSImRuDrw2XXLDASyYeaeCAmLCyRJDiRIt1jwYaJuh6xG+aZ79wOttTnEXfbMbEwqQmIngxLgfVEsMiZWPC4nzAjtYVzBygRMM2EXBAYd9WjGJxFu2wOa4U63UaNfWvIOUO5gMGGw0UUTNd4nkklikUhgUySGyglrnLYkgVI16WBnJcG9EW/EXc88Rx0KmcdDM2NbGQuseHlw4kMzpmh3IRCQ1wQbZQMvG4HVTTbWFxUWP2Wl0bFAY5lZr7tpHaZwzWsbG4NtLX7qjcNtPDxqBHgioDB1RsXM2GDg5gxhPRNm1sTXeO26mIlWefCB5xb0gxWIQqR1xhWtGOuy9pqDKlJpJvH913r2G31mNaaQEADCJN0QCTMr3CYiTG4PLZvlGFeT5VERd2eRjfE24k3ujD6lrABah7VN/7fQ4r5Y2CjGJvfeRTzR3AtYOqmzaAA39a2o6qisZiDJI0htdyWNuFyTe3dc1wrljnXmlbvQ9O00aXU1mAAZGRjOeW2/qkDXWFciSIiRIvSkF34KDGAbddzewtrrpXJrgqM0JZxGBMGzFQ2oQEKFOhJNhrprXtnEuPBVv4i/lm/nH+LlDzsSWJIYkAki1iTMbkW0se7Sth5jvmMT+cf1rHGUDQHMAqgN9oCY2Nj2jWtj5jvmMT+cf1rRXxi0yiiiiKmc7f0bJ+JPjWEYBrPGSARmw2jcPVbjW787f0bJ+JPjWFbMvvIrBSc2GsH9U9FtD3d1EUnycg34kVciemBAXVAAjjThftv8ADhVgTkyftj2Go3kiW30uYIG3uoj9QdBtFHUBwt1WtV4jrFttRzasDYLasFtr0KV2mYEk5A+oVcHJdvtj316OSrfbHvqzLSi1VFV+/p7K597Wv8XkPZVf+yr/AGx76Ww3JUhlLMpAIJtfX3VZhSgqV9x19FF3StrIi95D2URymwWeAkD1NR4dfuqO5H7JZMXhZmIALPp1/NyEVaSgIIPAi1JIoWfDDgBIF9oK/rXWzk9Y0aSq32yoyyuoNyM+BGX1WJ7M02jDYcMZHYeEy6Vq+0OTk7YiaWOUJneRuiSDYsWtcW7vZWV4Gw2nHmNgMalz2ATC5rdtqTOgdlTOwb1R13ax9l7+VaFtJutjdU7DaatBzjTMSMcAde1VqTk1iHTIzox1GZsxexykrc9WZVPbpxtpRHyYxQsBMosABp1AWA7xYAa30AFSKbYnIzfJmtqQuufhGw4gC/pCCL8UbjUPy221iYZRuZGQLh2lIAiy5lYC77wZigBIKp0jpYVTaHkgXvRXD0lXiDdzn5W5nM5Zom5FTsSzSqSdSSTc+6uRyDl+8T3/ALU2xW3MVu8ZKs8o3cxjjsMPksZo0soI3mYKxF36OvG9SeDxmKbGRQ73FMghjkcAYUkFpZQ2+Ki2XKoX0dzp2617cdnPPgug6ZtYEBw/S32TccgJfvE9p/alBzey/ep76b4/lPi4cVOVZnRJZo1jIj3bZIDKkYCjfZy49b1baXvpXWO29iokQRY1cQ0+HEubJHaF88CgjKPm23jLZrnTjepCmd+fBPvm2fiH6W+yXHN3L98nvrsc3En3y+w/vTTHcrMXJLkUywsJoIZIoxDnV93iWlVGmGQgtGjBmPC1uNPuWu28VhmjEM8llwjTMbQdJkKDeS5hqtibrFqb9EVLqjMSo/fVt/GP0t9l4ObWT79fYf3pQc2b/wDMr/Kf3qOl5Y4yOXFMsjSBBjWVJEQRZYcm73RAEhZS4LKx9UdutPdrbVxUSzpFtFpt3g2xm9VIbq6aCM2Qru5L5gLZhu+Nr06rcrz76tv4x+lvslv92L/8yv8AIf3rg82cn/Mr/Kf3r3a238bhRi0V5sRu8FHMstoBuXffEyOOhmGiiyq2icNddEw7EohPEqpPmK8cy6vB03bfxj9LfZZq/NvIP79fYf3qrY7ANh8SkG9iVkmYbyTRBeIG+vA2OUHXU1uMtY5ypjLbTIEcch34OWQ9D5lNT4dXfbxErOfiPBcLZb7RaKYbVdImcgMcdgFRW7yGOVbkcD6Y6juPGtj5jvmMT+cf1rH8QLMwIUHS4X1R6Y6L/hHV3VsHMd8xifzz+taay1plFFFEVM52/o2T8SfGsIwA6cfRz9LDdHXpdFtNNfZW787f0bJ+JPjWE7Py7yPMCVzYa4Xiei3CiJ/svaa4RpHaFoxvbboG5S6GwubcPbUwvODCP7mT2p+9U/FFMj5FZV32isekLKRYm518z4mmVvH+UGqrrNTqm84Y8V2bUc0QFoI5xIfuJfan710OcaH7mX2p+9Z3b+ste28fYBUfsNHY+JUuvfutFHORD9xL7V/eucRzoQR2zYebUXGq/vWdgf1xP7UlyljA3JAteJDft6K3PfrcV79io7HxXhrPWijnaw3/AC83/T+9OBzjQyPE24lQLLGxZstgFYEk2N+ArNOS2zhI0sjC4iTQdsjkJGPIkt/Aa1LkryYwrqN/IVc+quioR13Yjj3aeNcatGlSIjPtK70Q6o0l2Q2CbYvkJOm1BO6EYNsRLiDKpuEjRnm6Vr2zBbA8DmA0NTS8v1ZjfDTA5ukSVsGPSI49QrzF8nxAJkiJzgBbZ8qW4jOCdbaWGvDwqz4TkjAIFACTEi5YjosWN2NiT19uuleOqi0YRlpr2ri+m6kYBz1jBVHE85sMdvQSm/YU8Os/1ao/Fc42BkKyS4BpGU2VnSJmHX0Sb2110q6f7KKtl3aJ/COrspbE7Cw7W38UbKLEtIq+4WvfwrgHMki6cO79uJQOdqVnsvOJsws7Nsy7PfOTFCS9yGOY9fSAOvWAaXwXOrs6H5rAtFpl6CRL0blsultMzMbdpJ66X2tye2dI5VUyC+hU2Ps4e6qzhOThgxZbDYf5VCFsTKY+iTxIzEA5bcbdZ7L10o1KVQ3YP0U2C+QJ8laoOczZgczjC5ZTxfdoJDfjdwLn215gecTZ5LrDs0kOQz5UhUOQcwLXtcgi+vXTL/ZG/iZ7RKIwQFAsCR1En9zxFQ02BghctDdQ3rC/R04dQ148Oo1IPpkkAGeK1vukyAX8cMQY8PHSTx0AcpcLiozLJs3OGIuJY4mYlLqpN73IDEDsDHtphtLl3gFCNLszNugFjzRwndgeqEv6oFhYC3VUdyd2g0T2OYxWBl00UEhb3+0DrprYHqr3b2x3x+ZMHFmYg3uQAB2knQWvS80kAeCq1bC6m4yZbuNI0OAg/wClIwc5uBK70bPbR2cG0IO8cWdwb6Mw0LcT102wfOls1UeOPZjLHJfeKqQhHvoc4GjXGmtV/GckcZhMGyzYeS5f+7VZFCgXucoawN7eWtqq/JedUxIOhBzWHZccfiPOu10CcFVNNuYOC2eTlzhWVmbAMVkjVWJWM7xNcqH7Si7dE6C57ac4vnDSNVPySYjqAKC3YLEiqpicQMg0F7i3Ybm361I4uHMAEQyogAfS4DcSFJ18qrVHxIhdKdmDoMrvH87sUer4PEgdvQ/eqVtDaKY/FJOoSNJJ1e07WUBY1FmIPWV6j1ipnbmBOKEkzgIo6IBOp7gO7tqqbJw+R403e8yynQkADok5yWBXojXpC2grtQLDi3PntXK0UizNMcmUWuDZVFxwNpSLjurZOY35jE/nH9ax6YWJGXJoOj9n0x6Plw8q2HmN+YxP5x/WtBU1plFFFEVM52/o2T8SfGsK2YBvIsylxmw11F7notoLEH3it152/o2T8SfGsJ2ct5Ixlz9LD9EG2botpfqockTfHKoDhI2jXe6I2rKMvA3J1qO07veKf45MocbsRWl9TNmy9HQZhx8aZg+Pkw/WoMy5/wB+qmudO72mgW7vIE/Gvde/2ivSf6LftU14g9/v/YUrt6DPhIZRa8ZaJ7CxFrFL/wALKPKkh3e7Qe00/wBjqkjGCQ2jmst9bLJqImueGrFSex79VehCuOSD2isvrnERnTryJLb3vWr7A2bOxUoVB4jNqV/xWtYedqyXk8GwuKMUoKlXU2P+G/6H3VsGI26Ikyxx5c9znDam9r9XHv7DWZbgCRK0rE51whuZT/amzZQjMsrPYi6FRfpaXuOJ4eRFJ4bZhT0jS5JcuqhzZiOtulq1qT2ZtKZoykSMxPeC1rDgLA/VHCo2bASYjQSAy3tuiLE9wJ6+6s0tvOF3LXiNBw5BXaoKkXcI399uZKeR7RxaSXOIBQseiLE2toBp268amYyMSFOSym+ZmzZtDbQfp4VVsTyexCyRrE6yK9umgOVb8c2t7Dt0vVsw6mNFVMxUWJZiQQRxIXQMPHrJOlWKVnvn/kyHPP0XCo0YEESdk3h5NQtmvAtgxJeTU9wVbDTgNdOvWoDlPtiGD0UUSEFQGt1XIIAtodB/1d1WPGbRspuSFJ6Po734cADYeevXwFUHlbs2bEsGVtPw2Y2Gl2AsRpfqGpOvGrbwCLoXWxvZTffqCYyHboVA7X27lXdqcoJ4C/X1m+v9Cl9lYS0BkkFwW0Hh1jqPh8KSfkjfQyXPY2mpsB5d4vwpphxNhWKCS44Zer391eXQGw1XxbTVf8WA5z1x3xVi2OI3lFlFuJBJAPl5j/xWocksEuHZ2Nl3mXLrppmNh/MfZWQYPa7LJHdBZDooFuIsAD51qUWJRkUOuY24A9EX7zb21TqO6l4qeEnu7Se4KduL6jer0IxjsM8NAdFdNAeOp4C9Vrb2zcPOekMj39ZQLn8Q6/bVfdpA6yR6FTcAtf8AodVTOP21Coznj2cTfsrtTtTLQ0h0DsPOizDZX0HBzCSezQ7ZnNZ7yl2S0R0ObKeq/DttSmyhJI6whWChSVHVqdSb26zTmbGSzO0mUC50v1W4V1yfxbnEEEuZ2BtpdSvHQjVR26dVcmQZacvOFdrh7Wh2ExjxXmJ2LIUuqSSEH6qkKAOIGbVvKqg8YXFKp3o9KthGLSXyXt3WPHuBrQMJhpAS88pjs5yoCxdj2WDABfK9UnbUyfL3JkZFMwBKgknoAZR3E6eFWbM3Exss21vLgATOPPZ4KvOBra9rLbN61t8bX7+2tj5jvmMT+cf1rHDa2huMq2J4kb02JrY+Y35jE/nH9a1FmrTKKKKIqZzt/Rsn4k+NYRgbZ4739bD+r63qtwrd+dv6Nk/EnxrB8EenHrbpYfW17dFqHJE2xVrNlDgbzQObP6v1u+mhHj5qKcYhrqxzZ7yXzW49HXSmmnd7xUWZKZXVv6y0AeP8oHvrnOO0fzUBh3e81JRvDdd/H2n9q5bvt5m/uFDHt9+g9gr3N5ewCiXhup5T8tCGx+WwjQk//wBEa3PXxkANj1ka66gaLyU2hI8cZUAQpcNmUaHTMBf6+o07xWNiSxBDZWBuGBOZSOBBHXVq2Lyi3jkPKsOIa2pA3GIPC7gjoSdV9F18q4WiiagBBgjzXehWa2WmIOfZ2rTsVgo98Vjb04BkFm0GXpBRbi5HZS21cWjtmBMWYDMAoZww0sToeyq1sPaMcZffRqMSLH0hsqj7QA9bxW9W7Z80BwxkjUdJmTUAnMNRmvrqCLdlZTqRMty1Pd4aE9hkZrRL4h2egPH6bd662Ls8CISKcxZja1wwtxvx167dwNMdsbYReizgMCA27JzE2U2sRxsQSeq9Pdjhsr6jKSVJLkIAFU3KrxNja99bd1Q+K2ChkaSJ45Sb2DFrg6aKSSOru7K7Mc1lNrcjx5K5PE1CTz4Yeiru0dqvMbouYDMIySmhPRbQkEtYm51vr2UphHW5GdQFGUu2R7n7IHULdV+A6+FP8VyYkkiMjlQ5BsltbKWDKCAFv/hFuqnOG5J4dcOAyOXktYPYbpbjMQo0BNtGOutSndCQq0Mc08y4bDEXY6aWXT7K38ePl21cNj83iKVMoLMTqT8ey1QO39nQxyXwqCO1ratcEfWBNz2dtWnZHLR44wJvSsLDog5/PS1KdelPxZbrypSq3QWeGvsm3KnA4ND8mKKHVUkB7dWBHs+PdUbjdnhMrpIwB1UAEaaaf/tK4jZ74nEzS4kNGjqR27o6BCQNbWHHheneJxcsL2KxzK2iOgvY9hHV4VWtQL5cMBzp28FbspNOGgyddvHLD0xEqKmxD/dv46VEYjGsxssZJ7xVjmjn3e+aF3Uk8CLjvKjW1IQYqQpnVRHFcKzLqwPUO6/aTVKlTe0/J5xhutA123dNlDPJLGhzhI/EdL2f1wpHBcpzELRKb2IL9djxF6e8rNkxlRLC8ja2ZJh0vxKdAR/V6hMJiI49ZVBt9o2Ud5q62mNc+zmVWdVD2ZYduHPivTNIxzEsBxvfj51B4aVXnRjnIMwtu9WJA0+F6bcp+Uhe6LdVPdZmHh9VfHU9lJ8n5CBFmbd3fXo3uDey279K0KVC4yTmse01xUdAyC9IFtLgZVtfjbem1++tk5jvmMT+cf1rHGNxe97quvb6U61sfMd8xifzj+tXVSWmUUUURUznb+jZPxJ8awbCtZkPHpYfjw9Vq3nnb+jZPxJ8awSDinjh/wDK1ETOWXMhYgC7k2Gg4dVJK2o4/wAwNKwoWQBQSS5sBx4CpqHZcEIzYl7t92o18yK8AUimuM2gGDBWYXBGXxy99u2k8bjgysAxGYdLW2uZb8PwmpTDbRjd93hMFvH6gEZ38bAHTvq47E5tMXiiGxgjwsX2I1UzkdlxdU6teke4VAUWtiFcqdI1ql6f6hBjvyxwmcVQ8Cys11JAtGLWOuTv8/dTkYF2Qqpa5V7afaJPvB93dWoHmfgX5rFTj8wI3wC1yebTEJ6mLjb8URX4MaCi2UPSFYgjDGfPE6+G2eaz2HZUlzxHHLYDtJB8gaa7S5Lu4ACaamwPC4X9q0ocjtpJwbDMO52B96frXJ2LtRP/AE6P+GSP/URRtJrTIUaluqVGXHRHpiD27aQsyw8WNwyrHLF8ow4PRVrhk/A41Q92oq0bKnZojHCzEEgmKQBZQe0H1X8iDYcKsRw+0ho2BYjxjPwY1C4zDY9TdcDN+Hd39hFe1KbXiHCfXx95XGlVcwy0x6HiPaFM7HwkpYxm69ZVrgC1xmYHjxt51O4jDwacTJlCjdroG+0oN/fVDj5Q7Uj6PyDFEDqbDSMvl0Tbyp9By3xnCTZmNA/9uKX4Op+IqmLC0A3dd/orDrY5xl3krZjGmzh4TEwYDeK2l2GhNjprYfyikMRjZN06ZbuSLZFvppcE6adHj41HYTlZnGuHxkZ7JMFL/mQMfdUnhdsysPRoT3GOVP8AuItRdZ3nftj9162uzYeibYWSWfoywK27W4JADAdmo1rnJmljyRkXZSxtbhwubE6VNw43F8ThXOlrqyf/AGvScPysMCuDYeLR38unXJ1B5IzPdyV1FZomIG2OGKZ7Uw27xQk9Mt2F3BUhlIFxl/enM5UhQkUMec6XsSFH1itreQ7qWxeAxMnCEKQfWdhc9vqZ6aYrZGLIHRZuq0YQ++SSM+wGpfZqkmBge7zz+u5MCIdcy6JOIw15+mwSbkvnMcjloxwGVdOJyoq2tr19tRp23E0LxDV5CvqrxI7usk9lPJNh7Qswhw8Kl1ylp8QRf+CGMm3DTOaiJObjaky5Xx8GHUjVMLGwU8OLDI7cPrE10+xl2LjGc654emEqH2prchOUac46YKD2ntpcOCJZFRgCFRiWde8RDUfxlBVDxe0mnI3QspOrOQZTrrYAZU8te+n23uQmLwTWxOEvEOM8JLJYcTpbL/GFpfAbK2fIoEUjI/a+t/67qtUrOymPhz3OJ54Lk60ue6XiRsMAoNtmRqGc6todXB1uL36yad7MmKNGy2uJV8NbjrrrauxZIDci6ngygW9vVSOD4p+an+qp3cIOKhUeHmQI57krmuLniVU+2U1snMd8xifzj+tYynqj8Cf901s3Mb8xifzj+tTXFaZRRRRFActdiPjcK0CMqsxU3a9tD3Vm8fNBiRb/AIiDQxng/wDdgjs671s9FEWRbM5lyoG9xp0JPoo7HUAaMzHs7KsezOanZsJDNG87ds0hN/FVyofZV6ooia4HAxQqEijSNB9VFCr7BTqiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiq7trkRgMVcy4ZMx4ul0c+LIQT53qxUURZviOaqNVZcPipVVvqTKJUHcLZW95quxczeJUj/AImAgOreow0W+ltbca2qiiLFl5ncTYD5TD6qjg3U+f8A8Ve+b7krJs+OVJJEcySFwUB0Bvob+NW6iiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooiKKKKIiiiiiIooooi/9k=");
            background-padding: center;
            background-size: cover;
        }

        .price {
            font-size: 15px;
        }

        .item_desc {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .item_oder {
            width: 500px;
        }

        .btn_oder {
            margin: auto;
            width: 100px;

            display: block;
        }

        .wrap {
            width: 500px;
            margin: auto;
        }

        .rate {
            color: blue;
        }

    </style>

    <script>
        $(document).ready(function () {
            get_rate();
        });
        function get_rate(){
                $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rate",
          data: {},
          success: function (response) {
              let now_rate = (response['rate'])
              $('#now-rate').text(now_rate)

          }
        })
      }

        function order() {
            alert('주문이 완료 되었습니다')

        }
    </script>

</head>

<body>

<div class="wrap">
    <div class="item_img"></div>
    <div class="item_desc">
        <h1>신라면 블랙을 팝니다. <span class="price">2,000/개</span></h1>
        <p>이 라면은 특벽히 더 맛있습니다!</p>
        <p class="rate">달러-원 환:<span id="now-rate"></span>1219.15</p>
    </div>
    <div class="item_oder">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>수량을 선택하세요--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <button type="button" onclick="order()" class="btn btn-primary btn_oder">주문하기</button>
    </div>
</div>


</body>

</html>

...

'웹개발 종합반 숙제' 카테고리의 다른 글

4주차 숙제(app.py)  (0) 2022.08.24
4주차 숙제(html)  (0) 2022.08.24
3주차 숙제  (0) 2022.08.24
웹개발 종합방 1주 차 숙제  (0) 2022.08.23

댓글