불꽃코딩 4일차 - 3 (숙제완)
솔직히 아직 이해 못했다.
response 다음에 i가 어쩌고 0번째 어쩌고 솔직히 아직 모르겠다. 에이젝스 뼈대에서 뭘 어떻게 바꿔야 하는지 솔직히 url까지밖에 이해 못했다. 에이젝스 콜? 솔직히 힌트 겁나게 봤다. 아는데까지만 써놓고 나머지는 답안지를 봐가며 했다.... 벌써 11시네. 그래.. 2주차까지가 고비였다는 선생님 말씀을 새겨들으며 다음 주차를 준비하자니 다음주차는 내가 대학교양으로 들으려다가 도중에 드랍한 파이썬이라고 하시네^^. 오케 함 해볼게요. 그래도 일지를 쓰니 꺼져가려던 투지가 계속 불타오르는 느낌이라 좋다. 아래는 숙제 코드다. ..
<!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=Hurricane&display=swap" rel="stylesheet">
<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=Nanum+Myeongjo&display=swap" rel="stylesheet">
<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=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
* {
margin: auto;
}
.wrap {
font-family: 'Hurricane', cursive;
width: 500px;
text-align: center;
background-position: center;
}
.상품이미지 {
background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fshop1.phinf.naver.net%2F20220301_266%2F1646145344896iWlEG_JPEG%2Fhmgoepprod_%2528217%2529.jpeg&type=a340");
width: 350px;
height: 500px;
background-position: center;
background-position: top;
}
.상품정보 {
font-family: 'Nanum Myeongjo', serif;
width: 500px;
height: 300px;
text-align: center;
background-position: center;
padding-top: 30px;
}
.상품주문 {
font-family: 'Noto Sans KR', sans-serif;
background-color: pink;
border-radius: 10px;
padding: 30px;
width: 500px;
margin: 30px auto 30px auto;
}
</style>
<script>
$(document).ready(function () {
q1();
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let now_rate = response['rate']
$('#now_rate').text(now_rate);
}
})
}
function order() {
alert('앙큼하게 주문 완료!')
}
</script>
</head>
<body>
<div class="wrap">
<h1 class="font-family">Sparta Shop</h1>
</div>
<div class="상품이미지">
</div>
<div class="상품정보">
<h3>여성니트가디건<span style="font-size: medium"> 가격: 30,000원/개</span></h3>
<div>
<h9>안녕하세요, 코딩으로 이걸 만들어 보고있는데요, 코딩도 조금 포토샵같이 과정은 달라도 결과물이 같을 수 있는 것처럼 그런거죠? 원래 이런거죠? 정답은 없는거죠? 어려워요... 어렵다구요 하지만
내가 더 <span style="color:red">독한년</span>이야. 코딩? 아무리 독해봐라 내가 더 독해. 장난입니다. 하하... 욕은 죄송합니다. 요즘 밀고있는 어록이라......
네... 안녕.... 열심히 할게요!ㅜㅡㅜ
</h9>
<p class="rate">달러-원 환율: <span style="color:blue" id="now_rate">1219.15</span></p>
</div>
<div class="상품주문">
<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" placeholder="" aria-label=""
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>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</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>Choose...</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="basic-addon1">주소</span>
</div>
<input type="text" class="form-control" placeholder="" aria-label=""
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" placeholder="" aria-label=""
aria-describedby="basic-addon1">
</div>
<button type="button" onclick="order()" class="btn btn-secondary btn-lg btn-block">주문하기</button>
</div>
</div>
</body>
</html>Author And Source
이 문제에 관하여(불꽃코딩 4일차 - 3 (숙제완)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qqusong/불꽃코딩-4일차-3-숙제완저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
