정렬,파비콘

Aug 05, 2024

Contents


 <div class="container mt-5">
        <h2 class="mb-3">쇼핑</h2>
        <div class="list-group">
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <input class="form-check-input me-1 item" type="checkbox" value="1000" data-price="1000">
                사과 - 1,000
                <input type="number" class="form-control" style="width: 50px;">
            </div>

세로정렬, 가로정렬 알기

정렬

정리하기-v


align-items-center

어떤 애가 체크되어도 실행되는 것은 똑같다.

전체 체크 for 계속 ing


<div class="container mt-5">
        <h2 class="mb-3">쇼핑</h2>
        <div class="list-group">
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <input class="form-check-input me-1 item" type="checkbox" value="1000" data-price="1000" checked>
                사과 - 1,000
                <input type="number" class="form-control" style="width: 50px;" value="1">
            </div>
            <div class="list-group">
                <div class="list-group-item d-flex justify-content-between align-items-center">
                    <input class="form-check-input me-1 item" type="checkbox" value="2000" data-price="1000" checked>
                    딸기 - 2,000
                    <input type="number" class="form-control" style="width: 50px;" value="2">
                </div>
                <div class="list-group">
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <input class="form-check-input me-1 item" type="checkbox" value="3000" data-price="1000"
                            checked>
                        바나나 - 3,000
                        <input type="number" class="form-control" style="width: 50px;" value="5">
                    </div>
                </div>
                <p class="mt-3">합계금액: <span id="total">20000</span></p>
            </div>

돔 트리 ??

초보)) 1. 이벤트가 발생하나?


 <script>
                $(".item, .qty").change(function () {
                   alert("이벤트 발생")
                });
            </script>

여기서 끝나면 안돼고!!!

체크를 전부 다시 해보기

숫자 밑으로 다시 내려보고

숫자를 바꿔보고

하다보면 이벤트가 완성이 안됐음.

이벤트가 먼저 완료가 되야 함.

이때 gpt 활용

말 잘 안해주면 더 자세히 물어봐야 함.


바닐라 자바? 순수 자바?

change와 input의 차이?

순서

레이아웃 헤더/풋터 복사(화면구현??-v)

순수html을 만들기

다른 사람들이 코드 연습 바로 가능

이벤트 분석하기

로직을 짜는 것.


 <script>
                $(".item, .qty").on(function () {
                    //1.정보(qty,price)
                });
            </script>


<script>
                $(".item, .qty").on(function () {
                    //1.정보(qty,price)
                    let price = $(this).data("price");
                    console.log(price);
                });
            </script>

부모찾는 것 : closet

find : 찾는 것?

siblings.find ⇒ 더 간편

핵심

closet

siblings

체크박스는 무조건 다 돌리는 것. 체크된 것만 하는 것이 아니라.

총 금액을 받을 때 검증을 해야 해. 클라이언트 정보는 바로 쓰기보다는 검증을 해야 한다.

//장바구니 아이디, 수량, 가격, 총 가격이 필요-v

변수에? 카멜을 먹지 않는다-v

cart-id로 하이픈을 써야 한다.

코드를 쓰고 브라우저를 열어보았더니, 이런 문구가 있다.

이럴 때는 구글링해서 알아보면 된다!

Contents

순서

<div class="container mt-5"> <h2 class="mb-3">쇼핑</h2> <div class="list-group"> <div class="list-group-item d-flex justify-content-between align-items-center"> <input class="form-check-input me-1 item" type="checkbox" value="1000" data-price="1000"> 사과 - 1,000 <input type="number" class="form-control" style="width: 50px;"> </div>

<script> $(".item, .qty").on(function () { //1.정보(qty,price) let price = $(this).data("price"); console.log(price); }); </script>