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 -->
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>1주차 숙제</title>
</head>
<style>
body{
background-color: pink;
}
* {
font-family: 'Do Hyeon', sans-serif;
}
.image {
width: 400px;
height: 370px;
background-size: cover;
background-position: center;
margin: 20px auto;
}
.price {
font-size: 17px;
}
.tag {
margin-left: 520px;
display: block;
}
.text {
font-size: 14px;
}
.order {
margin: auto;
width: 400px;
}
.btn-primary{
margin: auto;
display: block;
}
</style>
<script>
function order(){
alert('주문을 완료하였습니다.');
}
</script>
<body>
<div class="image">
</div>
<div class="tag">
<h3 class="name"> 책을 읽어 드립니다. <span class="price">가격:3,000원</span></h3>
<p class="text">소중한 당신에게 인생의 방향을 위해서 꼭 읽어야 하는 책입니다.<br>자신의 미래에 대한 방향성을 찾아갈 수 있도록 들어 보세요.</p>
</div>
<div class="order">
<div class="input-group mb-3" id="customer">
<div class="input-group-prepend">
<span class="input-group-text" id="customer_name">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-describedby="customer_name">
</div>
<div class="input-group mb-3" id="product">
<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">시크릿 2,000원</option>
<option value="2">시크릿 실천법 3,000원</option>
</select>
</div>
<div class="input-group mb-3" id="address">
<div class="input-group-prepend">
<span class="input-group-text" id="address_text">주소</span>
</div>
<input type="text" class="form-control" aria-describedby="address_text">
</div>
<div class="input-group mb-3" id="phone_number">
<div class="input-group-prepend">
<span class="input-group-text" id="phone_text">전화번호</span>
</div>
<input type="text" class="form-control" aria-describedby="phone_text">
</div>
<button type="button" class="btn btn-primary" onclick="order()">주문하기</button>
</div>
</body>
</html>
728x90
반응형
'IT Study' 카테고리의 다른 글
| [스파르타 코딩클럽] 엑셀보다 쉬운 SQL - 1주차 후기 (1) | 2022.01.11 |
|---|---|
| [스파르타 코딩클럽] 웹개발 종합반 - 2주차 수강 후기 (0) | 2022.01.11 |
| Advanced Google Analytics Assessment4 문제/답 (0) | 2021.03.01 |
| Advanced Google Analytics Assessment3 문제/답 (0) | 2021.03.01 |
| Advanced Google Analytics Assessment2 문제/답 (0) | 2021.03.01 |
