진행 날짜 : 2023-03-20
목적 : Github블로그 생성 -> 내용 포스팅
생성 및 태마, 이름등 변경 은 성공 하였으나 포스팅이 업데이트 되지 않아 출력이 안됌.

포스트 생성 !

현재 적용 상태.....(포스트들이 안보임....)

익일 다시 (오전) 진행 예정

금일 교육 진행 내용 1주차 2회 차 진행

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

    * {
        font-family: 'Gowun Dodum', sans-serif;
    }

    .mytitle {
        background-color: green;
        color: white;

        height: 250px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 범위안에 내용물들 정렬 column세로 row가로 정렬 */
        /* display / flex-direction /align-items /justfy-content는 항상 같이 다님 */
        /* display / flex-direction /align-items /justfy-content는 범위안에 내용물들 정렬 ex:가로 세로등등 */

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
        background-position: center;
        background-size: cover;
        /* background-image,background-position,background-size는 항상 같이 사용 */
        /* 어둡게하는 방법 
        이미지url앞에 , 를하고  linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))를 넣기 */
    }

    .mytitle>button {
        width: 250px;
        height: 50px;
        background-color: transparent;
        /* background-color:transparent;는 배경화면 투명이라는 뜻 */
        border: 1px solid white;
        color: white;
        /* border는 button의 외각 굵기 및 컬러 */
        border-radius: 50px;
        /* border-radius는 모서리 둥글게 */
        margin-top: 20px;

        box-shadow: 0px 0px 5px 0px gray;
    }

    .mytitle>button:hover {
        border: 5px solid white;
        /* button:hover에서 border는 마우스를 올리면 변하는 외각 굵기*/
    }

    .mycomment {
        color: gray;
    }

    .mycards {
        width: 1200px;
        margin: 25px auto 25px auto;
    }

    .mypost {
        width: 500px;
        margin: 25px auto 25px auto;
        /* margin - 외부에서 여백을 주는 것 예시: margin: 30px(상단) 0px(우측) 0px(하단) 0px(좌측); */
        padding: 20px 20px 20px 20px;
        /* padding - 내부에서의 여백을 주는것 
        예시: padding: 30px(상단) 0px(우측) 0px(하단) 0px(좌측);
        예시2: padding-top: 30px;
        (예시2는 예시1과 같다) */
        box-shadow: 0px 0px 15px 0px gray;
    }

    .mybtn {
        margin-top: 20px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .mybtn>button {
        /* .mybtn > button은 .mybtn 안에 button을 의미함 */
        margin-right: 15px;
    }
</style>
<script>
    //$(document).ready(function () {}자동 출력
    $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
            let number = data['temp']
            console.log(number)
            $('#temp').text(number)
            //#위치 또 틀림....#은 ''안에 있어야한다!
        })
        fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
            let rows = data['movies']
            $('#cards').empty()
            //하......()좀 빼먹지 말자
            //$('#cards').empty()는 rows.forEach전에 하자~
            rows.forEach((a) => {
                let title = a['title']
                let desc = a['desc']
                let star = a['star']
                let comment = a['comment']
                let image = a['image']

                let star_image = '⭐'.repeat(star)
                //star_image 다른 title등과 같이 변수 이름임
                //그리고 star_image에서 _ 이서 말고 - 이거 사용하면 안됀다....이유는 몰라....
                //별은 1별점은 별이 한번 반복,2별점은 두번, 3별점은 3번 반복된 개념으로 적용 방법이 조금 다르다
                //.repeat(star)의 의미는 ()안의 star를 몇번 반복하였는가 라는 뜻임

                //console.log(title,desc,star,comment,image)
                let temp_html = `<div class="col">
                                    <div class="card h-100">
                                        <img src="${image}"
                                            class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">${title}</h5>
                                            <p class="card-text">${desc}</p>
                                            <p>${star_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`
                               

                $('#cards').append(temp_html)
            })
        })


    }) 
</script>

영화 제목

내용이 들어갑니다

⭐⭐⭐

나의 의견

영화 제목

내용이 들어갑니다

⭐⭐⭐

나의 의견

영화 제목

내용이 들어갑니다

⭐⭐⭐

나의 의견

영화 제목

내용이 들어갑니다

⭐⭐⭐

나의 의견

</div>

완성된 URL : http://127.0.0.1:5501/frontend/2nd%20week%20of%20homework.html