스파르타 웹개발 종합반 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">
<!-- 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=Jua&family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@200&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.image {
width: 400px;
height: 250px;
background-image: url("data:image/jpeg;base64,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");
background-size: cover;
background-position: center;
margin: auto;
}
.wrap {
margin: 10px auto;
width: 400px;
height: 800px;
}
.btn-primary {
margin: auto;
display: block;
}
.title {
font-size: 25px;
margin-top: 14px;
font-weight: bold;
}
.comment {
font-size: 14px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="image"></div>
<p class="title">치실을 팝니다<span style="font-size:10px;">가격: 3,000원/개</span></p>
<p class="comment">이 치실은 사실 특별한 힘을 가지고 있어요. 치실을 들고 이 사이에 끼우기만 성공하면 마치 스케일링을 받은것과 같은 효과가 일어납니다. 딸기향도 나요</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</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">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주소</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">전화번호</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
<button type="button" class="btn btn-primary">주문하기</button>
</div>
</body>
</html>
'개발일지' 카테고리의 다른 글
| 지니뮤직 크롤링 (0) | 2022.05.11 |
|---|---|
| 실시간 환율(스파르타) (0) | 2022.05.09 |
| GUI 텍스트 위젯 (0) | 2022.04.28 |
| GUI 엔트리 위젯 (0) | 2022.04.28 |
| 소향 팬명록 2차(스파르타) (0) | 2022.04.22 |