2022년 4월 7일 목요일
오늘도 휴무라 이사를 마치고 2주차 강의를 몰아보았다.
매달 나가는 15만원이라는 거금 덕분에 공부하는데 동기부여가 확실하게된다.
지난 개발일지는 일기같아서 이번에는 정보를 좀 담아봐야겠다.
$(document).ready(function(){
이거는 <script>에 적는 것으로 페이지가 불러와졌을 때를 기준으로 데이터를 불러올 때 쓰는 거다.
자세한 것은 모른다. 아직 문법 같은 건 하나도 모르고 실습만 하고있다ㅎㅎ
언어 교육을 배웠었는데 그 때배운 직접교육법과 유사한것 같다.
그냥 아이가 모국어를 배우는 방식과 유사하게 가르치는데, 지루하지않고 재미있다ㅎ
이러다가는 곧 내가 원하는 기능들도 만들 수 있지 않을까하는 망상을 하게한다.
아래는 내가 배워서 숙제한 결과물이다:)
<!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">
<!-- jQuery 라이브러리-->
<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>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
/*background-color: green;*/
/**/
width: 100%;
height:250px;
/*사진 어둡게 만들기*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://blog.kakaocdn.net/dn/bXc1mi/btqDZOhUE7Y/l06RWe3pVwzEhHStvdhVOk/img.png");
background-position: center 30%;
background-size: cover;
color: white;
/*가운대 정렬*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.wrap {
/*모바일 처리*/
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost {
//background-color: green;
max-width: 500px;
width: 95%;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px;
padding: 20px;
/*display: none;*/
}
.mybtn {
//background-color: green;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mypost > button {
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
// alert('다 로딩됐다!')
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let temp = response['temp']
// let msg = response['msg']
// $('#img-rtan').attr('src', url)
$('#temp').text(temp)
// console.log(msg, url)
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>Keshi 팬명록</h1>
<p>현재기온 : <span id="temp">00.0</span>도</p>
<!-- <button onclick="open_box()">영화 기록하기</button>-->
</div>
<div class="mypost">
<!-- 간단한 글씨를 씁니다.-->
<div class="form-floating mb-3">
<input type="text" class="form-control" id="text" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave comment here" id="comment"
style="height: 100px">
</textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">응원남기기</button>
</div>
<div class="card" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in
</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>'파이썬' 카테고리의 다른 글
| 앱개발 플러스 2주차! (0) | 2022.05.22 |
|---|---|
| 앱개발 플러스 1주차! (0) | 2022.05.14 |
| [D+23] 시간 참 빠르다 (0) | 2022.04.28 |
| [D+7] 개발일지: 크롤링을 배우다 (0) | 2022.04.13 |
| [D+1] 개발일지 첫 글 (0) | 2022.04.06 |
