웹개발종합반 첫주차 HW

<!-- 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>

<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<title>1주차 숙제</title>
<style>

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

    .carpet{

        width: 600px;
        height: 450px;
        margin: 0 auto 30px auto;

        background-image:url(carpet.jpeg);
        background-size: cover;
        background-position: center;
    }

    .price{
        font-size: 20px;
    }

    .btn{
        width: 100px;
        margin: auto;
        display: block;
    }

    .wrap{
        width: 600px;
        margin: auto;
    }

</style>

    <script>
    function order(){
        alert('주문이 완료되었습니다!');
    }
    </script>

<h1>카펫을 팝니다!<span class="price">가격: 10000000000000만원/댕</span></h1>
<p>이 카펫은 사실 특별한 힘을 가지고 있어요. 카펫이 좋아하는 간식을 들고 소원을 빌면 :D! 짜자잔 간식이 사라진 답니다. 하나 들이세요! 카펫샴푸 향이 아주 좋아요</p>

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">주문자이름</span>
    </div>
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">수량</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
            <option selected>--수량을 선택하세요--</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>

    <div class="form">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default"
                   aria-describedby="inputGroup-sizing-default">
        </div>
    </div>

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">전화번호</span>
    </div>
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

    <input class="btn btn-primary" type="button" onclick="order()" value="주문하기">
</div>
</div>

스파르타 코딩 클럽 첫주차 숙제를 끝냈다. 분명 별로 어렵지 않게 만들 수 있을 것같았는데 왜 항상 볼때는 쉽고 내가 만들면 와장창인지 모르겠다. 부트스트랩 또는 템플릿을 활용하여 쇼핑몰을 만드는 것이었는데 내가 직접 하나부터 열까지 하려니 이게 도대체 왜 이렇게 나오지???????싶은 에러들이 많이 났었다. 그래도 아무리 구글링해도 모르는 것들은 Slack질문들을 참고해보면서 잘 고쳐서 겨우겨우 몇시간만에 (ㅋㅋㅋㅋㅋ) 홈페이지를 완성해서 뿌듯하긴 하다. Javascript에 비해 훨씬 쉬운 개념이라고 생각했던 HTML과 CSS도 이렇게 내 마음처럼 되지 않는다니 앞으로 연습이 정말 많이 필요할거 같다고 생각했던 한 주 였다..