코딩 개발일지

웹개발 종합반 1~2 주차 복습 본문

AI 사전캠프/웹개발 종합

웹개발 종합반 1~2 주차 복습

호기호 2023. 8. 2. 15:52
<!DOCTYPE html>
<html lang="en">

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

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <title>기호 연습페이지</title>
    <style>

        .title {
            font-family: 'Handjet', cursive;

            width: 400px;
            height: 350px;

            color: crimson;
            font-size: 50px;
            font-weight: bold;

            text-align: center;

            background-position: center;
            background-size: cover;
        }

        .ID {
            margin: 0px 0px 0px 92px;
        }

        .PW {
            margin: 10px 0px 0px 40px;
        }

        .button {
            margin: 20px auto 0px 150px;
        }

        .set1 {
            width: 350px;
            margin: 20px auto 0px auto;
        }

        .loading {
            margin: 30px auto 0px 20px;
        }
        .weather {
            font-size: 25px;
            margin: 0px auto 30px 120px;
            font-family: 'Handjet', cursive;

        }
    </style>
    <script>
        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                let number=data['temp']
                $('#temp').text(number)
            })
        })
    </script>
</head>

<body>
    <div class="set1">
        <h1 class="title">AI Practice</h1>
            <div class="weather">
                Now SEOUL : <span id="temp">20</span> °C
            </div>
        <p class="ID">ID : <input type="text" /></p>
        <p class="PW">Password : <input type="text" /></p>
        <div class="button">
            <button type="button" , class="btn btn-outline-primary">LOG IN</button>
            <div class="loading">
                <div class="spinner-border text-danger" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

혼자 만들어봄. (오픈북 ㅋㅋ 사실상 별로 한게 없음)

요렇게 나옴.

저작자표시

'AI 사전캠프 > 웹개발 종합' 카테고리의 다른 글

웹개발 종합반 3~4 주차 복습  (0) 2023.08.04
웹개발 종합 5주차  (0) 2023.07.28
웹개발 종합 4주차  (0) 2023.07.26
웹개발 종합 3주차  (0) 2023.07.25
웹개발 종합 2주차  (0) 2023.07.20
'AI 사전캠프/웹개발 종합' Related Articles more