스파르타코딩클럽 2주차 수강 후기.
2주차 수업 내용으로는 제이쿼리와 기상이나, 따릉이 등등 실질적으로 사회에서 쓰고있는 정보를 내가만든 웹사이트에 불러오는 방식을 수업했다. 아직은 완벽하다고할수없고 낯선상태지만 반복숙달을 통해 익숙해져야하는 것같다. 웹개발강의 2회 완강하기위해서 시간을 너무 지체하지 않고 5주차 강의를 다 듣고 난뒤에 부족한 부분은 강의형식으로 다시들어야겠다.
<!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=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Nanum Pen Script', cursive;
}
.mytitle{
height: 250px;
width:100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MjFfNTkg%2FMDAxNjUwNDc0NzE5NjAw.1IBC_xLx5CDTQKTsSpKwmu8zBhqLwTtPtDNhdNU3-g8g.D_uYkuFwJoJVPm18EauofWaPK3fHxyyOpFs1lhcVKowg.JPEG.cinim126%2F%25B4%25D9%25BF%25EE%25B7%25CE%25B5%25E5_%25281%2529.jpg&type=a340");
background-position: center;
background-size: auto;
color:white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card{
max-width: 500px;
width:95%;
margin: 20px auto 0px auto;
padding: 5px;
}
.mypost{
max-width: 500px;
width:95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mybtn{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mybtn > button {
margin-right: 10px;
}
</style>
<script>
$(document).ready(function(){
alert('다 로딩됐다!')
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/daegu",
data: {},
success: function(response){
$('#temp').text(response['temp'])
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>찰리푸스 팬명록</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="floatingTextarea"></textarea>
<label for="floatingTextarea">응원댓글</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
</blockquote>
</div> </div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
</blockquote>
</div> </div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>
댓글