말은 2주차이지만
공부한지 2일차입니다.
웹개발 종합반 강의를 듣고 있는데 5주짜리 강의지만 1주당 강의 길이는 1시간 정도 입니다.
11월에 부트캠프가 본격적으로 시작하기 전에 웹개발 종합반 강의를 3회 반복 수강할 예정입니다.
2주차 강의에서는
JQuery
Ajax를 배웠습니다.
가끔 왜 안되지 하고 보면 점 하나를 놓쳤거나 오타가 있었습니다.
좀 더 꼼꼼하게 봐야할 것 같습니다.
그래도 아직까지는 수업 따라가기가 어렵지는 않습니다.
아래는 이번 주차 숙제입니다.
1주차에 만들었던 팬명록에 현재 기온을 실시간으로 업데이트 할 수 있는 기능을 추가했습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 300px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://funshop1.akamaized.net/abroad/034/17285/UA%20True%20Wireless%20Flash%20X%20Project%20Rock%20Edition%201_0.jpg');
background-position: center;
background-size: contain;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mypost > button {
margin-top: 20px;
}
.card {
width: 95%;
max-width: 500px;
margin: 10px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
</style>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let temp = response['temp']
$('#temp').text(temp)
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>Dwayne Johnson 팬명록</h1>
<p>현재기온 : <span id="temp">00.0</span>도</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>The rock rocks!</p>
<footer class="blockquote-footer">이지농
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>The rock rocks!</p>
<footer class="blockquote-footer">이지농
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>The rock rocks!</p>
<footer class="blockquote-footer">이지농
</blockquote>
</div>
</div>
</body>
</html>'사전스터디_부트캠프' 카테고리의 다른 글
| 2회차 웹개발 종합반 1주차 css html JavaScript (0) | 2022.10.18 |
|---|---|
| 비전공자 개발자 도전기 5주차 웹개발 서버연결하기 (0) | 2022.10.18 |
| 비전공자 개발자 도전기 4주차 웹개발 "GET" "POST" (0) | 2022.10.14 |
| 비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup (1) | 2022.10.12 |
| 비전공자 개발자 도전기 1주차 웹개발 (1) | 2022.10.08 |