스파르타 코딩클럽에 웹개발 종합반 9월반 수업을 듣고 있다. 헬린이처럼 코딩에 입문한 일명 '코린이'다. 데이터 시각화를 배우고 싶어 시작한 길인데 일단의 기초적으로 코딩의 전반적 구조와 개념을 배우고 싶어 선택했다. 시작이 좋다. 다행이 수업도 재밌고 따라갈만 하다. 11일 완주반으로 빡세게(?) 말 그대로 '스파르타식'배움을 이어가고 있는데 3일차인 오늘 1주차 수업일정이 끝났다.

아직 미약하지만 배운 것들을 잘 되짚어가며 하나씩 첫 숙제를 해봤다. 숙제는 Bootstrap을 이용해 지금껏 배운 HTML과 CSS의 태그들을 활용해보는 것으로 판매할 상품의 이미지와 내용 및 정보 input창을 브라우저에 구현해보는 것이었다. (다다음주 추석을 앞둔 시점이라는 점을 상기하며 과제에 적용해봤다.)

<!-- 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>1주차 숙제 | 웹개발종합반(2021년9월)</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=Hahmlet:wght@200&display=swap" rel="stylesheet">

<style>
    * {
        font: font-family: 'Hahmlet', serif;
    }
    .image {
        width: 500px;
        height: 400px;
        margin: auto;
        display: block;
    }
    .thema {
        font-size: 36px;
        font-weight: bold;
        width: 500px;
        margin: 10px auto 10px auto;
    }
    .sub {
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
    }
    .context {
        width: 500px;
        margin: auto;
    }
    .input-group {
        width: 500px;
        margin: 15px auto 5px auto;
    }
    .btn {
        width: 100px;
        margin: auto;
        display: block;
    }
</style>

상주곶감 가격: 70,000원 / 개 (회원카드특별상품)

프리미엄 한가위 선물 상주곶감세트입니다. 품격있는 선물로 부모님과 친지 가족들 그리고 지인들에게 이번 한가위 감사인사를 전해보세요. (한 회원카드당 최대 3세트 구매제한)

<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 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">1세트</option>
        <option value="2">2세트</option>
        <option value="3">3세트</option>
    </select>
</div>

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

<button type="button" class="btn btn-primary">주문하기</button>