웹개발종합반 1주차 - 숙제 : 원페이지 쇼핑몰 HTML + CSS 만들기
2021. 12. 29. 22:56ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
<!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>
<!--구글폰트-->
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Stylish', sans-serif;
}
.wrap{
width: 500px;
margin : auto;
}
.price {
font-size : medium;
}
.mybtn {
width: 100px;
margin : auto;
/*margin : auto;만 하면 안움직인다. 박스가 아니라 글씨이기 때문에 가로세로가 없음*/
display: block;
}
.txt{
margin-top: 20px;
}
</style>
</head>
<body>
<div class = "wrap">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_aUlwS_eOHo-CUPHU20EuHw_1xRPdBeYWow&usqp=CAU" width="500px" height="500px">
<div class = "txt">
<h1>양초를 팝니다<span class = "price">가격:3000원/개</span></h1>
<p>이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다.
하나 사가세요! 대나무 향이 아주 좋아요</p>
<div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">주문자 이름</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">수량</div>
</div>
<select class="form-control" id="exampleFormControlSelect1">
<option>--수량을 선택하세요--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">주소</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">전화번호</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2">
</div>
</div>
<div class="mybtn">
<button type="button" class="btn btn-primary">주문하기</button>
</div>
</div>
</div>
</body>
</html>