코딩 개발일지

TIL 3일차 본문

AI 본 교육/AI 1주차

TIL 3일차

호기호 2023. 8. 9. 20:55

오늘은 어제 만들다 만거 마무리 작업했다.

나름 잘 나온것 같아서 만족중... 팀원들도 만족 했을까..? 모름

 

팀원분들이 백엔드작업이랑 기능 추가를 너무 잘해주셔서 고마웠다!!

나는 CSS랑 HTML 했음.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>1조 - 살쾡이들</title>

        rel="stylesheet" />
    <style>
        * {
            font-family: "Noto Serif KR", serif;
        }

        .mypost {
            width: 800px;
            height: 1100px;
            margin: 100px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
            padding-top: 100px;
            background-color: rgb(147, 142, 189);
            position: sticky;

        }

        .mycards {
            width: 95%;
            max-width: 800px;
            margin: auto;

        }

        .mycards>.card {
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: #fafafa;
        }

        button {
            float: right;
            margin-top: 10px;

        }

        .playlist {
            font-size: 25px;
            margin-left: 30px;
            color: rgb(255, 230, 230);
        }

        .about_playlist {
            float: right;
            margin-right: 25px;
            text-decoration-line: none;
            color: rgb(255, 230, 230);
            font-size: 18px;
            text-align: center;
        }

        .user-icon {
            width: 60px;
            border-radius: 20%;
            margin-right: 20px;
            float: left;
        }

        .playlist hr {
            border: 0;
            height: 3px;
            background: #f0f0f0;
            width: 95%;
            margin-top: 30px;
            margin-bottom: 40px;
        }
    </style>

    <script>
        $(document).ready(function () {
            set_temp();
            show_comment();
        });
        function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                console.log(data)
            });
        }
        function save_comment() {
            let formData = new FormData();
            formData.append("sample_give", "샘플데이터");

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                //console.log(data)
                alert(data["msg"]);
            });
        }
        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                alert(data["msg"])
            })
        }
    </script>
</head>

<body>
    <div class="mypost">
        <div class="playlist">[Play list] 우리집 고양이도 듣는 띵곡 모음
            <a class="about_playlist">3곡 ∙ ∙ ∙ 10분 32초</a>
            <hr>
        </div>
        <div class="mycards" id="comment-list">
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <button type="button" onclick="window.location.href='/index_이기호.html'"
                            class="btn btn-light">▶️</button>
                        <img src="../static/images/giho.png" class="user-icon">
                        <p>이기호</p>
                        <footer class="blockquote-footer"> 조장 ∙ 내겐 어려운 코딩 ( feat. 스파르타 )</footer>
                    </blockquote>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <button type="button" onclick="window.location.href='/index_이솔.html'"
                            class="btn btn-light">▶️</button>
                        <img src="../static/images/Jack.png" class="user-icon">
                        <!-- 이미지1:1 비율로 올리기 -->
                        <p>이솔</p>
                        <footer class="blockquote-footer"> 조원 ∙ 낭만고양이 ( feat. 체리필터 )</footer>
                    </blockquote>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <button type="button" onclick="window.location.href='/index_김정규.html'"
                            class="btn btn-light">▶️</button>
                        <img src="../static/images/Jack.png" class="user-icon">
                        <!-- 이미지1:1 비율로 올리기 -->
                        <p>김정규</p>
                        <footer class="blockquote-footer"> 조원 ∙ 닥치고 스쿼트</footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

이런 페이지 총 4개 만듬!!

재생버튼 누르면 다음 페이지 넘어간다.

수정하기로 수정도 되고, 새로 만들기해서 추가 가능하고 처음으로버튼 누르면 첫 화면 리스트로 돌아간다.

x버튼누르면 목록에서 제거도 됨. 팀원분들이 만든거 보면서 공부해야겠다... 

저작자표시

'AI 본 교육 > AI 1주차' 카테고리의 다른 글

WIL1주차 / TIL 5일차 / KPT 회고  (0) 2023.08.11
TIL 4일차  (0) 2023.08.10
TIL 2일차  (0) 2023.08.08
TIL 1일차  (0) 2023.08.07
'AI 본 교육/AI 1주차' Related Articles more