스파르타코딩
내일배움카드로 신청한 웹개발 왕초보 머시기 코딩 과정을 듣고 있는데
드디어 1주차 숙제를 마쳤다.
1주차 숙제는 나만의 쇼핑몰 메인페이지 만들기
조건은 주문하기 버튼을 눌렀을 때 '주문완료' 등의 얼럿이 떠야 함.
대략의 기획서를 주었고 그 토대로 만들었다
귀엽다 내가 좋아하는 애들로 하니까 귀엽다
아래 코드로 해봤다
줄넣는거 어떻게 하지 찾아봤는데 hr 만 넣으면 되는거였음..
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.item-img {
width:500px;
height:400px;
background-image: url("https://pyxis.nymag.com/v1/imgs/e70/f36/f9ce2d68928e3e538e8776f69c8afe6852-10-minions.rhorizontal.w700.jpg");
background-position: center;
background-size: cover;
}
.price {
font-size : 15px;
color: gray;
}
.item-story {
width: 500px;
margin-top: 20px;
}
.joomoon {
font-size: 30px;
}
.item-order {
width: 500px;
margin-top: 20px;
}
.btn-order {
margin:auto;
width:200px;
height: 50px;
display: block;
font-size: 20px;
}
.wrap {
width: 500px;
margin: auto;
}
</style>
<script>
function order(){
alert('주문 완료된줄 알았지?')
alert('된거 맞아')
}
</script>
</head>
<body>
<div class="wrap">
<div class="item-img"></div>
<div class="item-story">
<h1>미니언즈 팔아요 <span class="price"> 가격 : 1,000,000원 / 마리</span></h1>
<p>이 미니언들은 고대로 부터 우리와 함께 숨쉬며 살아가는데 달에서 왔다는 설이 있다. 강인한 생명력과 지긋한 나이에 비해 귀염 뽀짝한 외모를 가지고 있어 나의 마음을 설레게 하고 있으며 되되 않는 말을 하는데 귀엽기 짝이 없다. 그렇기 때문에 꼭 키워야만 한다.주문해라.
</div>
<hr>
<div class="item-order">
<span class="joomoon">주문하기</span>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주문자 성함</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">
<label class="input-group-text" for="inputGroupSelect01">선택하기</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>누구를 가져갈래..?</option>
<option value="1">밥</option>
<option value="2">케빈</option>
<option value="3">스튜어드</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주소</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-sizing-default">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문할래</button>
</p>
</div>
</body>
</html>
부트스트랩 시작 템플릿을 기본으로
이거만 붙여넣고 시작하면 뭐든 할 수 있겠다
근데 티스토리에 어떻게 붙여오는지 모르겠다
좀 더 연구를 해봐야겠음
자바스크립트는 이해하기 쉽게 설명해 주셨으나
응용하기에는 내 머리가 참 낯을 가린다
일단 재밌어서 계속 하고 싶다.
일단은..
'Developer' 카테고리의 다른 글
| 파이썬 프로그래밍 - format 함수 사용법, 실습 11가지 (%d, %s, %f ) (0) | 2020.03.04 |
|---|---|
| 파이썬 프로그래밍 독학 - Print 문법 기초 3가지 (0) | 2020.03.03 |
| 파이썬 독학 아톰 글자 사이즈 변경하기 (0) | 2020.03.01 |
| 파이썬 독학 전 미리 세팅 해야할 것 (아톰 플러그인 설치) (0) | 2020.02.29 |
| 파이썬, 아톰 다운로드 - 설치하기 (시작이 반이다) (0) | 2020.02.20 |
