패스트캠퍼스에서 백엔드과정 프리코스로 [프로그래밍기초] 수업을 듣고 있지만, 설 연휴기간에 스파르타코딩클럽에서 제공하는 무료강의 2개(덕담코딩,코딩용어)를 듣고 나서 핵심만 딱딱 집어준다는 느낌이 들어 웹개발종합반 국비지원 강의도 신청해서 듣게 되었다. 5주 코스인데 최대 8개 강의까지 들을 수 있어서 하루에 8개씩 쭉쭉 듣고 있는 중이다.

1주차 과제

아래 기획서를 보고, 부트스트랩을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요.(아이템은 랜덤)

• 기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄워주세요.
  

(1) html(body부분)

input요소들은 부트스트랩에 있는 템플릿을 사용하였으니 참고하면 될꺼 같다.

<div class="wrap">
    <div class="product_photo"></div>
    <div class="product_desc">
        <h1>락앤락 퓨어텀블러<span>가격:12,500원/1개</span></h1>
        <p>다섯가지 파스텔 컬러로 만나는 퓨어텀블러! 한손으로 간편하게 오픈하는 스윙형 뚜껑. 좌우로 돌려 간편하게 오픈하는 스윙형 마개로 운전 중에도
            한 손으로 캡을 열어 마실 수 있으며, 오픈 된 마개에 스트로우를 꽂아 사용할 수 있어 편리합니다. 아래가 좁아지는 디자인으로 그립감을 살려
            한 손에 들고 마시기 편리하며, 차량 컵 홀더에도 거치하기 좋아요.</p>
    </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">
            <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" onclick="alarm()">주문하기</button>
</div>

(2) CSS,Javascript

<style>
    * {
        font-family: 'Nanum Pen Script', cursive;
    }

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

    .product_photo {
        width: 400px;
        height: 400px;
        margin: 10px auto;
        background-image: url("http://img.danawa.com/prod_img/500000/990/828/img/8828990_1.jpg?shrink=330:330&_v=20210309173752");
        background-position: center;
        background-size: cover;
    }

    .product_desc span {
        font-size: 24px;
    }

    .product_desc p {
        font-size: 20px
    }

    .btn-primary {
        display: block;
        margin: 0 auto;
    }
</style>

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

(3) 최종 화면

(4) 느낀점

부트스트랩 템플릿을 이용하니 만족스러운 디자인으로 웹페이지를 만들수 있어서 좋은 거 같다. 처음부터 하나하나 짜보는 것도 중요하지만 필요한 기능을 찾아서 적절히 사용하는 것을 많이 할거 같아서 중요한 부분과 필요한 코드를 따로 정리하여 한눈에 볼 수 있도록 보관해야 겠다.