스파르타코딩클럽 1주차 / 숙제

스파르타코딩클럽 1주차

실습

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>

    .mytitle {
        margin: 50px auto auto auto;
        width: 500px;
        height: 250px;

        background-image: url("https://didierdubot.co.kr/web/product/small/JDRNRWS12AL_d_700.gif");
        background-size: cover;
        background-position: bottom;

        border-style: solid;
        border-width: 1px;
    }

    .mytitle2 {
        width: 500px;
        margin: 20px auto auto auto;


    }

    .wrap {
        width: 500px;
        margin: 20px auto auto auto;
    }

    .button {
        width: 100px;
        margin: auto;
        display: block;
    }
</style>

<div class="col-auto">
    <label class="sr-only" for="inlineFormInputGroup"></label>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <div class="input-group-text">주문자 이름</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
    </div>
</div>
<div class="col-auto">
    <label class="sr-only" for="inlineFormInputGroup"></label>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <div class="input-group-text">수량</div>
        </div>
        <div class="form-row align-items-center">
            <div class="col-auto my-1">
                <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                    <option selected>-- 수량을 선택하세요 --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
    </div>

    <div class="col-auto">
        <label class="sr-only" for="inlineFormInputGroup"></label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text">주소</div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
        </div>
    </div>
    <div class="col-auto">
        <label class="sr-only" for="inlineFormInputGroup"></label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text">전화번호</div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
        </div>
    </div>

    <div class="col-auto my-1 button">
        <button type="submit" class="btn btn-primary">주문하기</button>
    </div>
</div>

정답

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">

<style>
    * {
        font-family: 'Song Myung', serif;
    }
    .wrap {
        width: 500px;
        margin: auto;
    }

    .item-img {
        width: 500px;
        height: 300px;

        background-image: url("https://img.wizwid.com/PImg/706310/bsc/706310503z.jpg");
        background-position: center;
        background-size: cover;
    }

    .price {
        font-size: 20px;
    }

    .item-desc {
        width: 500px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .item-order {
        width: 500px
    }

    .btn-order {
        margin: auto;
        width: 100px;
        display: block;
    }
</style>
<script>
    function order(){
        alert('주문이 완료되었습니다!');
    }
</script>

보완할점

부트스트랩 주소
https://getbootstrap.com/docs/4.0/components/forms/

1)
수량 버튼을 Forms 에서 찾느라 코드가 지저분해졌다.. 맞지도 않고
=> Input group 에서 찾으면 된다.

2)
자바스크립트 빼먹었다.. 요청사항 제대로 볼 것
=> 스타일 밑에 스크립트 넣어주고, 상호작용하는 곳에 입력할 것

<script>
        function order(){
            alert('주문이 완료되었습니다!');
        }
</script>
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>

3)
<span></span> 글자 크기, 색상 변경 세세한 것 수정시 이용