1주차 마무리 (연습 또 연습)

usop 2022. 5. 23. 22:06

<code>

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 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 href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Jua&display=swap" rel="stylesheet">

    <style>
        *{
            font-family: 'Black Han Sans', sans-serif;
        }
        .wrap{
            width:700px;
            margin:auto;
        }
        .pt-3{
            padding-top:30px;
        }
        .pt-5{
            padding-top:50px;
        }
        .pb-3{
            padding-bottom:30px;
        }
        .mt-3{
            margin-top:30px;
        }
        .mt-5{
            margin-top:50px;
        }
        .product-text{
            margin-left:180px;
            margin-right:20px;
        }

        .inline{
            display:inline-block;
        }
        .product-image{
            width:700px;
            height:350px;
            text-align:center;

            background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1JK89xFuF_3gNJXUvhctY4-6nwgyTZjnekQ&usqp=CAU");
            background-position: center;
            background-size:cover;
        }
        .btn-order{
            width:150px;
            margin:auto;
            display:block;
        }
    </style>
</head>

<body>
<div class="wrap">
    <div class="product-image mt-5"></div>
    <h1 class="product-text pt-5 pb-3 inline">마카롱을 팝니다</h1><span> 가격:15,000원 / 1세트</span>
    <p class="pb-3">이 마카롱은 사실 특별한 힘을 가지고 있어요. 마카롱을 1개만 먹어야지 하고 먹으면 어느덧 10개를 먹고 있는 자신의 모습을 볼 수 있어요. 저희는 당일 구운 마카롱만을 보내드립니다. 지금 주문주세요!</p>
    <form>
        <div class="form-group pb-3">
            <label for="order">주문자</label>
            <input type="email" class="form-control" id="order" aria-describedby="emailHelp"
                   placeholder="성함">
        </div>
        <div class="dropdown pb-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                메뉴 선택
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">A세트( 딸기요거트 / 로투스 / 말차초코칩 / 바닐라 )</a>
                <a class="dropdown-item" href="#">B세트( 복숭아요거트 / 블루베리 / 솔트카라멜 / 얼그레이 )</a>
                <a class="dropdown-item" href="#">C세트( 오레오 / 인절미 / 페레로 / 티라미수</a>
            </div>
        </div>
        <div class="form-group pb-3">
            <label for="order-address">주소</label>
            <input type="email" class="form-control" id="order-address" aria-describedby="emailHelp"
                   placeholder="주소">
        </div>
        <div class="form-group pb-3">
            <label for="order-tel">연락처</label>
            <input type="email" class="form-control" id="order-tel" placeholder="연락처">
        </div>
        <button type="submit" class="btn btn-primary btn-order">주문하기</button>
    </form>
</div>

</body>
</html>

1주차를 마무리하며..

1주차 마무리는 간단하게 마카롱 주문 홈페이지를 만들어보았다.

아직 jsp를 배우지 않아 get/post를 통한 정보전달 기능은 구현하지 않았지만

2주차에는 jsp를 이용해 손님이 주문한 정보를 서버에 전달받는 기능까지 구현해봐야겠다.

1주차는 개발일지도 미루고 미루다 한번에 몰아쓰고.. 간단하고 쉽다고 연습도 많이 하지 않았다.

2주차부터는 으쌰으쌰 열공모드로!! 그 날 배운 내용은 그 날 꼭 정리하고 복습하도록 해야겠다.