<!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=Gowun+Batang&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Batang', serif;
}
.zero-coke {
margin: auto auto 10px 20px;
padding: 10px 0px 10px 0px;
}
.order {
width: 520px;
margin: 20px auto 10px 10px;
}
.btn-lg {
width: 300px;
height: 42px;
margin: 0px 0px 30px 150px
}
.mb-3 {
display: flex;
align-items: center;
font-size: 15px;
width: 520px;
margin: auto auto 10px 10px;
}
.form-control {
text-align: left;
font-size: 15px;
width: 520px;
margin: auto auto 10px 10px;
}
</style>
</head>
<body>
<div class="zero-coke">
<img src="https://contents.lotteon.com/itemimage/_v113504/LD/76/21/27/66/4_/0/LD762127664_0_1.jpg">
<br>
<br>
<h2 style="display:inline">코카콜라 제로, 20% 세일!</h2><span style="font-size: 15px"><b> 355ml 24입 17,600원</b></span>
<br>
<div style="width:600px; overflow:hidden; word-break:break-all;">사람들은 말하지.. 제로콜라를 뭔 맛으로 먹냐고..
닝닝하지 않냐고 김빠진 콜라맛 아니냐고... 저기요 탄산 강하고요.. 그리고 저는 바로 닝닝함 때문에 먹는 겁니다.. 니들이 몰 알아...
단 거 마시면 입 안에 빠득빠득한 느끰 남는데 제로콜라는 그런 거 1도 없고요? 사랑하고요? 쟁여놓고요? 평생 동반자로 삼고 싶다...
오늘도 2박스 샀다... 나와 함께하지 않겠는가? 가장 좋은 점은 먹고 나서 죄책감도 덜 하다는 것이다.. 제로 칼로리 짱!
</br>
</div>
<div class="order">
<h2>주문하기</h2>
</div>
<div class="mb-3 row">
주문자명<input type="text" class="form-control" style="width:420px">
주문수량<input type="number" type="range" step="1" min="0" max="10" class="form-control" placeholder="수량을 선택해 주세요." style="width:420px">
배송주소<input type="text" class="form-control" style="width:420px">
전화번호<input type="tel" class="form-control" style="width:420px">
</div>
</div>
<div class="button">
<button type="button" onclick="alert('주문이 완료되었습니다!')" class="btn btn-primary btn-lg">주문하기</button>
</div>
</body>
</html>
좀 이쁘게 꾸미고 싶어서 욕심내다가 갑자기 현타가 와서 중간에 멈춤 ㅠㅠ
완성은 1월 9일.. 포스팅은 챌린지 하는 게 있어서 10일에 올림ㅋㅋㅋㅋㅋ
이것보다 더 좋은 방법이 있을 수도 있는데 지금의 나는 이게 한계이니... 기록해두고 나중에 부끄러워하자...
어쨌든 난 열심히 했지만 자바스크립트 배운 거 활용을 안 해서 85점 드릴게용..
'개발일지' 카테고리의 다른 글
| [내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 2주차 / 22년 1월 15일 (0) | 2022.01.15 |
|---|---|
| [내일배움단] 엑셀보다 쉬운 SQL - 3주차 / 22년 1월 11일 (1) | 2022.01.11 |
| [내일배움단] 엑셀보다 쉬운 SQL - 2주차 / 22년 1월 9일 (0) | 2022.01.09 |
| [내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 1주차 / 22년 1월 6일 (0) | 2022.01.06 |
| [내일배움단] 왕초보 비개발자를 위한 웹개발 종합반 1주차 / 22년 1월 5일 (0) | 2022.01.05 |
댓글