TIL 5일차_2024.12.16(월)

(왕초보)웹개발 종합반 3주차

  1) 기록하기 버튼 누르면 새로운 카드 생성하기

출처 : 스파르타 내일배움캠프 강의

출처 : 스파르타 내일배움캠프 강의

• script 태그안에 새로운 function 함수 작성
• 기록하기 버튼에 onclick 작성
• div안에 id 선택자 가져오기
• 메서드 val을 통해 postbox에 값들 변수에 담기
• 카드 html코드 변수에 담기
• div안에 class 선택자 선택 후 append 메서드

function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let comment = $('#comment').val();
            let star = $('#star').val();
            
            let temp_html = `           
            <div class="col">
                <div class="card">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${star}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        }

 

temp_html = ``; 부분에 이렇게 html 코드를 넣을 수 있다는 점이 신기했다.

* 추가된 내용이 DB에 따로 저장되지 않고 새로고침을 하고 나면 사라지는 점이 아쉬웠다.

아마 다음 4주차에서는 DB 저장에 대해 배울 수 있을 것이라고 기대해본다.

 

  2) Fetch

출처 : 스파르타 내일배움캠프 강의

강의에서는 fetch 코드를 그대로 복사하고 사용만 해서

복습 차원에서 강의노트를 토대로 코드의 의미를 한 줄 한줄 공부했다.

 

        function q1() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            $('#names-q1').empty();

            fetch(url).then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(a => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL'];

                    let temp_html = ``;
                    if (gu_mise > 40) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
                    }
                    $('#names-q1').append(temp_html);
                });
            })
        }

 

딕셔너리 개념이 아직 완전하게 마스터되지는 않았다.

좀 더 주의해서 복습해야겠다.

 

3) 숙제

출처 : 스파르타 내일배움캠프 강의

막상 숙제를 하려니 쉽지 않았다.

마진, 패딩은 주지 않고 숙제에서 지시한 부분만 따로 했다.

 

구글 폰트를 모두 적용하게 될 경우, ( * {})

일부만 다른 폰트로 지정하고 싶을 경우에는 

해당 태그에 id를 부여하고 폰트를 적용해야 적용이 된다.