포도가게의 개발일지
스파르타 코딩클럽(왕초보) 1주차 숙제 본문
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap" rel="stylesheet">
<!-- 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>1주차 숙제</title>
<style>
* {
font-family: 'Gaegu', cursive;
}
.wrab {
width: 500px;
margin: auto;
}
.main {
background-color: green;
width: 500px;
height: 300px;
background-image: url("https://img.etnews.com/news/article/2021/05/26/cms_temp_article_26155823990264.jpg");
background-size: cover;
background-position: center;
}
.long {
width: 500px;
}
.str {
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrab">
<div class="main">
</div>
<h1 class="str">노트북을 팝니다 <span style="font-size: 18px">가격:1,000,000/개</span></h1>
<h5 class="lead str"><span style="font-size: 16px">이 노트북은 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요!</span>
</h5>
<div>
<div class="form-row align-items-center ">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group long">
<div class="input-group-prepend">
<div class="input-group-text">주문자 이름</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername">
</div>
</div>
</div>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group long">
<div class="input-group-prepend">
<div class="input-group-text">수량</div>
</div>
<select class="form-control custom-select" id="inlineFormInputGroupUsername">
<option selected>--수량을 선택하세요--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group long">
<div class="input-group-prepend">
<div class="input-group-text">주소</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername">
</div>
</div>
</div>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group long">
<div class="input-group-prepend">
<div class="input-group-text">전화번호</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
퇴사하고 1주차를 보내며 바쁘지만 아직까지는 할만하다. 생각보다 html, css를 되게 프로그래밍 언어랑 좀 달라 어렵게 생각했는데 간단한
거였다. 미적감각은 없기 때문에 열심히 부트스트랩을 활용해야겠다.
'웹' 카테고리의 다른 글
| 원페이지 쇼핑몰 완성 (0) | 2021.07.05 |
|---|---|
| 스파르타 코딩클럽 4주차 숙제(mongodb, flask, requests,ajax) (0) | 2021.07.03 |
| requests pakage 사용(Get) (0) | 2021.07.02 |
| 스파르타 코딩클럽 2주차 숙제(ajax, 환율표시) (0) | 2021.07.01 |
| html, css 기초(1) (0) | 2021.06.28 |
