간단한 쇼핑몰 제작

이미지

- body
<div class="macaroon_img"></div>

- style
.macaroon_img {
        width: 500px;
        height: 300px;
        background-image: url("이미지 주소 링크");
        background-position: center;
        background-size: cover;
    }

내용

- body
- span에 이름을 붙여주면, 해당하는 곳만 꾸미기 가능
<div class="macaroon-desc">
        <h1>마카롱을 팝니다 <span class="price">가격:2,500원/개</span></h1>
        <p>이 마카롱을 먹으면 행복한 일이 생겨요!</p>
    </div>

- style
.macaroon-desc {
        margin: 20px 0px 20px 0px;
    }

부트스트랩 입력 및 선택

- body
<div class="macaroon_order">
        <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">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>

- style
.macaroon_order {
        width: 500px;
    }

버튼

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

- style
.btn-order {
        margin: auto;
        width: 100px;

        display: block;
    }

가운데 정열

- body
<div class="wrap">정열할 곳 안에 다 넣기</div>

- style
.wrap {
        width: 500px;
        margin: auto;
    }

버튼클릭시 창 뜨게하기

- body
onclick="order()" //버튼에 추가

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