728x90
반응형
아직 마무리해야할게 있지만, 기본적인 구성을 해보았습니다.
차근차근 다시 공부해봐야겠네요.
<!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>
<style>
.mainimg {
width: 400px;
height: 400px;
background-image: url("https://pbs.twimg.com/media/FCjYm37VcAENa0y?format=jpg&name=large");
background-position: center;
background-size: cover;
}
.center {
width: 400px;
margin: auto;
}
.center2 {
width: 400px;
margin-top: 20px;
}
.smalltxt {
font-size: 20px;
}
.btnstyle {
width:200px;
margin:auto;
display:block;
}
.selectauto {
width: auto;
display:block;
}
</style>
</head>
<body>
<div class="center">
<image class="mainimg"></image>
<div class="center2">
<h1>고장난 비행기 팝니다.<span class="smalltxt">상품가격 4백만달러</span></h1>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-name">주문자이름</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-adjust">수량</span>
<div class="dropdown">
<button style="background-color: white" class="selectauto 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="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-address">주소</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-phone">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<button type="button" class="btn btn-primary btnstyle">Primary</button>
</div>
</body>
</html>728x90
반응형
'개발코딩일지' 카테고리의 다른 글
| [나만의 수익성 앱, 앱개발 종합반] 개발일지(코딩연습일지) 3주차 (0) | 2021.12.09 |
|---|---|
| [비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)] 2주차 (0) | 2021.12.09 |
| [나만의 수익성 앱, 앱개발 종합반] 개발일지(코딩연습일지) 2주차 (0) | 2021.12.08 |
| [나만의 수익성 앱, 앱개발 종합반] 개발일지(코딩연습일지) 1주차 (0) | 2021.12.07 |
| ALL OF LICENSE (0) | 2020.08.25 |